深入理解DOCTYPE之 DOCTYPE的标准模式、近似标准模式及怪异模式

ゝ一世哀愁。 2021-12-16 12:15 501阅读 0赞

**一、什么是DOCTYPE？**

DOCTYPE是Docment Type的缩写，即文档模式。它用来指明文档（通常是指网页）所遵循的规范(如xhtml或html)及规范的版本（xhtml1.0或html4.0等）。

html文件中<DOCTYPE>标签位于文档最顶部，在<html>标签之前。在<DOCTYPE>之前放任何内容（这个任何有待验证。。）例如一段注释或一句xml声明都会触发浏览器的怪异模式。

虽然DOCTYPE的本意是使浏览器按照指定的规范来验证和解析页面，但现代浏览器只是拿它作为在不同的模式间切换的触发器——仅此而已。因此HTML5规范中将DOCTYPE的定义精简为:

<!DOCTYPE html>

只需要写到这里就可以了，所有浏览器包括IE6都会以标准模式去解析。但如果你一定要画蛇添足地加上public xhtml uri这种老式DOCTYPE定义中的东西的话，你一定要确保你所写的是对的可以触发标准模式的格式，否则，将可能触发浏览器的 怪异模式 或 近似标准模式。

**二、浏览器的标准模式、近似标准模式 及 怪异模式**

现代浏览器普遍有三种模式: 标准模式(standard mode)、近似标准模式(almost standard mode) 及 怪异模式(quirks mode).

区别：

**怪异模式是为了兼容老页面而设计的：**早在浏览器大战时期，IE和Netscape各自遵循自己的一套规范，互不兼容，而后随着互联网的迅速发展，W3C制定了html和css规范，之后的浏览器的实现都遵循这套规范，但因为此时互联网上已经存在很多针对旧版IE和Netscape设计的网页，如果依照W3C标准来解析，将会使这些页面错乱，因此浏览器开发商推出了两种模式：quirks mode 和 stardard mode. 其中quirks mode按照Netspace4和IE5的实现解析页面，stardard mode按照W3C标准解析页面。

**近似标准模式是为了解决table中内联图片而设计的：**早期的网页多是以table布局，单元格的高度会根据内容自动伸缩，所以当一个单元格中只有图片时，即使这个图片的高度是1px，浏览器都可以很好地呈现。但遵循了w3c标准的现代浏览器并不会这么去解析，w3c标准将img定义为内联元素，而内联元素在盒模型中是以基线对齐的，如下图;

![Images-tables-gaps-figure4.gif][]

所以当单元格中只有一个图片时，就会展现成下面的样式：

**![Images-tables-gaps-figure5.gif][]**

当这个图片的高度是1px时，问题就更加严重: 由于块级元素的最小高度是行高，而行高又受font-size的影响。所以1px的图片在单元格的呈现如下（红线为图片）:

**![Images-tables-gaps-figure7.gif][]**

当然有很多hack可以帮我们解决这个问题，但这些hack在某种情况下总是不那么尽如人意，具体可以参照：Images, Tables, and Mysterious Gaps

为了解决这个问题，浏览器开发商提供了 **“近似标准模式”，**这种模式与标准模式一致，除了在处理下面这种情况时：

*如果一个块级元素除了空白文本（空格，tab等字符）外再无其它内容，则它的高度按0处理；如果有子元素，则它的高度不能比子元素大，无论它的font-size多大。* *具体可参照：* [*Gecko's "Almost Standards" Mode*][Gecko_s _Almost Standards_ Mode]

**标准模式：**这个不用多说，为了遵循标准喽。

**三、如何触发各种模式**

### 3.1 Triggering "Almost Standards" ###

*  The public identifier "`-//W3C//DTD XHTML 1.0 Transitional//EN`"
 *  The public identifier "`-//W3C//DTD XHTML 1.0 Frameset//EN`"
 *  The public identifier "`-//W3C//DTD HTML 4.01 Transitional//EN`", with a system identifier
 *  The public identifier "`-//W3C//DTD HTML 4.01 Frameset//EN`", with a system identifier
 *  The IBM system DOCTYPE "`http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd`"

一个完整的DTD声明是由Public Identifier和System Identifier两部分组成的，其中system identifier就是指URI，如下，、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

*  Public Identifier: " `-//W3C//DTD HTML 4.01 Transitional//EN`"
 *  system identifier: "`http://www.w3.org/TR/html4/loose.dtd`"

总结来说就是 HTML 4.01 Transitional or Frameset DOCTYPE with a URI 或 XHTML 1.0 Transitional or Frameset DOCTYPE,**with or without **the URI 都会触发近似标准模式。

**3.2 **

### Triggering "Standards" ###

### `<!DOCTYPE html>`  只写到这就够了，包括IE6在内的所有浏览器都会以标准模式去呈现。这也是mozilla推荐的做法，另外我推测，完整的HTML4.01 Strict 和 XHTML1.0 Strict(带或不带URI) 也会触发标准模式。但既然有简单而兼容的写法，又何必要画蛇添足呢？  ###

题外补充：

如果你的XHTML文档以`application/xhtml+xml` 作为MIME类型，则你无需再声明DOCTYPE，浏览器始终会以标准模式去解析这类文档。不过一个例外就是IE8及以下版本的IE会将此类文档当成一个下载链接，并弹出文件下载弹窗。IE9开始支持这种类型的文档。

但如果你的XHTML文档以`text/html` 作为MIME类型，则你需要声明DOCTYPE以触发标准模式.

参照: [ Quirks Mode and Standards Mode][Quirks Mode and Standards Mode]

**3.3 Triggering "Quirks"**

### 将触发标准模式和近似标准模式的条件取反就是了： ###

*  不写Doctype或错误的Doctype;
 *  Doctype之前有注释或xml声明（在IE9-会触发）;
 *  HTML 4.01 Transitional or Frameset DOCTYPE **without** a URI;

### **四、怎么知道浏览器用的是哪种模式** ###

*  ### 在FF,右键-->查看页面信息--->呈现模式（Render Mode） ###
 *  ### 在IE，F12--->文档模式 ###

###    ![mozilla-standard-mode.png][] ###

[Images-tables-gaps-figure4.gif]: https://developer.mozilla.org/@api/deki/files/723/=Images-tables-gaps-figure4.gif
[Images-tables-gaps-figure5.gif]: https://developer.mozilla.org/@api/deki/files/724/=Images-tables-gaps-figure5.gif
[Images-tables-gaps-figure7.gif]: https://developer.mozilla.org/@api/deki/files/726/=Images-tables-gaps-figure7.gif
[Gecko_s _Almost Standards_ Mode]: https://developer.mozilla.org/en-US/docs/Gecko'%20rel=
[Quirks Mode and Standards Mode]: https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode?redirectlocale=en-US&redirectslug=Mozilla%27s_Quirks_Mode
[mozilla-standard-mode.png]: http://jiguang.github.com/content/uploads/2012/10/mozilla-standard-mode.png