详解DOCTYPE
注：文章基本转发了“歪马”的文章，原文链接在此
我们在写HTML时，常常会用到一键初始化HTML标签功能，达到默认填充好
等标签。比如VScode中在html文件中输入英文感叹号『!』时，会自动提示是否创建模板，确认后可自动创建如下模板：
上图中的文档整体我们都非常熟悉了解了，但再深入点询问可能就露馅了：第一行的DOCTYPE到底是什么？为什么一定要在这里写这么一行定义？他的具体作用是？
DOCTYPE很多人都容易忽视，虽然它不显眼，但我们需要知道为什么有它的存在，他的作用是什么。
HTML 文件中，<!DOCTYPE>是必须的，需要放到整个文档的顶部，格式为<!DOCTYPE html>。它存在的意义在于阻止浏览器在渲染文档时进入混杂模式(Quirks Mode)。也就是说<!DOCTYPE html>这一文档类型可以确保浏览器尽可能地使用遵循规范的模式来渲染，而不是使用某些不符合规范的渲染模式。
一、混杂模式和标准模式
web初期，web 页面主要运行在两类浏览器：网景的 Navigator 和微软的 IE。后来 W3C 制定了 web 规范之后，为了保证现有页面可用，各大浏览器不能立马使用新规范。
于是，浏览器厂商们引入了两种模式来区别对待符合新标准的站点和旧的遗留站点：混杂模式（Quirks Mode）和标准模式（Standards Mode）。在过渡阶段还存在一种接近标准模式（Almost Standards Mode）。
混杂模式，也成为怪异模式，会兼容 Navigator 4 和 IE 5 的非标准行为。近标准模式会兼容少数的混杂行为，可以理解为过渡模式。标准模式只兼容符合标准描述的行为。
请确保把 DOCTYPE 放在 HTML 文件的顶部。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发混杂模式。
二、如何查看页面的渲染模式
document.doctype 可以返回声明的文档类型。
三、有哪些文档类型
文档类型就太多了，这一块不用一一列举和了解。HTML5后，我们目前只需要指定<!DOCTYPE html>即可让浏览器尽可能地按照标准来渲染。而且现在记忆这些文档是没意义的。如果有兴趣，可以看这里
此外，如果你的网页使用 XHTML 并在 Content-Type HTTP 标头使用application/xhtml+xml MIME 类型，你不需要使用 DOCTYPE 启动标准模式，因为这种文件会永远使用标准模式。不过由于 IE9 才支持 XHTML，所以 IE9 之前的浏览器会因为不识别的格式，出现下载对话框。
四、需要了解的一些特殊“怪异”行为
我们应该都遇到过这个问题，div 里面如果装着一个 img，会被无故撑高几个像素。效果如下图所示：
这个很奇怪。如果我说这个奇怪的现象只有标准模式才会有，近标准模式和怪异模式下是没问题的，你应该会觉得更奇怪。
具体的缘由是这样的：
近标准模式和标准模式之间的唯一区别在于是否对<img>元素给定行高(line-height)和基线(baseline)。
近标准模式中，如果<img>标签所在行没有其他的行内元素，将不指定基线对齐(baseline)，<img>标签因此会紧贴着父元素底部。
在标准模式中，<img>标签会指定基线对齐baseline。即使行框内并没有任何内容，行框总是会包含类似字母"g"，"f"尾巴下伸出来的那一部分空间(针对下行字母)。因此这种情况下你看到的<img>跟父元素的底部存在几个像素的间隙，这实际上是为”字母尾巴“预留的。
这一现象虽然怪异，但也是标准对于文本对齐的一种规范处理。
由于标准模式指定了默认的baseline对齐方式导致了这一问题，所以想要解决也很简单，给<img>标签指定vertical-align: middle;即可。