精通CSS:文档类型、DOCTYPE切换和浏览器模式

1.1.2  文档类型、DOCTYPE切换和浏览器模式

    DTD(文档类型定义)是一组机器可读的规则,它们定义XML或(X)HTML的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,因此知道要使用(X)HTML的哪个版本。

    DOCTYPE声明是(X)HTML文档开头处的一行或两行代码,它描述使用哪个DTD。在下面的示例中,要使用的DTD是XHTML 1.0 Strict的DTD:

    

    DOCTYPE通常(但不总是)包含指定的DTD文件的URL。浏览器一般不读取这些文件,而是只识别常见的DOCTYPE声明。

    1. 有效性检验

    除了根据语义加标记之外,(X)HTML文档还需要用有效的代码来编写。如果代码是无效的,浏览器会尝试解释标记本身,有时候会产生错误的结果。更糟的是,如果发送具有正确的MIME类型的XHTML文档,理解XML的浏览器将不显示无效的页面。因为浏览器需要知道要使用的DTD才能正确地处理页面,所以对页面进行有效性检验要求有DOCTYPE声明。

    可以使用W3C检验器检查(X)HTML是否是有效的,这是一个类似于检验器bookmarklet或Firefox Developer Extension的插件。许多(X)HTML编辑器现在内置了检验器,还可以在计算机上本地安装W3C检验器的副本。检验器会指出页面是否是有效的,如果是无效的页面,它还会指出原因是什么。

    有效性检验很重要,因为它有助于找到代码中的bug。因此,尽早和经常进行有效性检验是个好习惯。但是,有效性检验太苛刻了,许多好页面由于很小的错误(比如&符号没有进行编码)或者因为遗留的内容而无法通过有效性检验。所以,尽管有效性检验是很重要的,但是在现实世界中,需要一定程度的常识。

有各种代码检验工具。可以访问http://validator.w3.org/并且输入自己的URL来对自己的站点进行在线检验。但是,如果要经常进行检验(这是个好习惯),那么每次都输入自己的URL有点儿麻烦。我使用一个方便的检验器bookmarklet(也称favelet),这是一小段可以存储在浏览器的书签或收藏夹中的JavaScript。单击这个书签就会触发JavaScript动作。对于检验器bookmarklet,它通过W3C检验器运行当前页面并显示结果。在我的个人站点(www.andybudd.com/bookmarklets/)上可以找到这个检验器bookmarklet和其他许多方便的Web开发bookmarklet

如果使用Firefox,那么可以下载和安装各种插件。在可用的大量检验器插件中,我个人喜欢的是Web Developers Extension插件。除了可以检验(X)HTMLCSS之外,它还可以执行许多其他有用的任务,比如描述各种(X)HTML元素、关闭样式表以及在浏览器中编辑样式。可以从http://chrispederick.com/work/firefox/webdeveloper/下载Web Developers Extension,这是使用FirefoxCSS开发人员必须具备的插件。

还有一个用于IE 6和更高版本的开发人员工具栏。可以从http://tinyurl.com/7mnyh下载这个工具栏。尽管它的特性不如Firefox工具栏那么丰富,但是仍然非常有用。

    DOCTYPE声明除了对有效性检验很重要之外,浏览器还将它们用于另一个用途。

    2. 浏览器模式

    当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种表现模式:标准模式和怪异模式(quirks mode)。在标准模式中,浏览器根据规范表现页面;在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

    对于这两种模式之间的差异,最显著的例子涉及Windows上IE专有的框模型。在IE 6出现时,在标准模式中使用正确的框模型,在怪异模式中使用老式的专有框模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。

    表现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。

    Mozilla和Safari还有第三种模式,称为“几乎标准的模式(almost standards mode)”,除了在处理表格的方式方面有一些细微的差异之外,这种模式与标准模式相同。

    3. DOCTYPE切换

    浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方法。如果XHTML文档包含形式完整DOCTYPE,那么它一般以标准模式表现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式表现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式表现,但是有过渡DTD而没有URI会导致页面以怪异模式表现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以怪异模式表现。

    根据DOCTYPE是否存在选择表现方法的效果被称为DOCTYPE切换(DOCTYPE switching)或DOCTYPE侦测(DOCTYPE sniffing)。并非所有浏览器都采用这些规则,但是这些规则很好地说明了DOCTYPE切换的工作方式。Eric Meyer深入研究了这个主题,并且制作了一张图表(http://meyerweb.com/eric/dom/dtype/dtype-grid.html)来说明不同的浏览器如何根据DOCTYPE声明选择表现方法。

    DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错误的DOCTYPE,那么页面就将以怪异模式表现,其表现就可能会有错误或不可预测。因此,一定要在站点的每个页面上包含形式完整的DOCTYPE声明,并且在使用HTML时选择严格的DTD。

    

    许多HTML编辑器会自动添加DOCTYPE声明。如果创建XHTML文档,它们还可能在DOCTYPE声明前面添加XML声明:

    

    XML声明是XML文件使用的可选声明,它定义使用的XML版本和字符编码类型等设置。不幸的是,如果DOCTYPE声明不是页面上的第一个元素,那么IE 6会自动切换到怪异模式。因此,除非要将页面用做XML文档,否则最好避免使用XML声明。

---来自:http://www.educity.cn/help/HTMLCSS/200709111021071077.htm

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值