「重学」从零开始：你知道的、不知道的DOCTYPE
内容摘要：
- 什么是混杂模式、近标准模式和标准模式
- 如何查看页面的渲染模式
- 文档类型的种类
- 标准类型下的怪异行为（很有意思哟）
在开始学习前端之前，你总会需要创建一个 HTML。在 HTML 标签之前，还有一个你可能不会注意到的<!DOCTYPE>标记。虽然它不显眼，但我们需要知道它为什么存在。
HTML 文件中，<!DOCTYPE>是必须的，需要放到整个文档的顶部，格式为<!DOCTYPE html>。它存在的意义在于阻止浏览器在渲染文档时进入混杂模式(Quirks Mode)。也就是说<!DOCTYPE html>这一文档类型可以确保浏览器尽可能地使用遵循规范的模式来渲染，而不是使用某些不符合规范的渲染模式。
一、混杂模式和标准模式
很久很久以前，web 页面主要运行在两类浏览器：网景的 Navigator 和微软的 IE。后来 W3C 制定了 web 规范之后，为了保证现有页面可用，各大浏览器不能立马使用新规范。
于是，浏览器厂商们引入了两种模式来区别对待符合新标准的站点和旧的遗留站点：混杂模式（Quirks Mode）和标准模式（Standards Mode）。在过渡阶段还存在一种接近标准模式（Almost Standards Mode）。
- 混杂模式，也成为怪异模式，会兼容 Navigator 4 和 IE 5 的非标准行为。
- 近标准模式会兼容少数的混杂行为，可以理解为过渡模式。
- 标准模式只兼容符合标准描述的行为。
请确保把 DOCTYPE 放在 HTML 文件的顶部。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发混杂模式。
如果你想知道有哪些混杂行为，可以参考混杂列表[1]。近标准模式与混杂模式的区别参考这个链接[2]。
二、如何查看页面的渲染模式
- 在 Firefox 中，请从右键菜单选择查看页面信息，然后查看渲染模式。
- 在 Internet Explorer 中，请按下
F12，然后查看文档模式。 document.doctype可以返回声明的文档类型。
举个 Firefox 的例子：
三、有哪些文档类型
文档类型有很多，多到歪马不想一一列举，具体参见下图：
来源：https://hsivonen.fi/doctype/
图中列举了不同浏览器对于不同类型的文档类型选择什么模式来渲染。其中包含了 HTML 发展过程中不同版本所使用的文档类型。文档类型很多，好在我们不需要记住。HTML5 之后，我们只需要指定<!DOCTYPE html>即可让浏览器尽可能地按照标准来渲染。
此外，如果你的网页使用 XHTML[3] 并在
Content-TypeHTTP 标头使用application/xhtml+xmlMIME 类型，你不需要使用 DOCTYPE 启动标准模式，因为这种文件会永远使用标准模式。不过由于 IE9 才支持 XHTML，所以 IE9 之前的浏览器会因为不识别的格式，出现下载对话框。
四、? 标准模式下的“怪异”行为
我们应该都遇到过这个问题，div 里面如果装着一个 img，会被无故撑高几个像素。效果如下图所示（示例链接[4]）：
这个很奇怪。如果我说这个奇怪的现象只有标准模式才会有，近标准模式和怪异模式下是没问题的，你应该会觉得更奇怪。
近标准模式效果可以参考该示例[5]。
怪异模式效果可以参考该示例[6]。
具体的缘由是这样的：
近标准模式和标准模式之间的唯一区别在于是否对<img>元素给定行高(line-height)和基线(baseline)。
近标准模式中，如果<img>标签所在行没有其他的行内元素，将不指定基线对齐(baseline)，<img>标签因此会紧贴着父元素底部。
在标准模式中，<img>标签会指定基线对齐baseline。即使行框内并没有任何内容，行框总是会包含类似字母"g"，"f"尾巴下伸出来的那一部分空间(针对下行字母)。因此这种情况下你看到的<img>跟父元素的底部存在几个像素的间隙，这实际上是为”字母尾巴“预留的。
这一现象虽然怪异，但也是标准对于文本对齐的一种规范处理。
由于标准模式指定了默认的baseline对齐方式导致了这一问题，所以想要解决也很简单，给<img>标签指定vertical-align: middle;即可。
参考链接
- MDN | DOCTYPE[7]
- HTML SPEC[8]
- 关于 DOCTYPE 的一个小发现[9]
参考资料
[1]
混杂列表: https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior
[2]
这个链接: https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior
[3]
XHTML: https://developer.mozilla.org/en-US/docs/XHTML
[4]
示例链接: //code.h5jun.com/polos/1
[5]
该示例: //code.h5jun.com/lamo
[6]
该示例: //code.h5jun.com/mazoq
[7]
MDN | DOCTYPE: https://developer.mozilla.org/en-US/docs/Glossary/Doctype
[8]
HTML SPEC: https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
[9]
关于 DOCTYPE 的一个小发现: https://zhuanlan.zhihu.com/p/26725189