从零开始：你知道的、不知道的DOCTYPE

时间 2020-04-15

标签开始知道不知道 doctype 繁體版

原文原文链接

内容摘要：html

什么是混杂模式、近标准模式和标准模式
如何查看页面的渲染模式
文档类型的种类
标准类型下的怪异行为（颇有意思哟）

在开始学习前端以前，你总会须要建立一个 HTML。在 HTML 标签以前，还有一个你可能不会注意到的<!DOCTYPE>标记。虽然它不显眼，但咱们须要知道它为何存在。前端

HTML 文件中，<!DOCTYPE>是必须的，须要放到整个文档的顶部，格式为<!DOCTYPE html>。它存在的意义在于阻止浏览器在渲染文档时进入混杂模式(Quirks Mode)。也就是说<!DOCTYPE html>这一文档类型能够确保浏览器尽量地使用遵循规范的模式来渲染，而不是使用某些不符合规范的渲染模式。web

1、混杂模式和标准模式

好久好久之前，web 页面主要运行在两类浏览器：网景的 Navigator 和微软的 IE。后来 W3C 制定了 web 规范以后，为了保证现有页面可用，各大浏览器不能立马使用新规范。浏览器

因而，浏览器厂商们引入了两种模式来区别对待符合新标准的站点和旧的遗留站点：混杂模式（Quirks Mode）和标准模式（Standards Mode）。在过渡阶段还存在一种接近标准模式（Almost Standards Mode）。app

混杂模式，也成为 怪异模式，会兼容 Navigator 4 和 IE 5 的非标准行为。
近标准模式会兼容少数的混杂行为，能够理解为过渡模式。
标准模式只兼容符合标准描述的行为。

请确保把 DOCTYPE 放在 HTML 文件的顶部。若是有任何其余字符位于 DOCTYPE 以前，好比注释或 XML 声明，会致使 Internet Explorer 9 或更早期的浏览器触发混杂模式。编辑器

若是你想知道有哪些混杂行为，能够参考混杂列表。近标准模式与混杂模式的区别参考这个连接。学习

2、如何查看页面的渲染模式

在 Firefox 中，请从右键菜单选择 查看页面信息，而后查看 渲染模式。
在 Internet Explorer 中，请按下 F12，而后查看 文档模式。
document.doctype能够返回声明的文档类型。

举个 Firefox 的例子：ui

3、有哪些文档类型

文档类型有不少，多到歪马不想一一列举，具体参见下图：spa

图中列举了不一样浏览器对于不一样类型的文档类型选择什么模式来渲染。其中包含了 HTML 发展过程当中不一样版本所使用的文档类型。文档类型不少，好在咱们不须要记住。HTML5 以后，咱们只须要指定<!DOCTYPE html>便可让浏览器尽量地按照标准来渲染。3d

此外，若是你的网页使用 XHTML^[1] 并在 Content-Type HTTP 标头使用application/xhtml+xml MIME 类型，你不须要使用 DOCTYPE 启动标准模式，由于这种文件会永远使用标准模式。不过因为 IE9 才支持 XHTML，因此 IE9 以前的浏览器会由于不识别的格式，出现下载对话框。

4、🌟 标准类型下的“怪异”行为

咱们应该都遇到过这个问题，div 里面若是装着一个 img，会被无端撑高几个像素。效果以下图所示（示例连接）：

这个很奇怪。若是我说这个奇怪的现象只有标准模式才会有，近标准模式和怪异模式下是没问题的，你应该会以为更奇怪。

近标准模式效果能够参考该示例。

怪异模式效果能够参考该示例。

具体的原因是这样的：

近标准模式和标准模式之间的惟一区别在因而否对<img>元素给定行高(line-height)和基线(baseline)。

近标准模式中，若是<img>标签所在行没有其余的行内元素，将不指定基线对齐(baseline)，<img>标签所以会紧贴着父元素底部。

在标准模式中，<img>标签会指定基线对齐baseline。即便行框内并无任何内容，行框老是会包含相似字母"g"，"f"尾巴下伸出来的那一部分空间(针对下行字母)。所以这种状况下你看到的<img>跟父元素的底部存在几个像素的间隙，这其实是为”字母尾巴“预留的。

这一现象虽然怪异，但也是标准对于文本对齐的一种规范处理。

因为标准模式指定了默认的baseline对齐方式致使了这一问题，因此想要解决也很简单，给<img>标签指定vertical-align: middle;便可。

从零开始：你知道的、不知道的DOCTYPE

1、混杂模式和标准模式

2、如何查看页面的渲染模式

3、有哪些文档类型

4、🌟 标准类型下的“怪异”行为

参考连接