Dive Into HTML5:它的含义是什么?

在这一章节中,我们将创建一个正确无误的旧版 HTML 页面,然后尝试改进它。对于有些内容,新版的 HTML5 页面会更长,有些则会变短。但所有这一切都是为了让我们的页面更有语义。

DOCTYPE

我们从页面的最开始处开始。通常,页面第一行都是类似这样的代码:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这个叫做“doctype”。关于 doctype 有一段长长的历史——也是一段暗黑的历史。在 Internet Explorer 5 for Mac 版本上,Microsoft 的开发人员发现一个奇怪的问题。随着他们的浏览器版本的升级,就得页面渲染反而越发不正确。或者说,他们虽然能够正确渲染(按照标准行为),但人们觉得这种渲染是不正确的(也就是说,原来编写页面时是按照不正确的渲染行为编写的)。那时候的页面都是根据当时的主流浏览器的渲染方式编写的,主要是 Netscape 4 和 Internet Explorer 4。IE5/Mac 过于先进,甚至已经开始破坏整个 web(因为它不能很好的渲染旧有页面)。

Microsoft 提出了一种新颖的解决方案。在渲染页面之前,IE5/Mac 首先要检查一下 doctype。doctype 通常就是 HTML 源代码的第一行代码(甚至还在<html>标签之前)。旧的页面(也就是能够让老版本的浏览器正确渲染的页面)根本没有 doctype 这个东西。如果是旧的页面,IE5/Mac 就会按照旧版本浏览器进行渲染。为了“激活”对新标准的支持,web 页面必须在<html>元素之前添加 doctype。

这个想法像野火一样扩展开来,不多久,所有的主流浏览器都有了两种模式:“怪异模式”和“标准模式”。当然,对于 web 而言,事情马上发展到不可控制的地步。当 Mozilla 开发 1.1 版本的时候,他们发现那些在所谓“标准模式”下渲染的页面,其实是另外一种“怪异模式”。Mozilla 尝试修复他们的渲染引擎以完全避开这种怪异模式,成千上万的页面立刻崩溃了。于是,我们有了另外一种模式:“几乎标准模式”。

在 Henri Sivonen 的论文,Activating Browser Modes with Doctype 中,他总结道:

怪异模式 Quirks Mode:在怪异模式中,浏览器可以不遵守 web 格式标准,以避免“破坏”写于20世界90年代左右的页面的渲染。

标准模式 Standards Mode:在标准模式中,浏览器尝试使用符合标准的行为去渲染页面,这种尝试取决于浏览器对标准的实现程度。HTML5 把这种模式成为“非怪异模式”。

几乎标准模式 Almost Standards Mode:Firefox、Safari、Chrome、Opera(7.5以后)和 IE8 都有一种“几乎标准模式”。这种模式可以实现表格单元格的垂直尺寸,并没有严格按照传统的 CCS2 标准。HTML5 称之为“有限怪异模式”。

(强烈推荐去读一下 Henri 的文章。甚至在 IE5/Mac 中,也有一些旧的 doctype 不能按照标准去解释。随着时间的流逝,怪异模式的列表慢慢变大,怪异模式的 doctype 同样越来越多。最后计算一下,现在已经有5中 doctype 被认为是“几乎标准模式”,有73中被认为是“怪异模式”。不过,我们很可能漏掉一些,并且我们还没有谈到 IE8。神奇的 IE8 竟然有四种渲染模式!下面是一个 IE8 的渲染流程图——杀了我算了!)

IE8 渲染流程图

现在到哪啦?对了,doctype:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这段代码是现代浏览器认为是“标准模式”的15中 doctype 中的一个。它本身并没有什么错误。如果你喜欢它,那就留着它吧!或者,你可以迁移到 HTML5 的 doctype 上面去。这个新的 doctype 可以让所有现代浏览器都按照“标准模式”进行渲染:

<!DOCTYPE html>

就这15个字符。我们再也不用记那么长长的一段 doctype 了。还犹豫什么?赶快换吧!

根元素

HTML 页面有很多嵌套的元素组成。整个页面的结构类似一棵树。有一些元素是“兄弟”,就像从树干上长出的两个树枝;有一些元素是另外元素的“孩子”,就像小树枝从大树枝上长出来(这实际上暗示另外这些元素是这个元素的“父亲”,而且还有父亲的父亲,我们不妨称之为“祖先”)。没有孩子的元素就是“叶子”节点。最外面的元素,也就是所有元素的祖先,成为“根元素”。HTML 页面的根元素通常是<html>

一个通常的 HTML4 页面的根元素类似这样:

<html xmlns="http://www.w3.org/1999/xhtml"
      lang="en"
      xml:lang="en">

这个标记也没什么错。同样,如果你喜欢就留着吧!它在 HTML5 中也是合法的。但是,对于 HTML5 它显得太长了。我们可以把它缩短一些,以便省下那几十个字节。

第一个是xmlns属性。这个 XHTML 1.0 引入的。它告诉浏览器,这个页面上所有的元素都是在 XHTML 的 namespace,http://www.w3.org/1999/xhtml,中定义的。但是 HTML5 的元素就是在这个 namespace 中,所以你不需要再一次显示声明。你的 HTML5 页面在所有浏览器中都可以工作的,不管有没有这个属性。于是,我们把它删除掉吧:

<html lang="en" xml:lang="en">

还有两个:langxml:lang。这两个属性都是用来定义 HTML 页面的语言。en 代表英语,如果你不是用英语写的,就要使用你所使用的语言代码。为什么我们要用两个属性去表示同一个东西?还是因为 XHTML。只有lang属性对 HTML5 有影响。你可以留着xml:lang,也可以删除。不过记住,如果你留着这个属性,要确保它的值同 lang 是一致的。

为了便于迁移和脱离 XHTML,我们在 HTML 文档中可以指定没有 namespace、没有前缀、没有 localName "xml:lang" 的属性值,但是这种属性只有在没有 namespace 的 lang 存在的时候才能使用,并且二者的属性值必须相同(这里的相同是大小写敏感的)。没有 namespace、没有前缀、没有 localName “xml:lang” 的属性值不会影响到语言的处理。

诸多限制,不是吗?怎么样?不耐烦了吗?那就删掉它吧!留下我们最终的根元素:

<html lang="en">

Leave a Reply