写在前面的，该系列题目解析，我是整合各类网上资源，做出的回答。每道题我都尽量贴图，贴 code ，以我认为的最好理解的方式展现出来。
持续更新...
doctype 有什么作用？HTML5 为什么只需要写 <!DOCTYPE HTML>
-
作用：
概念 DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 声明必须是HTML 文档的第一行，位于标签之前。 -
HTML5 不基于
SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为；
HTML4.01 基于 SGML，所以需要引用 DTD。才能告知浏览器文档所使用的文档类型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
data- 属性有什么好处？
允许在标准内于HTML元素中存储额外的信息；用法很简单：
HTML语法：所有在元素上以data-开头的属性为数据属性。
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars"
>
...
</article>
JS访问语法: 获取对应元素，再使用dataset对象去获取到数据属性（是指 data- 后面部分，需要将 - 转为驼峰法）
var article = document.querySelector('#electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
注意：每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5.将会调整属性的值为5。
CSS访问:
可以通过 generated content 使用函数 attr() 来显示 data-parent 的内容：
article::before {
content: attr(data-parent);
}
也同样可以在CSS中使用 属性选择器 根据data来改变样式
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
| cookies | sessionStorage | localStorage | |
|---|---|---|---|
| 存储生命周期 | 一般由服务器生成，可设置生效时间。如果在浏览器生成，默认关闭浏览器失效。 | 仅在当前会话下有效，关闭页面或者浏览器后被清除。 | 除非用户手动清除，否则永久保存。 |
| 存放数据大小 | 4k 左右 | 一般为 5M 左右 | 同← |
| 与服务器端通信 | 每次都会携带在 HTTP 头部，如果过大会有性能问题 | 仅在浏览器中保存，不参与服务器通信 | 同← |
| 易用性 | 源生 cookie 接口不友好，需封装在使用 | 源生接口可接受，也可再次封装对 Object 和 Array 有更好的兼容 | 同← |
storage 类相关成员
| 成员名 | 方法参数 | 描述 |
|---|---|---|
| length | 属性 | 获取 storage 数量 |
| key(n) | n：索引值 | 根据索引值，返回 key |
| getItem(key) | key：键名 | 根据 key，返回 value |
| setItem(key, value) | key：键名，value：键值 | 根据 key 和 value 设置数据项，如果 key 存在，则覆盖相应 value。 |
| removeItem(key) | key：键名 | 删除对应的 key 的 数据项 |
| clear() | 无 | 清空当前 storage 对象 |
请描述一下<script>, <script async> 和 <script defer> 的区别？
<script>：浏览器在执行 html 遇到 <script> 标签时，会先停止解析，先去下载 js 文件，然后立即执行 js，等执行结束后再继续进行解析。在这个 js 执行期间，就会出现页面空白现象。
<script async>：浏览器在下载 js 同时，页面依旧解析；等下载完成时，页面停止解析，js 脚本执行结束后，恢复页面解析。
<script defer>：浏览器在下载 js ，页面同时解析，直至页面全部解析完成，才去执行 js 文件。
我从网上找了一张图，帮助理解；
注：
在含有 async 的 多个 js 脚本，执行顺序并不一定按照出现先后顺序，可能出现后面的 js 脚本比前面的先执行，这是因为 async 只要脚本下载完成就会执行；在含有 defer 的多个 js 脚本，H5 规定是按照出现先后顺序的，但实际可能也不一定按照顺序执行。
为什么要把 CSS link 放在 <head>，把 JS script 放在</body>前面？
主要为了提高页面的性能。
CSS 不会阻塞 DOM 解析，但会阻塞 DOM 渲染，把 CSS link 放在 <head>, 可以让页面逐步呈现，提高了用户体验；
JS 文件下载和执行会阻塞 DOM 解析，将 JS script 放在</body>前，是为了让 HTML 先解析完，最早的将页面呈现给用户。
如果 js 脚本包含 async 和 defer 就例外了，具体可看题目 4
什么是渐进式渲染（progressive rendering）？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
- 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
- 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。
详情可查看这篇文章 Async Fragments...
为什么要在 img 标签使用 srcset 属性？
主要是为了设置响应式图片。
在分辨率切换时，我们想要显示相同的图片内容，标准的 img src 只能指定唯一的资源文件。配合使用 srcset 和 sizes 属性可以很好的实现这一效果。
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"
>
srcset：定义了我们允许浏览器选择的图像集，以及每个图像的大小。
- 一个文件名 (elva-fairy-480w.jpg)
- 一个空格
- 图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到（例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息）。
sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
- 一个媒体条件（max-width: 480px）
- 一个空格
- 当媒体条件为真时，图像将填充的槽的宽度（440px）
svg 和 canvas 区别？
| svg | canvas | |
|---|---|---|
| 定义 | 指可伸缩矢量图形 (Scalable Vector Graphics)，是一种使用 XML 描述 2D 图形的语言。矢量图 | 通过 JavaScript 来绘制 2D 图形。位图 |
| 支持事件处理 | 基于 XML，SVG DOM 中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器 | 不支持 |
| 适用场景 | 最适合带有大型渲染区域的应用程序（比如谷歌地图），适合静态图片展示，高保真文档查看和打印的应用场景 | 最适合图像密集型的游戏，能够以 .png 或 .jpg 格式保存结果图像 |
行内元素、块级元素、空元素有哪些？
- 行内：
aspanimgibinputselect... - 块级：
divulollidldtddh1~h6ptable... - 空元素：
brhrlinkmeta...
简述 HTML 语义化理解？
- 来源：通常写 HTML，都是直接使用 div 和 span 标签，再通过 class 来确定具体样式。页面上的头部、底部、标题、导航等结构，只能通过 class 来分辨。因此，HTML5 添加了页面布局结构的新标签，在开发过程中，根据不同的页面内容使用合适的标签，即为语义化。
-
优点：1> 有利于构建清晰的代码结构，便于团队的开发与维护；
2> 有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取，利于SEO
3> 有利于不同设备的解析 -
HTML5 新增的语义化标签：
<header><footer><nav><aside><main><article><details><mark><section><summary><figcaption><figure><time>...
HTML5 新特性？
- 语义化标签
- 表单控件：
calendar，date，time，email，url，search... - 音频、视频：
audio，video - Canvas
- 地理定位：
Geolocation - 拖拽释放：
Drag，drop - web storage：
localStorage，sessionStorage - web worker：是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能
- WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解？
- Webkit 内核：Safari，Chrome等
- Trident 内核：IE, MaxThon, TT, The Word, 360, 搜狗浏览器等。
- Gecko 内核：NETSCAPE6 及以上版本，FireFox
- Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine) 和 JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
src 与 href 的区别？
src：指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href：指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
页面导入样式 link 和 @import 有什么区别？
区别：
1> link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他业务；@import 是 CSS 范畴，只能加载 CSS。
2> link 是 XHTML 标签，无兼容性问题；但 @import 是 CSS2.1 提出的，低版本浏览器不支持。
3> link 引用 CSS 时，页面同时加载；@import 需要等页面完全载入后，才进行加载，因此可能出现一开始没有 CSS 样式，闪烁一下再出现有样式的页面。
4> link 支持使用 Javascript 去改变样式；但是 @import 不支持。
5> 导入语法不同。-
语法介绍：
link<head> <link rel="stylesheet" type="text/css" /> </head>@import
1> HTML 文件中：<style> @import url(style.css) </style>2> CSS 文件中
@import url(style.css) div {}
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
(1) title 与 h1 的区别
- 定义：
title是网站标题，一个页面只能有一个
h1是文章主题 - 作用：
title 概括网站信息，可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的，是显示在网页 Tab 栏里的；
h1 突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。
注意： 如果 title 为空，但是页面存在 h1，b，strong 标签，搜索引擎会默认页面 title 为 h1 内的内容，所以得出结论 h1 是在没有外界干扰下除 title 以外第二个能强调页面主旨的标记，在一个页面中应该使用且只使用一次 h1 标签。
(2) b 与 strong 的区别
- 定义：
b(bold)是实体标签，用来给文字加粗
strong是逻辑标签，作用是加强字符语气 - 区别：
b 标签只是加粗的样式，没有实际含义，常用来表达无强调或着中意味的粗体文字
strong 表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过css添加样式，使用别的样式强调
建议：为了符合 CSS3 的规范语义化，b 应尽量少用而改用 strong
(3) i与em的区别
- 定义：
i(italic)是实体标签，用来使字符倾斜
em(emphasis)是逻辑标签，作用是强调文本内容 - 区别：
i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语； - em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
建议：为了符合 CSS3 的规 范，i 应尽量少用而改用 em
元素的alt和title有什么异同？
- alt: 当图片加载不出时，作为替代文字出现；
- title：当鼠标悬浮于元素时，作为解释型文字出现。
HTML5 的 form 是如何关闭自动完成功能？
关闭输入框的自动完成功能有3种方法：
（1）在 IE 的 Internet 选项菜单里的内容--自动完成里面设置
（2）设置 form 的 autocomplete 为 "on" 或者 "off" 来开启或者关闭自动完成功能（关闭整个表单自动提示功能）
（3）设置输入框(input)的 autocomplete 为 "on" 或者 "off" 来开启或者关闭该输入框的自动完成功能（关闭密码域的自动完成）
Label的作用是什么？是怎么用的？
- 作用：用于绑定一个表单元素, 当点击 Label 标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 Label 标签里面的文字时， 光标会定位到指定的表单里面。
-
属性：
for：表示这个 Lable 是为哪个控件服务的，Label 标签要绑定了 for 指定HTML元素的 id 或 name 属性，当点击这个标签的时候，所绑定的元素将获取焦点 ，点击 label 所包裹内容，自动指向 for 指定的 id 或 name
accesskey：定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键) -
用法：
<label for="username">姓名</label><input id="username" type="text">
网站 SEO 怎么处理？
SEO 全称 Search Engine Optimization，搜索引擎优化。
优化可以有以下方式：
网站结构布局优化
(1) 控制首页链接数量：数量过少直接影响网站收录数量，过多则影响用户体验同时降低首页的权重。
(2) 扁平化的目录层次：尽量做到跳转3次，就可以到达网站内页。
(3) 导航优化：尽量采用文字方式，也可搭配图片导航，<img> 标签必须添加 alt 和 title 属性，即使未加载出图片时，也可以看到文字信息。其次，可以添加面包屑。
(4) 网站的结构布局 ：页面头部放入主体重要的信息，页面尾部可以加入版权友情链接信息。
(5) 利用布局， 将重要的 html 代码放在最前面：SEO 抓取 html 内容从上到下，因此我们可以通过修改样式，将重要代码放在前面。
(6) 控制页面大小：减少 http 请求，提高网站的加载速度。
网页代码优化
(1) 突出重要的内容：合理设计 title、description、keywords
(2) 语义化书写 html 代码：尽量让代码语义化，在适当的位置使用适当的标签，让阅读者和 SEO 一目了然。比如使用 strong 代替 b ，使用 em 代替 i；
(3) <a> 标签优化：<a> 标签应该要加 title 说明，如果外部链接，则加上 el='nofollow' 属性，目的为了让 SEO 不去该链接，因为一旦去了外部链接就不会继续在回来了；SEO 不会执行 JS，因此 a 链接的 onclick 事件不会被读取。
(4) <h1>标签优化：一个页面有且最多只能有一个 h1 标签，比如可以放在首页的 logo；其余标题可以用<h2> 等其他标题标签
(5) <img>标签优化：应该使用 alt 属性，当网速很慢或者图片地址失效时，可以让用户了解当前图片作用。
(6) 少使用 iframe：一般不会读取其中的内容
(7) 会过滤掉 display：none 的内容
meta 标签？
介绍：可以定义文档的各种元数据，提供各种文档信息，有助于 SEO。
属性值：
name：名称/值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。
http-equiv：没有name时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部
content： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用
charset： 声明了页面的字符编码。
如何实现浏览器多个标签之间的通信？
- localStorage：监听 storage 对象；
- cookie + setInterval：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
-
webworker
找了一篇详情：多标签通信
