介绍
最近在我学习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页面在正确的浏览器模式下打开.