DOCTYPE的作用，取值与区别

古城微笑少年丶 2022-05-24 12:55 290阅读 0赞

在学习html时没有特别关注写在头部的doctype,只知道那是声明文档类型用的，昨天被阿里的面试官问到doctype有几种类型，一下答不上来，之后通过查阅资料，决定整合一下自己所看到的关于doctype的理解。

**DOCTYPE是document type(文档类型的）的简写。用来说明你用的是XHTML获HTML是什么版本。**

<strong>DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。 </strong>

**要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分，除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和css都不会生效**

其中，DTD，例如xhtml-trasitional.dtd叫做文档类型定义，里面包含了文档的规则，浏览器就会根据你定义的DTD来解释你页面的标识，并展现出来**。**[HTML 4.01 和 XHTML 都基于 SMGL][HTML 4.01_ XHTML_ SMGL]，所以需要在文档开头声明引用一个 DTD。

在HTML 5 中，DOCTYPE 不区分大小写；不过对于XHTML、[Polyglot HTML][]，DOCTYPE 这几个字母需要大写。

HTML 和 XHTML 的DOCTYPE 声明都有 strict/transitional/frameset 三种模式。 strict 模式禁止所有 presetational or deprecatedelements（例如 font 标签）以及 frameset标签（）；transitional 模式只禁止了 frameset标签；frameset 模式与 transitional 模式相同，并且允许 frameset 标签。

XHTML 1.0 提供了三种DTD声明可供选择： 
    * 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    * 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    * 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
    我们选择什么样的DOCTYPE 
    理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 
    注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。 
    打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    * 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    * 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
    我们选择什么样的DOCTYPE 
    理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 
    注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。 
    打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难

[HTML 5标准放弃了与 SGML 的兼容][HTML 5_ SGML]，所以其实不需要在文档开头引用 DTD，保留 DOCTYPE 是为了保证与旧浏览器的兼容。之所以选用 <!DOCTYPE html> 是因为[这个声明格式在当前所有的浏览器（IE、FF、Opera、Safar等，即使没有实现 HTML 5）下都会以标准模式渲染][IE_FF_Opera_Safar_ HTML 5]并且长度最短。

对于 XHTML 页面，只要 Content-Type 用了 application/xhtml+xml MIME 类型，就可以不声明DOCTYPE。不过 IE 8- 不支持这个Content-Type 取值，会被当成资源文件而弹出下载框，所以目前来说其实并没有什么用……

其他情况下，不声明 DOCTYPE 的话，浏览器会以 Quicks Mode 渲染页面。IE 9- 的 Quicks Mode 是指 IE 5.5 的渲染模式，不过 IE 10+ 和其他浏览器的 Quicks Mode 则是从 Almost Standards Mode 演化而来，WHATWG 有一个[QuicksMode的标准文档][QuicksMode]。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[HTML 4.01_ XHTML_ SMGL]: http://www.w3.org/TR/REC-html40/intro/sgmltut.html
[Polyglot HTML]: http://www.w3.org/TR/html-polyglot/
[HTML 5_ SGML]: http://www.w3.org/TR/html5-diff/#doctype
[IE_FF_Opera_Safar_ HTML 5]: http://ejohn.org/blog/html5-doctype/
[QuicksMode]: https://quirks.spec.whatwg.org/
[20191229112121499.png]: /images/20220524/a38e699edbd74ff2ac0a633d41781bf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220524/8235ee9d76ed443bb18906d09e9acf4d.png