级别： 初级 Brett McLaughlin, 作家兼编辑, O'Reilly Media Inc.
2006 年 12 月 21 日 从邻家 8 岁的小孩到 80 岁的老奶奶都在构建 Web 站点，Internet 已变成了一头行动迟缓、陷入泥潭的野兽。但是只需要一点 XHTML 的使用技巧，就能创建一流的漂亮 Web 站点，使之在眨眼之间加载完毕。
过去两年中，您耳朵里就灌满了已经踏入高速连接的新时代的说法。现在，世界上大约 25% 的计算机用户至少有一条光纤调制解调器或者 DSL 连接，当然，这意味着速度不再是问题。既然如此，在网站中挂上巨幅图片或者 Flash 电影也就不足为怪了！我的意思是说，如果每个人都拥有这样的带宽，那么为什么不利用它呢？
就个人而言，我基本上会充分利用所能得到的全部带宽。但是随着邮件应用程序不断轮询 IMAP 服务器、下载 Firefox 的最新版本、更新我在 IBM developerWorks 上的论坛，再加上网上冲浪，我发现自己仍然需要等待页面加载完毕。尽管人们都对当前的连通性赞叹不已，我仍然为那些看似缓慢 的站点而烦恼。这听起来是不是有点熟？是的话就要做好心理准备了：假设人们正因其速度缓慢而不满的 Web 站点就是您的 站点，然后努力转变这种状况。只要有足够的人开始编写漂亮的 Web 代码，那种等待就有望很快成为历史（至少只要不访问某个 Flash 新手在首页上放置了 250 MB 电影序列的网站）。
本文可以帮助您开始构快速、精巧的 Web 站点。我选择了一半网站设计者和开发人员通常不会用到、但非常有效的几个技巧，以及能够带来的好处比预想更多的特性。适应这些新技术可能需要一些时间，但最终结果肯定会让用户更高兴（通常也会以这样或那样的形式转化成收益）。
为一切事物使用 XHTML
HTML 已经衰亡，XHTML 欣欣向荣！这样说似乎有点极端，但是我希望我能在山顶上高喊出这句话。我预料自己会看到一些茫然无措的目光。如果没有听说过 XHTML，或者不知道为何要关心它，不用担心，您和大多数 Web 设计人员一样。XHTML 是实现快速 Web 站点和轻松 Internet 的第一步。
 |
缩写词
除非您在过去的两年中一直住在山洞里，否则一定听说过 XML —— 可扩展标记语言。虽然 XHTML 和 XML 有所不同，但在很大的程度上，可以说它是超文本标记语言（HTML） 的 XML 化版本。XML 定义了文档中数据表示应该遵循的一组规则。XHTML（与 XML Schema 或 XSLT 一样）是一种 XML 词汇表，它定义了适用于特定应用（在这里也就是定义 Web 页面）的一组标签和结构。因此 XML 与 XHTML 密切相关（而且 XHTML 依赖于 XML）。
|
|
HTML 已走到尽头！
HTML 基本上和网页同时诞生。HTML 是为了在 Web 浏览器中方便地显示内容而设计的，它作为 Web 设计的主流技术已超过十年。但 HTML 有（并且仍然存在）很多严重的问题：
- 在不同浏览器（如 Mozilla、Firefox、Microsoft Internet Explorer、Safari 或 Opera）上的显示结果不同。
- 它接受结构不完善的标记，从而致使糟糕的代码泛滥。比方说，可以插入一个
<br> 标签而不用去操心关闭它。类似的标签还有很多，包括 <hr> 和 <p>。
- 它定义了网页的结构（使用段落、标题和列表等）以及结构的样式（颜色、边框和字体）。当出现新样式时，必须修改整个 HTML 规范来引入该样式，即便这种样式对 HTML 的结构毫无影响。
还可以举出更多例子，但上述因素是最显著的不利之处。HTML 的每个版本（(2.0、3.2、4.0 以及最新的 4.01）都未能彻底或得体地解决这些问题。HTML 的本质使其不可能彻底消除这些问题。换句话说，与其修补从根本上烂掉的东西，还不如创建替代它的新东西。
进入 XHTML。在第一个版本 XHTML 1.0 中，万维网联盟（请参阅 参考资料）希望制订一种简单、结构良好、与 HTML 类似的标准。虽然 XHTML 存在一些小问题，但 W3C 在很大程度上取得了成功。由于 XHTML 是 XML，它必须是结构良好的：标签必须有始有终，嵌套必须合理有序（关于 XML 语义的更多信息请参阅 参考资料）。XHTML 去掉了和样式有关的全部内容，而留给 CSS（级联样式表）完成，稍后我们将讨论 CSS。
|
我该把它叫作……迷你 XHTML
XHTML Basic 是 XHTML 的一个分支，基本上是 XHTML 的一个简化版本。它适合于不能显示完整的 XHTML 所提供的丰富内容模型的设备，如电话、PDA 和寻呼机等。这对 XHTML 开发人员来说是一桩好事，因为所用语言很容易转换到移动设备上。
|
|
现在，1.1 版已经发布，XHTML 继续为多数 Web 开发人员认为过于臃肿 的 HTML 规范减肥。由于把样式交给了 CSS，XHTML 规范变成了一个可管理的标签集。当然，如果看不到这些变化有什么好处，这一切对于 Web 设计人员和开发人员来说也就毫无意义。
XHTML 和呈现模式
事实是：转用 XHTML 能够 提高页面加载的速度。但是要理解其原因，首先必须了解浏览器的呈现模式。在最新出现的浏览器（6 或 7 版）之前，浏览器处理 HTML 中的所有特例，比如打开但没有关闭的标签（包括 <br> 和 <img> 标签，以及设计人员经常由于懒惰而没有关闭的标签，如 <p>）。而格式正确的页面呈现起来一点也不快，处理所有特殊情况的同一引擎还要检查格式正确的文档，忽略掉您为关闭 <p> 标签而作的所有努力。
但是随着新一轮浏览器的出现，情况改变了。现在出现了两种不同的模式：
-
特殊模式 处理所有旧式的 HTML，检查没有关闭的
<br> 标签等等。如您所料，这种模式会降低文档的解析速度，因而延缓了浏览器的显示。
-
标准模式 处理受约束的 HTML 和 XHTML，要求文档具有良好的结构和组织。这样解析速度会提高，页面显示得更快（而且在不同的浏览器上基本相同）。
|
更多的 XML？
在 XML 中，DOCTYPE 声明允许文档引用一组约束。这些约束可以告诉解析器（在这里是 Web 浏览器的一部分）文档中允许出现什么元素、属性、标签和结构。通常这些约束放在称为文档类型定义 或者 DTD 的文件中，这是一种专门用于约束结构化标记（如 XML 和 HTML）的格式。有效的 文档符合这些约束或者规则，无效的 文档破坏了这些规则，常常会造成解析错误。
|
|
可以预料，任何优秀的 Web 设计人员都希望建立以标准模式呈现的页面。速度快而且 在不同浏览器上得到相同的结果相对于迁移到 XHTML 的低成本而言是一大优势。不过事实上，在较早的、更宽松的 HTML 版本（包括 2.0）中就能使用标准模式。（关于 HTML DTD 的完整列表请参阅 参考资料。）那么有什么区别呢？
首先，让浏览器用标准模式解析的惟一条件是 HTML 或 XHTML 文档的第一行包含 DOCTYPE，如清单 1 所示。
清单 1. 这个 HTML 片断的 DOCTYPE 声明它是 HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <meta name="robots" content="noindex, nofollow" />
<head> <title>Head First Labs</title> <link rel="stylesheet"
type="text/css" href="hf.css">
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">
<IMG src="Images/hfguy.png">
</div>
<div id="hfl">
<IMG src="Images/HeadFirstInstitute.png" width="584" height="53">
</div>
</div> <!-- header -->
<div id="menu">
<a href="index.html"
><IMG class="menuselected" src="Images/postit/home.png"
width="80" height="65"
></a>
<a href="books.html"
><IMG src="Images/postit/books-unselected.png"
width="80" height="65"
></a>
<a href="training.html"
><IMG src="Images/postit/training-unselected.png"
width="80" height="65"
></a>
<a href="forum.html"
><IMG src="Images/postit/forums-unselected.png"
width="80" height="65"
></a>
<a href="about.html"
><IMG src="Images/postit/about-unselected.png"
width="80" height="65"
></a>
<a href="writeforus.html"
><IMG src="Images/postit/write-unselected.png"
width="80" height="65"
></a>
</div> <!-- menu -->
|
但该文档遵循的是 HTML 4.0 而不是 XHTML。虽然 DOCTYPE 声明告诉浏览器使用标准模式，但是它仍然会根据那个 DTD —— 即 HTML 4.0 的规则去解析 HTML。因此是 DTD 而非浏览器本身定义了规则的严格性。如果使用 HTML 的宽松版本如 2.0 或 3.0，因为规则很灵活，浏览器仍然必须处理特殊情况，结果比用特殊模式解析好一些 —— 因为后者猜测各种可能性，但效果依然无法与使用 XHTML 时相比拟。
因此仅仅让浏览器用标准模式呈现还不够，使用 HTML 2.0 代码再加上 DOCTYPE 也能做到，但是仍然必须面对很漫长的页面呈现过程。相反，必须应用 DTD 并让浏览器使用标准模式，而且 还应选择严格到足以提高解析速度的 DTD。这正是 XHTML 发挥作用的地方，它定义了一组严格的规则，以便能够快速解析和跨平台呈现 XHTML。结果如何呢？任何机器、任何浏览器的用户都获得了更好的体验。
将旧的 HTML 转化成 XHTML
现在，您已经了解了 XHTML 的好处，那么就需要将已有的 HTML 转化成 XHTML 以便利用这种语言。听起来似乎很麻烦，坦白地说，这的确不简单。不过，定义所有 HTML 以及 XHTML 有关规范的组织 —— W3C 简化了这种转化。
如同学习 XHTML、DTD 和 CSS 一样，从 HTML 到结构良好的、有效的 XHTML 也不简单。首先需要迁移到 HTML 4.01，它现在已基本上成为 Web 设计的基础。将下面的 DOCTYPE 声明添加到 HTML 文档的第一行：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
这样立刻就会以标准模式呈新文档了。这个 DTD 被称为 HTML 4.01 的 Transitional 版，可以作为进入基于标准的 HTML 世界的基石。它接受目前 W3C 排斥（即以后不再可用）的一些属性和结构，这使您能够通过最少的改动使用大多数 HTML。
迈过了这第一步之后，再尝试去掉那些标明排斥或逐步淘汰的标签。有两种办法：
- 反复学习规范，然后手工完成修改。
- 将文档改为采用 HTML 4.01 Strict DOCTYPE，然后验证文档并修改报告出的错误。
显然第二种方法更好一些。既然有方便的工具（验证 HTML 一节介绍）可用，何必再纠缠于 HTML 和 XHTML 错综复杂的关系中呢？关键是从 Transitional DTD（如上所述）改为这种新的 DTD，即 HTML 4.01 Strict：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Strict DTD 实际上移除了那些将逐步淘汰的属性和结构（而 HTML 4.01 Transitional 仍然允许使用）。这也是迈向 XHTML 的一大步。事实上，XHTML 1.0 规范定义了 Transitional DTD 和 Strict DTD，两者与它们的 HTML 对应部分非常相似：
- HTML 4.01 Transitional + 少量与 XML 有关的修改 = XHTML 1.0 Transitional
- HTML 4.01 Strict + 少量与 XML 有关的修改 = XHTML 1.0 Strict
从实用性的角度看，至少应以 HTML 4.01 Strict 为目标。如果可以验证模型并用它来显示网站，基本上也就是在运行 XHTML 的增加了少量样式的版本。也能享受到 XHTML 在性能方面的大多数好处。如果您更习惯 XML 世界，可直接采用 XHTML 1.0 Strict 和 XHTML 1.1。
验证 XHTML
除非可以保证文档是有效的，并且符合所指定的 DTD 中的规则，否则这些 DTD 和版本控制也就没有多少意义。对此，最简单的办法是使用来自 W3C 的另一个工具：W3C Validator（请参阅 参考资料）。图 1 显示了这种工具的外观。
图 1. W3C Validator 是一种有用的工具
可以为它指定一个 URL（比如 http://www.headfirstlabs.com）或者打开本地文件。选择 Check 创建类似图 2 所示的报告，说明 HTML 中什么地方对、什么地方错。
图 2. 有时候 Validator 的结果不够美观
要注意，报告不仅仅是检查错误。它可以帮助您发现问题（包括行号和列号）、显示错误，甚至还能提供解决问题的建议。还要注意，标题行提供了文件中所引用的规范和 DTD 的链接。这一点很方便，因为很快就能看到 W3C 在规范中怎么说的，并澄清关于哪些元素和属性合法的迷惑。
开始的时候，纠正 HTML 中这些小问题可能是一个冗长费时的过程。比如，HTML 4.0 Transitional 要求所有的 <img> 标签都指定 alt 属性。如果验证的页面有 50 或 100 张图片，而且都没有使用 alt 属性，这可能是件很麻烦的事。但是，验证也强化了规范。很快就会发现所做的这些修改 —— 初看起来有些怪 —— 是很自然的。成百上千个错误减少到 10 或 15 个，然后剩下很少几个，很快，您不必再使用 Validator 也能写出没有错误的 HTML 了（虽然仍然要用它检查编写的每个页面！）。一点忠告：按照出现的顺序改正错误。通常接近文件开始位置的错误会造成后面的更多错误。尽早修正可以防止 HTML 中的后续问题。
改正了文档中的所有问题之后，Validator 会为您暗挑大拇指的。这时候，从技术的角度看，页面可以准备发布了。从用户的观点来看，页面的速度更快，在不同的浏览器甚至不同的平台上看起来都基本一样。对多数网站而言，和稍微麻烦一点以及错误纠正相比，这些都是值得的。
坏消息……
听起来似乎不错，而且能够大大提高站点加载的速度。不过还有一个非常重要的警告。要记住，Web 浏览器的主要目的是显示 Web 站点，而不是验证 HTML（或者 XHTML），也不是报告错误（至少不会以任何严谨的形式）。因此，如果 HTML 中有错误 —— 即便使用 HTML 4.01 Strict DTD —— 浏览器会直接进入特殊模式来显示它，这样就没有任何优势可言了。这就意味着不能编辑 HTML 然后完全交给 Web 服务器，再通过加载到浏览器中来检查其有效性。需要用 W3C Validator（我似乎听到了一些叹息）仔细验证每个页面。但是不经过测试就把自己陷进了可能最糟的 境地：痛苦地（差不多是这样）去编写和设计 HTML 的严格版本，但由于文档无效而没有享受到性能上的任何好处。如果花时间使用 XHTML 1.1 Strict（或者等价的 HTML），就能享受到这些好处。验证是一个很快的过程，尤其是在成批测试页面的情况下。
在为浏览器的行为而心烦意乱的时候，要记住，即便页面以特殊模式显示，只要网站没有崩溃，您的用户群依然会满意。毫无疑问，在请求时，一个网站能够打开要比打开的速度快慢更重要。
CSS 的好处
CSS（级联样式表）不仅是一种 W3C 规范（请参阅 参考资料），也是 HTML 4.01 Strict 以及 XHTML 1.0 和 1.1 不可缺少的完整组成部分。事实上，没有 CSS 就无法有效使用这些后来的标记版本。
继续讨论之前，首先要说明的是本文不打算讲述 CSS。CSS 作为一种语言，有专门的文章和专著讨论（参考资料 中列出了一些）。这里我想强调 CSS 的优点，以及除了将旧的 HTML 转化成 HTML 4.0 Strict、XHTML 1.0 Strict 和 XHTML 1.1 以外更重要的意义。一旦了解了 CSS 的价值，学习 CSS 就很简单了。
按类而不是元素组织
CSS 最简单的形式是定义一组属性，从字体选择、大小到背景颜色和文本定位，然后将这些属性附加到文档（如 HTML 和 XHTML）中的元素上。初看起来不像是什么了不得的事，甚至和不使用 CSS 的 HTML 差不多。但是，看看清单 2 中所示的简单 HTML 片断。
清单 2. HTML 要求在元素上设置格式
<html>
<head> <title>Old HTML </title></head>
<body bgcolor="#FFFFFF" color="#000000">
<p align="center"><font face="Arial" size="14">This is my page.</font></p>
<!-- Other HTML -->
</body>
</html>
|
在本例中，要注意两点：
- 文本的格式在文本上设置，使用
<font> 标签。
- 页面的格式在元素上设置，使用
<body> 标签。
很显然，不是吗？但还不够好！首先，看看文本格式的设置。对齐段落或者设置字体及大小不是什么了不起的事 —— 除非有很多段落（如清单 3 所示）。现在字体标签散布在页面中，这些标签使 HTML 支离破碎，增加了加载和呈现页面的时间，而且通常会把事情搞乱。
清单 3. 元素越多，格式越多
<html>
<head> <title>Old HTML </title></head>
<body bgcolor="#FFFFFF" color="#000000">
<p align="center"><font face="Arial" size="14">This is my page.</font></p>
<p align="center"><font face="Arial" size="14">This is some more text.</font></p>
<p align="center"><font face="Arial" size="14">Not very exciting, is it?</font></p>
<!-- Other HTML -->
</body>
</html>
|
|
没有完美的事情
认识到这点之后，将 清单 3 和 清单 4 相比，就好像比较苹果和桔子。使用 <center> 代替 p align="center" 产生的结果略有不同（取决于浏览器）。比方说，在 Firefox 上使用 <center> 把我所有的文字在页面上稍微向下移动了一点。因此，即使像这么简单的例子，也不能用分组元素标签完全再现单个元素标签的效果。
|
|
显然，如果把所有字体声明都移到一个 <font> 标签，使用 <center> 标签删除所有的 align="center" 声明，可以减小文件的大小，如 清单 4 所示。
清单 4. 格式化问题的简单解决方案
<html>
<head> <title>Old HTML <title></head>
<body bgcolor="#FFFFFF" color="#000000">
<center><font face="Arial" size="14">
<p>This is my page.</p>
<p>This is some more text.</p>
<p>Not very exciting, is it?</p>
</font></center>
<!-- Other HTML -->
</body>
</html>
|
但是如果在页面中间突然插入其他格式，如清单 5 所示，问题就更加复杂了。
清单 5. 细微的错误可能搅乱整个页面
<html>
<head> <title>Old HTML</title></head>
<body bgcolor="#FFFFFF" color="#000000">
<center><font face="Arial" size="14">
<p>This is my page.</p>
<p>This is some more text.</p>
<p align="right"><font face="Times" size="10">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
</font></center>
<!-- Other HTML -->
</body>
</html>
|
现在有了整体的字体和大小，但是中间的一个段落使用了不同的字体和对齐方式。浏览器的不一致性就显现出来了，直接嵌套变成了难题。所有这些都反映了元素逐个设置格式 这个简单的问题。如果对某个元素应用专门的格式，要么重复格式化代码（要知道除了这些例子中出现的对齐、字体修饰和大小之外，可能还需要对文本做下划线、粗体、斜体或者其他修改），要么对不可靠的分组设置格式（如清单 4 和 5 所示）。哪种办法都不够好，这恰恰是 CSS 真正闪光的地方。
|
看看别处，CSS 新手
参考资料 中给出了大量关于 CSS 的教程。如果不熟悉这些 CSS 或者感到困惑，那就对了。现在，您要了解的只是它能够怎样地简化和组织 Web 页面，具体用法可以参考其他资料。现在，只要知道即使对最简单的 Web 页面 CSS 也具有重要的意义就够了。
|
|
通过 CSS 定义规则，然后将这些规则应用于元素。虽然这与上面的方法相比，似乎只是绕了一个弯，但要知道，浏览器应用这些规则时不会将格式从规则插入到每个元素中。因而这会节省处理和呈现的时间，因为浏览器不需要逐个字节地读入字体指令或者对其属性。通过简单的 style 元素的帮助，可以大大简化这些清单（如清单 6 所示）。
清单 6. 用 CSS 清理格式
<html>
<head> <title>Old HTML </title>
<!-- <STYLE type="text/css">
body { color: black; background: white; }
p { font-family: Arial; font-size: 200%; text-align: center; }
p.right {font-family: Times; font-size: 75%; text-align: right; }
--> </STYLE>
</head>
<body>
<p>This is my page.</p>
<p>This is some more text.</p>
<p class="right">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
<!-- Other HTML -->
</body>
</html>
|
只要几行 CSS 就可以消除所有的字体、对齐和嵌套问题。事实上，甚至可以把字体大小扔到垃圾堆中，转而使用百分比。这很棒，不会再有绝对字体大小在不同浏览器中以（奇怪的）不同像素高度显示了。现在可以保证所有文字都是一致的，标题是其他文本的两倍大（或者 3 倍、1.28倍）。
一致的样式
细心的读者可能会认为我漏掉了什么，在上一节 CSS 的好处 中，我提到了在 HTML 中使用内嵌格式存在两个问题。我讨论了第一个，即逐个设置元素的格式，但是没有讨论第二个，即页面主体本身的格式。这有多大关系呢？把 body 元素上的格式直接移动到 CSS style 元素中似乎没有什么好处。仍然需要输入一次这些信息，在处理对齐与字体时不会面临重复的问题。
答案不是很明显，需要对 CSS 能做什么了解得更多一点。首先，必须知道，可以将 CSS 写入单独的文件，然后在 HTML 中引用这些外部文件，如清单 7 所示。
清单 7. 把 CSS 从页面中提取出去
<html>
<head> <title>Old HTML </title>
<link type="text/css" rel="stylesheet"
href="/styles/style.css" />
</head>
<body>
<p>This is my page.</p>
<p>This is some more text.</p>
<p class="right">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
<!-- Other HTML -->
</body>
</html>
|
这样，不仅仅是当前的页面，而是站点中的所有页面都能使用 CSS 规则了。修改后将主体格式转移到 CSS 中的好处也就显而易见了：可以为所有 Web 页面建立统一的风格。不需要为每个页面设置主体格式，像平常一样使用 body 标签就行了 —— 没有格式设置，但是一定要引用 CSS 样式表。<body> 的规则自动应用，可以为站点建立统一的观感。增加一些边界留空、建立边框或者对 CSS 规则作其他修改，所有页面立刻就会更新，不用费任何力气。实际上这就是 CSS 真正的强大之处：可以轻松实现影响整个 Web 站点 —— 而不是一个或几个页面的的修改。
结束语
那么结论是什么呢？转用向 XHTML 和 CSS 真的值得吗？我认为，可以响亮地回答这个问题，“是！” 不仅是您可以建立更加结构化的环境来标记 Web 页面，对于用户来说，他们也能更快地完成 Web 页面的加载。而且，转用 CSS 后，除了减少加载时间外，您还会获得很多好处。设计中可以使用更容易编程的模型，从而为用户提供统一、一致的体验。不需要再记住作者简介页面中使用了多大字体、不必再拼凑多个 HTML 表格的十六进制颜色，当然也不会再有 <font> 标签搅乱您的代码。Web 页面给出布局，CSS 定义页面设计。
此外，您也会跟上 Web 社区前进的脚步，不用再落在后面，编写 HTML 3.2（或者 HTML 2.0，天那！）代码。这意味着您的 Web 页面可以使用 Ajax（主要依赖 <div> 和 <span> 标签来演绎美奂美仑的设计）这类新的 Web 技术，而无需对站点进行又一次 全面改造。开始动手吧，让我们看到一个更迅速、更精妙的专业级网站！
参考资料
关于作者
对本文的评价
| 
