本文系统梳理HTML知识点,常见面试题
src | href |
---|---|
src用于替换当前元素 | href用于在当前文档和引用资源之间确立联系 |
src是source的缩写 | href是Hypertext Reference 的缩写 |
在 <img> 、<script> 、<iframe> 中, 表示引入 | 用在 <link> 、<a> |
会暂停其他资源的下载和处理 | 并行下载资源 |
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。
语义化的优点
常见的语义化标签:
<header>
<nav>
<main>
<article>
<aside>
<footer>
DOCTYPE(⽂档类型)是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式
可通过document.compatMode获取,比如,语雀官网的文档类型是CSS1Compat
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:
<meta>
标签由 name
和 content
属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等,除了HTTP标准固定了一些name作为大家使用的共识,开发者还可以自定义name。
常用的meta标签:
<meta charset="UTF-8" >
<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述内容" />
<meta http-equiv="refresh" content="0;url=" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
禁用双指缩放
<meta name="robots" content="index,follow" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="标题">
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
总结,meta标签用途很广,设置编码、http相关(设置缓存与重定向)、SEO、CSP、离线App、safari相关、
搜索引擎索引方式 content属性值
类型 | 含义 |
---|---|
all | 文件被索引,且页面上的链接可以被查询 |
none | 文件不被索引,且页面上的链接不可以被查询 |
index | 文件将被检索 |
follow | 页面上的链接可以被查询 |
noindex | 文件将不被检索 |
nofollow | 页面上的链接不可以被查询 |
<audio>
<video>
localStorage
sessionStorage
type | 作用 |
---|---|
能够验证当前输入的邮箱地址是否合法 | |
url | 验证URL |
number | 只能输入数字,其他输入不了,而且自带上下增大减小箭头,max属性可以设置为最大值,min可以设置为最小值,value为默认值 |
search | 输入框后面会给提供一个小叉,可以删除输入的内容,更加人性化 |
range | 可以提供给一个范围,其中可以设置max和min以及value,其中value属性可以设置为默认值 |
color | 提供了一个颜色拾取器 |
time | 时分秒 |
data | 日期选择年月日 |
datatime | 时间和日期(目前只有Safari支持) |
datatime-local | 日期时间控件 |
week | 周控件 |
month | 月控件 |
如日期相关控制,支持性不是很好, 一般项目中使用开源UI组件。
属性 | 作用 |
---|---|
placeholder | 提示信息 |
autofocus | 自动获取焦点 |
autocomplete | 有两个值on off 使用前提:表单必须提交过,必须有name属性 |
required | 要求输入框不能为空,必须有值才能够提交 |
pattern | 正则表达式校验 |
multiple | 可以选择多个文件或者多个邮箱 |
form | form表单的ID |
- html标签 及属性 不区分大小写,属性值区分大小写
- 某些 HTML 元素对于放在其中的元素类型有限制例如
<ul>
,<ol>
,<table>
和<select>
,相应的,某些元素仅在放置于特定元素中时才会显示,例如<li>
,<tr>
和<option>
。
自闭合的标签
非自闭合标签,如果强行自闭合会出问题,但使用了框架如vue可以兼容这种情况
行内元素有:a
b
span
img
input
select
strong
块级元素有:div
ul
ol
li
dl
dt
dd
h1~6
p
响应式页面中经常用到根据屏幕密度设置不同的图片。
srcset 属性通常与 sizes 属性一起使用,后者指定了不同视口条件下图像的大小。两者共同使得浏览器能够选择最合适的图像进行显示,从而优化用户体验,减少带宽使用和加载时间。
html<img src="fallback-image.jpg"
srcset="image1.jpg 1024w,
image2.jpg 800w,
image3.jpg 480w"
sizes="(max-width: 600px) 480px,
(max-width: 1024px) 800px,
1024px">
优点:
缺点:
label标签来定义表单控件的关系:当用户选择label标签时,浏览器会自动将焦点转到和label标签相关的表单控件上。
html<!-- 使用方法1 -->
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
<!-- 使用方法2 -->
<label>Date:<input type="text"/></label>
<title>
包含的数据都不会真正作为内容显示给读者。定义:SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言XML描述的2D图形的语言,SVG基于XML就意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
特点:
Canvas是画布,通过Javascript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制。
特点:
svg 与 canvas 区别
- | Canvas | Svg |
---|---|---|
历史 | 较新、由Apple私有技术发展而来 | 历史悠久,2003年成为W3C标准 |
功能 | 功能简单,2D绘图API | 功能丰富,各种图像、滤镜、动画等 |
特点 | 像素,只能脚本驱动 | 矢量,XML,CSS,元素操作 |
兼容性 | 主流浏览器,IE9+ | 主流浏览器,IE9+,其它SVG阅读器 |
操作对象 | 基于像素(动态点阵图) | 基于图形元素 |
元素 | 单个HTML元素 | 多种图形元素 |
驱动 | 只能脚本驱动 | 支持脚本和CSS |
事件交互 | 用户交互到像素点(x,y) | 用户交互到图形元素(rect, path) |
性能 | 适合小面积,大数量应用场景 | 适合大面积,小数量应用场景 |
编码和解码使用的字符集不同就会导致乱码
一般浏览器乱码的原因, 开发者使用window电脑创建的html文件默认是gbk编码,网页中也没有编码声明 <meta charset="utf-8">
,浏览器使用默认方式utf-8
解码,这就导致了乱码
解决方案
content-type: text/html; charset=utf-8
<meta charset="utf-8">
补充知识点:浏览器有一套自己的编码解析机制
原生的JavaScript拖拽有两种方式
<div>
dragstart
drag
dragend
发生在拖拽元素身上dragenter
进入后dragover
离开dragleave
放置drop
发生在目标元素身上我写一个drag的Demo
mousedown
鼠标按下mousemove
鼠标移动mouseup
鼠标松开我也写了一个滑块验证的demo
推荐资料
本文作者:郭敬文
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!