DOCTYPE 探索
在本文中，我们将更深入地探讨 DocType，并理解它如何影响页面渲染。
引言
最近我开始学习 HTML5 时，我脑海中第一个问题是，浏览器如何知道我写的 HTML 与 HTML v4.1 还是 HTML v5 兼容？
为了找到这个问题的答案，我开始探索，并在这里分享我的知识。在探索的过程中，我了解到这一切都由一个名为 <!DOCTYPE> 的标签控制，这是大多数网页的第一个标签，这让我非常惊讶，因为每当使用某个 IDE 添加页面时，这个标签都会自动添加，但我从来没有在意过它，也没有尝试去探索。但这次，出于了解这个标签的好奇心，我深入研究了一下。
在本文中，我将解释 <!DOCTYPE>标签，并回答以下问题。
浏览器如何知道页面是用 HTML4.1 还是 HTML5 编写的？
<!DOCTYPE> 标签是什么？它有什么作用？
HTML4.1 和 HTML5 有多少种 DOCTYPE 类型？
<!DOCTYPE> 如何影响 HTML 元素在不同浏览器中的渲染？
错误的“<!DOCTYPE>”如何导致 HTML 页面无效？
如何验证页面是否有效？
我们应该如何决定定义哪种类型的 <!DOCTYPE>？
<!DOCTYPE> 与文档模式（标准、怪异和准标准模式）有何关系？浏览器如何决定是以标准模式还是怪异模式渲染网页？
开始探索吧
那么，让我们一个一个地开始回答。
浏览器如何知道页面是用 HTML4.1 还是 HTML5 编写的？
正如我之前提到的，当使用某个 IDE 添加网页时，<!DOCTYPE> 标签会自动添加到页面顶部，其中包含一些属性。这个 <!DOCTYPE> 标签代表并指示浏览器页面所使用的 HTML 版本。每当浏览器遇到包含 <!DOCTYPE> 的网页时，它都会使用文档类型的值来确定网页的文档模式。因为 HTML 5 只有一个 <!DOCTYPE>，我们稍后会讨论，所以这个 <!DOCTYPE> 定义为 <!DOCTYPE html>。这个标签本身就表示所编写的网页与 HTML 5 兼容。因此，每当 <!DOCTYPE> 定义为 <!DOCTYPE html> 时，就意味着正在使用 HTML5。
“DOCTYPE”标签是什么？它有什么作用？
“文档类型声明”或 <!DOCTYPE> 标签会指示 Web 浏览器页面是用哪个 HTML 版本编写的，以及其他标签如何在浏览器中渲染。
<!DOCTYPE> 告诉浏览器：“我正在使用 HTML 4.01。”当浏览器看到这个时，它会假设您知道自己在做什么，并且您确实在编写 HTML 4.01。这很好，因为浏览器将使用 HTML 4.01 的布局和显示规则。此标签告知浏览器，所编写的 HTML 是一个所有浏览器都接受的标准。这个标准可以是以下三种标准之一：Strict、Transitional 和 Frameset，我们将在稍后讨论。
当页面中声明了“DOCTYPE”时，浏览器就能准确地知道如何处理您的页面，并且（至少在您关心的任何浏览器上）页面将如您所愿地显示。它告诉浏览器文档的类型。
“DOCTYPE”声明表示编写的是标准 HTML，并且编写的 HTML 页面符合 W3C（万维网联盟）定义的标准。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD（文档类型定义）。DTD 指定了标记语言的规则，以便浏览器正确渲染内容。
DTD 的目的是定义 XML 文档的合法构建块。DTD 使用合法元素和属性列表定义文档结构。DTD 可以在 XML 文档内部内联声明，也可以作为外部引用声明。
<!DOCTYPE> 标签必须是 HTML 文档的第一个标签，其格式如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>
下图剖析了 DOCTYPE 标签的每个部分。仔细阅读以充分理解。
现在您可能会想，我们还没有谈到“Transitional”这个词。这个过渡是什么意思？如果我们写的是“标准”的 HTML 4.01，为什么它是过渡性的？让我们来理解它的含义。
实际上有两种 DOCTYPE，一种适用于正在过渡到 HTML 4.01 的用户，另一种更严格的 DOCTYPE 适用于已经适应的用户。
想象一下，您有一个包含数百个网页的网站，所有这些网页都以非标准 HTML 编写。您想改进网站，并将所有 HTML 升级到 4.01 标准，但您使用了 HTML 2.0 和 3.2 时代的许多旧版内容。您该怎么办？使用 HTML 4.01 Transitional DOCTYPE，它允许您验证页面，但仍允许使用一些旧版 HTML。这样，您可以确保您的标记中没有明显的错误（如拼写错误、标签不匹配等），同时又不必重构整个 HTML 来进行验证。然后，在您删除了所有旧版 HTML 后，您就为严格文档类型做好了准备，该类型可确保您拥有一个完全符合标准、标准化的网站。
HTML4.1、XHTML 和 HTML5 有多少种 DOCTYPE 类型？
HTML 4.01 和 XHTML 有三种不同的 <!DOCTYPE> 声明，而 HTML5 只有一种 <!DOCTYPE> 声明。
HTML 4.01 Strict
在此 DTD 中，允许使用所有 HTML 元素和属性，但禁止使用表示性或已弃用的元素（如 font）。也不允许使用 Framesets。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
在此 DTD 中，允许使用所有 HTML 元素和属性，包括表示性或已弃用的元素（如 font）。但仍不允许使用 Framesets。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
在此 DTD 中，允许使用所有 HTML 元素和属性，包括表示性或已弃用的元素（如 font）以及 Frameset 内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
在此 DTD 中，标记还必须编写为格式良好的 XML。允许使用所有 HTML 元素和属性，但禁止使用表示性或已弃用的元素（如 font）。也不允许使用 Framesets。
此 DTD 等同于 HTML4.01 Strict DTD，但标记还必须编写为格式良好的 XML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
在此 DTD 中，标记还必须编写为格式良好的 XML。允许使用所有 HTML 元素和属性，包括表示性或已弃用的元素（如 font）。也不允许使用 Framesets。
此 DTD 等同于 HTML4.01 Transitional DTD，但标记还必须编写为格式良好的 XML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
此 DTD 等同于 XHTML 1.0 Transitional，但允许使用 Frameset 内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
此 DTD 等同于 XHTML 1.0 Strict，但允许您添加模块（例如为东亚语言提供 Ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 5
<!DOCTYPE html>
<!DOCTYPE> 如何影响 HTML 元素在不同浏览器中的渲染？
不同的浏览器对不同的标签渲染方式不同。每当我们定义一个 DOCTYPE 时，就意味着我们告诉浏览器使用了指定 DOCTYPE 的 HTML 标准。
回想过去，我曾多么沮丧，因为应用程序的某些网页会在“怪异”浏览器模式下打开，而另一些则会在“标准”浏览器模式下打开。在探索“DOCTYPE”时，我了解到只有正确的“DOCTYPE”才能使网页在正确的浏览器模式下打开。
错误的“<!DOCTYPE>”如何导致 HTML 页面无效？
定义错误的 DOCTYPE 会使网页无效。例如，在开发页面时，如果有人将 DOCTYPE 指定为 Strict，但仍然使用了已弃用的元素（如“font”），那么该元素会使该页面无效。或者，如果我们使用了 <img> 标签但没有为该标签定义“Alt”属性，那么该页面也会变得无效，因为根据 Strict DTD，“Alt”属性是 <img> 标签中强制定义的。
如何验证页面是否有效？
W3C 有一个网站，允许您根据定义的 “<!DOCTYPE>” 来验证您的网页。
该网站提供了三种验证网页的方式。
-
按 URI 验证：允许在线验证网页。如果您的网站是公开的，则可以通过在网站中直接提供 URL 来验证网页。
-
按文件上传验证：允许通过将页面上传到网站来验证网页。
按直接输入验证：允许通过将标记复制到网站提供的区域来验证网页。
我们应该如何决定定义哪种类型的“<!DOCTYPE>”？
在定义 “<!DOCTYPE>” 时，我们脑海中会浮现一个大问题：我们应该如何决定定义哪种类型的 DOCTYPE（DTD）。嗯，这很简单。
Transitional DTD 为我们提供了旧式 HTML 和标准 HTML 4.01 之间的过渡点。因此，当我们有旧的网页并希望它们与最新浏览器兼容而无需太多麻烦时，我们可以选择“Transitional”。而如果我们正在开发新网页，则应使用 Strict。
“<!DOCTYPE>”与文档模式（标准和怪异）有何关系？浏览器如何决定以标准模式还是怪异模式渲染网页？
浏览器会发现您并没有真正编写 HTML 4.01，然后会回到怪异模式。这样，您又回到了各种浏览器以不同方式处理您页面的问题。获得可预测结果的唯一方法是告诉浏览器您使用的是“HTML 4.01”并实际这样做。随着 Web 日益标准化，所有浏览器都只愿意支持标准，因此我们应该使用标准文档模式，可以通过使用 <!DOCTYPE html> 来强制实现。
在探索 DOCTYPE 时，我偶然看到 OReilly 的一本 Head First 书，其中有一个浏览器和 Head First 之间的有趣访谈。我想在这里分享这个访谈，因为它非常有趣，也帮助我澄清了主题。
在本文中，我们学习了 <!DOCTYPE> 和文档模式，它们对于在所有浏览器中一致地渲染页面非常重要。始终建议指示网页使用标准文档模式，并在页面中始终定义 <!DOCTYPE> 以避免任何兼容性问题。
如果您能让我知道您对文章内容、演示和覆盖范围的反馈，我将不胜感激，这将有助于我在以后的文章中改进。
学习愉快…
参考文献
http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx
http://msdn.microsoft.com/en-US/library/gg699340(v=vs.85).aspx
http://msdn.microsoft.com/en-US/library/gg699338(v=vs.85).aspx