当装配Web页面时，任何Web开发者首先要完成的第一件事是选择文档类型定义，或者简称为DOCTYPE。在Web页面中指定DOCTYPE的第一个好处是可以使用诸如W3C提供的验证服务来验证页面的内容，以此确保内容遵循特定的标准并且不会含有任何不合法的标记——当应用AJAX和动态操作DOM时这些标记可能会造成令人讨厌的bug。验证常常被开发者所忽略，然而，这是一种用于帮助改进Web页面的优秀实践。开发出合法的HTML或者XHTML还具有其他的一些优点，例如改进的搜索引擎优化（至少它们要保证你有<title>标签）可以更快速地对HTML进行解析以及获得更优秀的跨浏览器性能。同时还可以提高页面的可访问性（但是，当你学到第10章时，你会发现这并不是必需的）。实际上，指定DOCTYPE最重要的作用是告诉Web浏览器如何解释和解析HTML内容。根据DOCTYPE，Web浏览器将会以不同的方式解释CSS和呈现HTML。尽管这个问题经常与IE一起讨论，但是大多数的浏览器都支持两种操作模式：怪癖模式（quirks mode）和标准模式（standards mode）。实际上，大多数浏览器甚至拥有第三种几乎标准模式（almost standards mode）（对于IE而言，这种模式才是很多人所认为的标准模式。但是我们不必为此太担心，因为在这种模式和正规的标准模式之间只存在很少且几乎不被人们所注意到的差别。

为了确定使用哪种操作模式工作，Web浏览器支持DOCTYPE切换。这意味着这些浏览器将会根据页面的DOCTYPE声明来决定如何解释和呈现Web页面里的HTML和CSS内容。例如，如果Web页面里没有指定DOCTYPE，则所有的Web浏览器将会执行怪癖模式。我们需要关注的主要有6种基本的DOCTYPE，列举如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

前面3个分别是HTML 4.01 DOCTYPE中严格型（strict）、过渡型（transitional）和框架型（frameset）版本，后面三个则对应XHTML 1.0的各个版本。

当构建Web页面时，如果页面是被作为XHTML提供服务的，那么你还需要考虑一些额外的工作。首先要注意的是服务器应该以application/xhtml+xml的mime类型提供Web页面服务，而不是text/html类型，并且Web页面的根元素<html>应该像下面这样指定XHTML的命名空间：

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

lang="en">

与HTML 4.01相比，XHTML 1.0对标记的放置的还存在其他一些主要需求，如表3-1所列。

表3-1　HTML 4.01和XHTML 1.0 特性的比较


HTML 4.01

XHTML 1.0

文档应该是格式正确的XML

<p>Customers<br>

<p>Customers</p><br />

属性名应该小写，属性值要加上引号

<div ID=header>

Customers </div>

<div id="header">

Customers</div>

脚本应该是格式正确的XML，并且可以使用CDATA段非常容易地编写脚本

<script TYPE=text/

javascript>

…</script>

<script type="text/

javascript">

<![CDATA[…]]></script>

尽管很多开发者都被“固有的”基于XML的HTML标签所吸引，但是使用这些标签的过程中往往会碰到问题。主要问题在于：根据规范，XHTML内容应该以application/xhtml+xml的mime类型被提供，然而IE还无法识别这种mime类型。IE 7对这个问题进行了一个改进，只要在DOCTYPE声明前放置一个XML的前置声明(<?xmlversion="1.0"encoding ="UTF-8" ?>)，浏览器就不会像IE 6那样回复到怪癖模式。通过指定前置声明，IE 7 识别出当前的内容是XHTML而不是HTML。这是微软公司在全面支持XHTML的道路上迈出的一大步。XHTML文档确实提供了很多优势，例如可以更加简单明了地包含其他基于XML的语言（与命名空间一起）例如SVG，并且在Web浏览器里不合法的XML会抛出错误。但是目前使用XHTML仍然有一点乐观，并且只有当IE也采用application/xhtml+xml的mime类型时，使用XHTML才可能成为现实。

对于大多数浏览器，除去极少数像Konqueror这样的浏览器，上文列出的所有HTML和XHTML的DOCTYPE定义都可以切换到浏览器的几乎标准模式或者纯标准模式，其实这两种模式的大部分情况下都是相同的。“严格型”DOCTYPE使得诸如Firefox、Opera和Safari浏览器进入标准模式，而IE则进入我们所提到的几乎标准模式，同时“过渡型” DOCTYPE使得绝大多数的其他浏览器进入几乎标准模式

3.2.2　盒子模型

尽管对DOCTYPE和XHTML的讨论看起来比较充分，但是我们从这一节开始我们将改变话题。在大多数浏览器例如Firefox中，怪癖模式和标准模式相比只有很细微的差别。然而IE在这个方面确实考虑不周，并且切换DOCTYPE时存在问题。在IE里，怪癖模式和标准模式之间存在着一个主要的差别，这个差别就是CSS盒子模型。CSS盒子模型与HTML元素表现的尺寸有关。在W3C标准中，HTML元素的宽度和高度等于元素内容的宽度和高度，除了IE之外，所有的浏览器都在怪癖模式和标准模式里使用这一规则。然而，IE却依然在怪癖模式里采用传统的盒子模型（如图3-1所示），在传统盒子模型中，HTML元素的宽度和高度等于元素外部的宽度和高度。元素的外部包括元素的内边距（padding）和边距（border）。根据不同的情况，这些观点在具体的场景下都是有用的。在某些情况下，你也许想把一些元素排列到另外一些元素中，在这种情况下，W3C模型很有用。在另外一些情况下，你也许想把元素依次排列，在这种情况下，外部尺寸非常重要，传统模型更有意义。


外边距

边距

内边距

文档类型定义 _开发者



传统盒子模型

W3C盒子模型

元素内容

图3-1　HTML元素的空间属性（外边距、边距、内边距和内容）以及遵循W3C标准的浏览器
（例如Firefox）和传统的浏览器（例如处于怪癖模式的IE）对元素宽度解释的差异


问题的关键在于如果想减少AJAX应用里盒子模型所带来的令人头疼的问题，我们需要采取一定的策略。这里有两种主要选项。

l 通过指定一种上文列出的DOCTYPE，在IE里使用标准模式，在这种情况下，Web页面像其他所有浏览器一样使用W3C的盒子模型。

l 在没有DOCTYPE声明的情况下，在IE里使用怪癖模式，并且通过box-sizing CSS规则强制其他浏览器都使用传统盒子模型。

CSS3规范定义了一个名为box-sizing的规则，这个规则具有两个值：border-box和content-box，这两个值分别对应着传统模型和W3C模型。现在，Opera和Firefox都支持这一规则，开发者可以根据情况选择不同的盒子模型。在Firefox里，这个属性的语法有些细微的差别：Firefox在这个规则名字的前面加上了–moz-，并且它也支持–moz-box-sizing:padding-box，这个值的意义非常清楚，应该不需要解释。