写在前面: 以下内容纯属个人总结, 能力有限, 所以总结的略显粗糙, 各路大神若觉鄙人 阐述的不到位, 还望不吝赐教, 指点一二
1. src 和 href 的区别
src 和 href 都是用来引用外部的资源，它们的区别如下：
src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。
href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。
2. 对 HTML 语义化的理解
语义化是指 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
$\color{red}{常见的语义化标签：}$
头部 导航栏
区块（有语义化的div）
主要区域
主要内容
侧边栏
底部
3. DOCTYPE(⽂档类型) 的作⽤
DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是 (告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类型定义) **来解析文档**，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在 HTML ⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是 CSS1Compat）：
CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
4. script 标签中 defer 和 async 的区别
如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别:
其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。
defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：
执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
脚本是否并行执行：async 属性，表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。
5. 常⽤的 meta 标签有哪些
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了 HTTP 标准固定了一些name作为大家使用的共识，开发者还可以自定义 name。
常用的 meta 标签：
（1）charset，用来描述 HTML 文档的编码类型：
（2） keywords，页面关键词：
（3）description，页面描述：
（4）refresh，页面重定向和刷新：
（5）viewport，适配移动端，可以控制视口的大小和比例：
其中，content 参数有以下几种： $\color{red}{ width viewport ：宽度(数值/device-width); height viewport ：高度(数值/device-height); initial-scale ：初始缩放比例; maximum-scale ：最大缩放比例; minimum-scale ：最小缩放比例; user-scalable ：是否允许用户缩放(yes/no） }$
（6）搜索引擎索引方式：
其中，content 参数有以下几种： $\color{red}{ all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索；nofollow：页面上的链接不可以被查询。 }$
6. HTML5 有哪些更新
1. 语义化标签
header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
footer：定义文档或节的页脚（底部）；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；
2. 媒体标签
（1） audio：音频
属性： $\color{red}{ controls }$ 控制面板; $\color{red}{ autoplay }$ 自动播放; $\color{red}{ loop=‘true’ }$ 循环播放
（2）video 视频
属性： $\color{red}{ poster }$ ：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面; 默认显示当前视频文件的第一针画面，当然通过 poster 也可以自己指定。 $\color{red}{ controls }$ 控制面板; $\color{red}{ width}$ ; $\color{red}{ height}$
（3）source 标签
因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过 source 来指定视频源。
3. 表单
表单类型：
email ：能够验证当前输入的邮箱地址是否合法
url ： 验证 URL
number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max 属性可以设置为最大值，min 可以设置为最小值，value 为默认值。
search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ： 可以提供给一个范围，其中可以设置 max 和 min 以及 value，其中 value 属性可以设置为默认值
color ： 提供了一个颜色拾取器
time ： 时分秒
data ： 日期选择年月日
datatime ： 时间和日期(目前只有 Safari 支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件
表单属性：
placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
$\color{red}{1. 表单必须提交过; 2. 必须有 name 属性。}$
required：要求输入框不能为空，必须有值才能够提交。
pattern=" " 里面写入想要的正则模式，例如手机号 patte="^(+86)?\d{10}$"
multiple：可以选择多个文件或者多个邮箱
form=" form 表单的 ID"
表单事件：
oninput 每当 input 里的输入框内容发生变化都会触发此事件。
oninvalid 当验证不通过时触发此事件。
4. 进度条、度量器
progress 标签：用来表示任务的进度（IE、Safari 不支持），max 用来表示任务的进度，value 表示已完成多少
meter 属性：用来显示剩余容量或剩余库存（IE、Safari 不支持）
high/low：规定被视作高/低的范围
max/min：规定最大/小值
value：规定当前度量值
设置规则：$\color{red}{min < low < high < max}$
5.DOM 查询操作
document.querySelector()
document.querySelectorAll()
它们选择的对象可以是标签，可以是类(需要加点)，可以是 ID(需要加#)
6. Web 存储
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
7. 其他
拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
地理定位：Geolocation（地理定位）用于定位用户的位置。
总结：
$\color{red}{ （1）新增语义化标签：nav、header、footer、aside、section、article }$
$\color{red}{ （2）音频、视频标签：audio、video }$
$\color{red}{ （3）数据存储：localStorage、sessionStorage }$
$\color{red}{ （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） }$
$\color{red}{ （5）input 标签新增属性：placeholder、autocomplete、autofocus、required }$
$\color{red}{ （6）history API：go、forward、back、pushstate }$
移除的元素有：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
7. img 的 srcset 属性的作⽤？
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset 属性。srcset 属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：
使用上面的代码，就能实现在屏幕密度为 1x 的情况下加载 image-128.png, 屏幕密度为 2x 时加载 image-256.png。
按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有 1x,2x,3x,4x 四种，如果每一个图片都设置 4 张图片，加载就会很慢。所以就有了新的 srcset 标准。代码如下：
其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。
sizes 语法如下：
sizes="[media query] [length], [media query] [length] ... "
sizes 就是指默认显示 128px, 如果视区宽度大于 360px, 则显示 340px。
8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
· 行内元素有：a b span img input select strong；
· 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即没有内容的 HTML 元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
· 常见的有：
、
、
· 鲜见的有：、