1、DTD的作用是什么？什么是怪异模式？什么是标准模式？二者有什么差别（举例）？产生的历史原因是什么？使用时需要注意什么？
- DTD(Document Type Definition)文档类型定义。 DTD的作用：文档规范与呈现模式。
- DTD规定XML和HTML中的标签和语法。 HTML4.01和XHTML1.0规定了三种文档类型：Strict（严格类型）、Transitional（过度类型）、Frameset（框架类型） HTML5只规定了一种类型：
- 标准模式：浏览器按W3C标准解析执行代码。
- 怪异模式：浏览器使用自己的方式解析执行代码，因为浏览器解析执行方式不一样，所以我们称为怪异模式。
- 浏览器解析时到底使用标准模式还是怪异模式，与你网页中DTD的声明直接相关，DTD定义了标准解析模式浏览器会使用相应的方式加载网页并显示。忽略声明DTD，网页则进入怪异模式。
- (1) 盒模型：在怪异模式下，盒模型为IE盒模型；W3C标准的盒模型中为标准盒模型。
- (2) 图片垂直对齐的方式：对于inline元素和table-cell元素。在怪异模式下，vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间；标准模式下vertical-align属性默认取值为baseline。
- (3) <table>元素中的字体：CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
- (4) 元素的百分比高度：当一个元素使用百分比高度时，怪异模式下，百分比高度被正确应用。标准模式下，高度取决于内容变化。
2、HTML5是什么？有哪些新特性？新增了哪些语义化标签？新增了哪些表单元素？和H5有啥关系？
- HTML5是超文本标记语言，是最新的html标准。由W3C于2014年10月完成标准制定。目标是取代1999年制定的HTML4.01和2000年XHTML 1.0标准。
- HTML5新特性： 1、语义化标签（header、nav、footer）； 2、绘画canvas； 3、SVG绘图； 4、视频和音频，用于媒介的video和audio元素； 5、input增强型表单控件：date、time、email、url、search； 6、本地离线存储LocalStorage长期储存数据，浏览器关闭后数据不丢失；sessionStorage的数据浏览器关闭自动删除； 7、新技术webworker、websocktGeolocation。
- HTML5新增语义化标签： 1、header头部标签； 2、nav导航标签； 3、content内容标签； 4、section定义文档某个区域； 5、aside侧边栏标签； 6、footer尾部标签。
- HTML5新增的表单元素： 1、dataList元素；规定输入域的选项列表。 2、keygen元素；验证用户，是密钥对生成器，表单提交时生成两个键（私钥和公钥）。私钥存在客户端，公钥发送到服务器，公钥可用以之后验证用户的客户端证书。 3、output元素；用于不同类型的输出，比如计算和脚本输出。
3、你是如何理解 HTML 语义化的？
- 用正确的标签做正确的事情。
- 优点： 1、增强可读性；对开发者更友好，在没有css的情况下也能更好的呈现内容和代码的结构。便于开发和维护。 2、有利于SEO；可以让搜索引擎爬虫更好的获取更多有效的信息，有效提高网页的搜索量。 3、支持读屏软件，方便其他设备解析。有利于无障碍阅读，提高可访问性。
4、meta viewport是做什么用的？怎么写？
- meta viewport是专门为移动设备下的显示所设计的。为了在移动设备下，网页不需要缩放和滚动条就能查看网页中的内容、文字、图片大小合适等。
只有检测都在移动设备上使用包含了meta的文档时，这个标签才会起作用；一般会设置如下5个属性：
-
name：为viewport，表示供移动设备使用。
content：内容定义了viewport属性。
width：表示移动设备下显示的宽度为设备宽度（device-width）。
user-scalable：表示用户缩放能力，no表示不允许用户缩放网页。
initial-scale：表示设备与视口的缩放比率。
maximum和minimum：分别表示缩放的最大最小值, 要注意的是, maximum必须大于或等于minimum。 -
<meta name="viewport" content="width=device-width,initial-scale=1.0">
5、HTML和XHTML有什么区别？
-
HTML和XHTML的区别体现在 `功能上和书写习惯` 两大方面。
语法、大小写、发布时间。 - HTML语法要求比较松散。XHTML语法要求比较严格。
- HTML大小写不敏感，XHTML敏感要是用小写。
- HTML 4.01是1999年W3C推荐标准。XHTML是2000年W3C公布发行的。
6、使用 data-* 属性有什么用？
- 用于存储页面或应用程序的私有自定义数据。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。
- data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 ；
7、script、script async 和 script defer 的区别
- script：引入的js脚本在加载过程中会阻塞后续的dom渲染。
-
script async和script defer不会阻塞后续的dom渲染。
async：只适用于完全没有依赖的文件；异步下载js脚本；下载之后会立即执行。
defer：浏览器会在dom渲染完毕，异步下载该文件；延迟执行。
8、白屏和FOUC是什么？为什么通常推荐将 CSS link 放置在 head /head 之间，而将 JS script 放置在 /body 之前？有没有例外的情况？
-
白屏和FOUC是不同浏览器的渲染机制，并不是BUG。
浏览器在渲染的时候没有请求到或请求时间过长，浏览器会采取两种方法针对这种情况。白屏 | FOUC(Flash Of Unstyled Content)无样式内容闪烁 - 白屏：如果css没有全部载入解析完后渲染展示页面，就会出现白屏。
- FOUC(Flash Of Unstyled Content)无样式内容闪烁：css没有全部载入前，先渲染显示已解析的HTML内容，等css完全加载完成后，再次渲染。
（逐步载入无样式的内容,等CSS载入后页面才突然展现出样式） -
css link样式表放在顶部，防止白屏问题以外出现。
js放在底部，防止脚本阻塞后面内容的呈现和其后组件的下载。
一般希望DOM还没加载必须需要先加载的js会放置在 head 中,有些加了defer、async的 script 也会放在 head中。
9、浏览器渲染机制？什么是回流(reflow)、重绘(repaint)？
-
1、解析HTML标签，构建DOM树。
2、解析CSS标签，构建CSSOM树。
3、把DOM和CSSOM组合成渲染树（render tree）。
4、在渲染树的基础上进行布局（layout），计算每个节点的几何结构。
5、把每个节点绘制到屏幕上。（painting）
- 回流（reflow）：当render tree部分或全部因为元素的尺寸、布局、隐藏等的改变需要重新构建。这就称为回流，每个页面只要需要一次回流，就是第一次加载的时候。
- 重绘（repaint）：当render tree中的一些元素改变了外观、风格不影响布局，比如background-color。就称为重绘。
10、什么属性能让浏览器直接使用ES6 Module
- script type="module"