1. DOCTYPE 的作用是什么？
<!DOCTYPE> 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来 进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏 览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。
2. 标准模式与兼容模式各有什么区别？
- 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
- 兼容模式中，页面以宽松的向后兼容的方式显示 ，模拟老式浏览器的行为以防止站点无法工作。
3. HTML5 为什么只需要写 <!DOCTYPE HTML> ，而不需要引入 DTD？
- HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运 行）。
- 而 HTML4.01 基于 SGML ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。
4. SGML 、 HTML 、XML 和 XHTML 的区别？
- SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
- HTML 是超文本标记语言，主要是用于规定怎么显示网页。
- XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。
- XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
5. DTD 介绍
- DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
- DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。
7. 空元素定义
- 标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
- 常见的空元素有：br hr img input link meta
8. 你是如何理解语义化的？
- 语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
- 语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
9. meta viewport 是做什么的？怎么写?
- 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
- meta viewport 的6个属性：
width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device” initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置layout viewport 的高度，这个属性并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
10. 你用过哪些 HTML 5 标签？
<article> 定义独立的内容 <aside> 定义页面内容之外的内容 <audio> 定义声音内容 <bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置 <canvas> 定义图形 <command> 定义命令按钮 <datalist> 定义下拉列表 <details> 定义元素的细节 <embed> 定义外部交互内容或插件 <figcaption> 定义figure元素的标题 <figure> 定义媒介内容的分组，以及他们的标题 <footer> 定义section或page的页脚 <header> 定义section或page的页眉 <hgroup> 定义有关文档中的section信息 <keygen> 定义生成密钥 <mark> 定义有记号的文本 <meter> 定义预定义范围内的度量 <nav> 定义导航链接 <output> 定义输出的一些类型 <progress> 定义任何类型的任务的进度 <rp> 定义若浏览器不支持ruby元素显示的内容 <rt> 定义ruby注释的解释 <ruby> 定义ruby注释 <section> 定义section <source> 定义媒介源 <summary> 定义details元素的标题 <time> 定义日期/时间 <track> 定义用在媒体播放器中的文本轨道 <video> 定义视频
11. H5 是什么？
H5是HTML5的简称，就是“HTML”的第5个版本，也就是第5个版本的超文本标记语言。
12. 页面导入样式时，使用 link 和 @import 有什么区别？
- 从属关系区别。@import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性、引入网站图标等。
- 加载顺序区别。加载页面时，link标签引入的CSS文件被同时加载；而@import引入的CSS文件将在页面加载完毕后被加载。
- 兼容性区别。@import时CSS 2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML标签，不存在兼容性问题。
- DOM可控性区别。可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方法插入样式。
13. Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label> <input type=“text“ name="Name" id="Name"/>