DOCTYPE 探索

jopen 10年前

介绍

最近在我学习HTML5的时候，心里想到的第一个问题就是浏览器怎么会知道，我们编写的HTML是否兼容HTML v4.1或者HTML v5呢.

为了找到对相同查询的回复，我开始了我的探索，这里我想分享对此的一些了解. 研究这个东西的时候，我了解到所有这些都是由一个叫做 <!DOCTYPE> 的标签来控制的，它是大多数网页的最开头的一个标签，真正令我感觉惊奇的事情，则是因为我看到每一个web页面不管何时被某个IDE添加，都会自动添加上这个标签，而我也从未关心过这个标签，也从未想过要去研究研究它，但这一次出于对这个标签的好奇，我对此稍微更深入了一点.

本文中我将描述有关<!DOCTYPE>标签的东西，并将给出下面一些问题的答案.

浏览器时如何知道，我们编写的页面是HTML4.1 还是 HTML5的呢?

什么是 <!DOCTYPE> 标签，它是干什么的?

HTML4.1 & HTML5 有多少种类型的DOCTYPE?

在不同的浏览器上面，<!DOCTYPE> 是如何影响到HTML元素的渲染的?

错误的“<!DOCTYPE>”会怎样使得一个HTML页面不可用?

如何验证一个页面是是否是验证通过的呢?

我们如何决定<!DOCTYPE>类型的定义呢?

<!DOCTYPE> 如何同文档模式关联起来的(标准, 怪异和大体标准模式) ，还有浏览器是如何决定是在标准模式，还是怪异模式下渲染一个网页的呢?

让我们开始研究

那么让我们一个一个的来解答.

浏览器是如何知道我们写的页面是HTML4.1 还是 HTML5 的?

如我前面所说，使用某种IDE添加一个页面的时候，一个叫做<!DOCTYPE>的标签会自动被添加到web页面的顶部，标签里面会定义好一些属性. 这个 <!DOCTYPE> 标签呈述和通知浏览器页面使用的HTML版本. 浏览器遇到一个包含此标签的web页面时，都会使用此文档类型的值来决定用于此页面的文档模式. 由于HTML 5只有一个我们将会在后面讨论的<!DOCTYPE>, 因此该 <!DOCTYPE> 就被定义成像这样<!DOCTYPE html>. 该标签自身显示了web页面是兼容HTML 5的. 因此<!DOCTYPE> 被定义成<!DOCTYPE html>时,就意味着我们使用了HTML5.

什么是“DOCTYPE” 标签，它能干什么?

“文档类型声明” 或者说 <!DOCTYPE> 标签向浏览器指出了我们编写的HTML，web页面所使用的笨笨，还有其他标签将会在浏览器上被如何渲染.

<!DOCTYPE> 告诉浏览器, “我使用的是 HTML 4.01.” 当浏览器看到这个的时候，就知道你讲的是什么，以及你确实是在编写 HTML 4.01. 那样浏览器就会使用面向 HTML 4.01的布局和显示规则. 该标签告知浏览器，所写的是一个标准的为所有浏览器所接受的HTML。这一标准可以这3种之一例如我们将在下面进一步讨论的严格、过度和框架集标准.

当“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 ”这个词. 这个过渡是用来干嘛的呢? 如果我们写的是 “标准 standard” HTML 4.01, 那为什么它要是过渡的呢? 让我们来理解这样作的意义.

实际上，存在两个DOCTYPE, 一个是面向使用 HTML 4.01 编写的HTML页面的过渡的, 还有一个面向那些已经存在的更严格的 DOCTYPE.

设想你已经有一个拥有数以百计的web页面的web站点. 你也许会想升级网站使全部的HTML升级到 4.01标准, 但是你的页面中使用了许多HTML 2.0和3.2那个时代的旧东西. 你该怎么办? 那就得使用 HTML 4.01 过渡的 DOCTYPE了, 它允许你验证你的页面，但是仍然允许一些传统的HTML存在 . 那样，你就能确保你的标记里面不会有明显的错误(比如错别字，标签不配对等等)，而你就不用将整个HTML推导重来，以通过验证. 然后，在你移除了全部的传统HTML之后，你就已经对严格文档类型有了完全的准备，就能确保你能有一个完全兼容的标准的Web站点.

DOCTYPE HTML4.1, XHTML & HTML5 有多少种类型?

HTML 4.01 & XHTML 有三类不同的 <!DOCTYPE> 声明，而HTML5则仅仅只有一种 <!DOCTYPE> 声明.

HTML 4.01 Strict

在这个DTD中, 除了展示性的以及过时的HTML 元素和属性（比如font）之外，其它都允许. Frameset 也不被允许.

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

HTML 4.01 Transitional

在这个DTD中, 所有的HTML元素和属性，包括展示性的和过时的元素（比如font）都允许. 但是Frameset仍然不被允许.

<!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元素和属性都允许使用。Frameset不被允许.

此 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元素和属性都允许使用。Frameset不被允许.

此 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" 才能让web页面在正确的浏览器模式下打开.

错误的“<!DOCTYPE>”怎样使HTML无效的？

定义一个错误的DOCTYPE会使Web页面无效。例如，当我们开发一个页面，如果某人将DOCTYPE定义为Strict，并且还是用了废弃的元素像是“font"，那么这个元素会使得页面无效，或者我们使用了<img>标签，而且没有为这个标签定义"Alt"属性，这同样会使页面无效，因为根据Strict DTD，"Alt"属性是<img>标签的必选属性。

如何验证页面是否有效?

W3C 拥有一个让你可以根据定义的“<!DOCTYPE>”验证页面是否有效的站点.

http://validator.w3.org

此站点可以使用三种方式验证一个页面.

URL验证可以验证一个在线的页面。如果你的站点时公开可用的，那么直接提供站点里面的url就可以是页面得到验证.
文件上传验证可以验证上传的页面文件.

直接输入验证可以验证在站点提供的指定区域输入的一个页面的标记拷贝.

我们应该怎样决定定义<!DOCTYPE>的类型？

当定义“<!DOCTYPE>”时, 我们脑海中出现一个大问题关于我们应该怎样决定我们应该定义什么类型的DOCTYPE (DTD). 好吧，这很简单。

过渡期的DTD给了我们一个介于老样式HTML和标准4.01HTML之间的过渡点，因此无论什么时候我们有一个想要兼容最新浏览器的老的页面时，我们可以使用“Transitional”，然而如果我们在开发新的web页面，那么必须使用Strict。

<!DOCTYPE> 如何同文档模式关联起来的(标准, 怪异和大体标准模式) ，还有浏览器是如何决定是在标准模式，还是怪异模式下渲染一个网页的呢?

浏览器会计算出你不是真的使用了HTML 4.01，并回到怪异模式. 而后你回到让不同浏览器以不同方式处理页面的问题上来. 你可以预先估计结果的唯一方式就是告诉浏览器你使用的是 “HTML 4.01”并且实际上也遵循了标准. 由于web日益标准，再加上所有的浏览器都情愿只支持同一套标准，因此我们应该使用标准模式，它可以使用 <!DOCTYPE html> 来加以强制。

研究 DOCTYPE 时, 我恰巧朋友一个 OReilly’s Head First的书，里面有一段浏览器和Head First的有趣访谈. 我在这里想在下面和大家分享这段相当有趣的访谈.

在本文中，我们了解了 <!DOCTYPE> 和文档的模式，它们在让所有的浏览器对页面有一个一致的渲染方面非常重要. 建议我们总是指示页面使用标准文档模式并总是在页面中定义一个 <!DOCTYPE> 来避免任何兼容性问题.

如果你能让我了解你对有关文章内容，展现和报道的意见和建议的，以帮助我提升我将来文章品质的话，我将不胜感谢.

祝学习愉快 …