1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有什么意义？
- DOCTYPE告诉浏览器使用哪个版本的HTML规范来解析文档。
- 不声明DOCTYPE或者DOCTYPE格式不正确会导致HTML以混杂模式解析。
- 标准模式：以浏览器支持的最高标准运行。
- 混杂模式：使用向下兼容的方式来解析。
2、行内元素有哪些？块元素有哪些？空元素有哪些？
- 行内元素：a b span img input textarea select
- 块元素：div ul li ol dl p h1-h6 table form
- 空元素：br hr link meta
3、link和@import有什么区别？
- link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import属于css范畴，只能加载css；
- link引用css是，页面载入时同时加载，@import需要在页面完全加载以后加载，而且@import被引用的css会等到引用它的css文件加载完才加载；
- link是xhtml标签，无兼容问题，而@import是在css2.1提出来的，低版本的浏览器不支持；
- link支持使用js去控制样式，@import不支持；
- link方式的权重高于@import
- @import在html使用的时候需要
<style type="text/css">标签
4、HTML语义化
语义化从HTML代码来展示页面结构，语义化的优点：
- 标签语义化有利于搭建良好的HTML结构，有助于搜索引擎建立索引和爬取；
- 有利于不同设备的解析；
- 有利于搭建清晰的代码结构，有助于团队开发和维护。
5、H5新增标签
（1）：结构标签（语义化标签）
section。section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
article。article标签装载显示一个独立的文章内容。还可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
aside。标签内容之外与标签内容相关的辅助信息；
header。header标签定义文档的页面组合，通常是一些引导和导航信息。
hgroup。hgroup标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
footer。页尾信息；
nav。nav标签定义显示导航链接。
figure。独立的单元，例如某个有图片与内容的新闻块。
time。time标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
mark。mark标签定义带有记号的文本。请在需要突出显示文本时使用
<mark>标签。figure。figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
figcaption。figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
contextmenu。contextmenu 标签添加到系统右键菜单 [貌似这个功能只有firefox支持]
（2）：表单标签email。必须输入邮件。
url。必须输入url地址。
number。必须输入数值。
range。必须输入一定范围内的数值。
Date Pickers。日期选择器。
search。搜索常规的文本域。
color。颜色。
（3）：媒体标签video。视频
audio。音频
embed。嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
source。source设置两份或多份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）
track。诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
（4）：其他标签
- details。details标签用于描述文档或文档某个部分的细节。与
<summary>标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。 - summary。summary标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
- bdi。把用户名从周围的文本方向设置中隔离出来
- canvas。canvas标签定义图形，比如图表和其他图像。只是图形容器，您必须使用脚本来绘制图形。
- command。可以定义命令按钮，比如单选按钮、复选框或按钮。只有 Internet Explorer 9支持
- datalist。比select更牛。用户不但可以选择还可以自己输入。
- embed。embed标签定义嵌入的内容，比如插件。例：
<embed src="helloworld.swf" /> - keygen。keygen标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
- meter。meter标签定义度量衡（一般用于进度条）。仅用于已知最大和最小值的度量。例：
<meter value="3" min="0" max="10">3/10</meter><br><meter value="0.6">60%</meter> - output。执行计算然后在 <output> 元素中显示结果
- progress。progress标签定义运行中的进度（进程）。例：
<progress value="22" max="100"></progress> - rp。rp标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
- rt。rt标签定义字符（中文注音或字符）的解释或发音。
- ruby。ruby标签定义 ruby 注释（中文注音或字符）。
6、JPG和PNG格式的图片有什么区别？
jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。
7、cookie，sessionStorage和localStorage的区别？
sessionStorage和localStorage：
- 两者的存储空间一般都在5M左右，sessionStorage在会话结束时会主动清除，而localStorage不会，需要手动清除；
- 两者都有同源策略限制，无法跨域访问，sessionStorage有同标签页限制；
- 数据仅在客户端存储，不参与和服务器的通信；
- 都是key value形式存储，value的值必须是字符串，若不是则自动转换为字符串，value如果是对象，则需转换成JSON字符串；
- 操作方法一致，setItem(key, value)增/改、removeItem(key)删、getItem(key)查、xxxStorage.clear()清空
cookie：
- 存储大小为4K，一个站点最多20个cookie；
- 会通过http请求参与服务器通信；
- cookie可以设定会话时间，如不设置，则默认浏览器窗口关闭清除；
- cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的cookie的。
8、HTML文档的加载和页面的首次渲染
- 浏览器首选下载该地址所对应的html页面
- 浏览器解析html页面的DOM结构
- 开启下载线程对文档中的所有资源按优先级排序下载
- 主线程继续解析文档，到达head节点，head里的外部资源无非是外链样式表和外链js
- 解析到body
-
只有DOM元素
- DOM数构建完，页面首次渲染
-
有DOM元素、外链js
- 当解析到外链js的时候，该js尚未下载到本地，则js之前的DOM会被渲染到页面上，同时js会阻止后面的DOM的构建，即后面的DOM节点并不会添加到文档的DOM树中，所以，js执行完之前，我们在页面上看不到该js后面的DOM元素
-
有DOM元素、外链js
- 外链css不会影响css后面的DOM构建，但是会阻碍渲染，简单点说，外链css加载完之前，页面还是白屏
-
有DOM元素、外链js、外链css
- 外链js和外链css的顺序会影响页面渲染，当body中js之前的外链css未加载完之前，页面是不会被渲染
- 当body中js之前的外链css加载完之后，js之前的DOM树和css合并渲染树，页面渲染出该js之前的DOM结构
- 文档解析完毕，页面渲染，但是页面引用的所有js同步代码执行完毕，厨房DOMContentLoaded事件
- html文档中的图片资源、js代码中有的异步加载的css、js、图片资源都加载完毕之后，load事件触发
9、src和href的区别
src是指向外部资源的位置，指向的内容会嵌入到文档当前标签所在的位置，如css，js脚本、img等；
href是指向网络资源所在的位置（超链接），如<a href="xxx"></a>
10、defer和async的区别
作用：
传统方式下，在文档中遇到script标签，会先加载js脚本，后面的文档加载会先停止，如果在script脚本中插入defer和async，可以使得js脚本与文档加载异步进行。
区别：
- defer 是在浏览器渲染完成之后执行js代码；并且按照加载的顺序执行代码
- async 是在加载完成后立即执行；特点是乱序执行，因为每个js代码的加载时间不同
11、data-属性
HTML的数据属性，用于将数据存储在标准的HTML元素中作为额外信息，可以通过js访问，xxx.getAttribute("data-xxxx")
