前    言

本书的写作目的是向你提供一些“武器”，它们能够给你的项目提供基于Web标准的解决方案，让你在运用HTML和CSS的时候能做出更好的决策。贯穿每一章，我们都将比较各种常见的Web设计方法，试图弄明白为什么其中一种方法比另一种要更好。通过这些比较，我们将为项目找到最适合的工具。

但首先，我们要确认我们处于同一页上——书中含有缩写词、代码段以及可能比较陌生的概念。我们先来谈谈Web标准。

什么是Web标准

引用万维网协会（World Wide Web Consortium: www.w3.org/Consortium/）的话：

“万维网协会（W3C）创立于1994年10月，其宗旨是：通过发展通用的协议来带领万维网发挥出其最大潜力，推动它的进化并确保它的互操作性（interoperability）。W3C拥有大约400家来自世界各地的成员组织，其对Web发展所做的贡献已经为世人所肯定。”

W3C的创始人是Tim Berners-Lee。该协会起草了今天建立Web所依据的Web标准规范。我们的注意力重点放在其中两种标准上：可扩展超文本标记语言（XHTML），它具有HTML 4.01的语义和XML的语法；以及层叠样式表（CSS），它用来设计Web页面的样式。

为什么要用Web标准

昨天我买了一幅窗帘。我在去商店之前先量了一下窗户的尺寸。我从货架上选了一件23英寸的买回家，它非常合适。

去年，我和妻子一起买了一台新的洗碗机。我们把旧的洗碗机从厨柜里移出，并订购了一台新的。当新的到来后把它放进去，它也非常合适。

我这里想说的是：因为产品遵循某些（外形）标准（standard），使得居家布置变得非常容易。我可以走进商场，买一根下水道用软管，它一般不会接不上。我也可以买个新的门把手，十有八九它不需要做任何调整就能装在门上用了。

因为预先的规定，标准的尺寸让人们建造和维修房屋更加轻松。当新的房主想要翻新或维修房子时，标准让这项工作变得更容易。

当然，事情并非总是这样。在20世纪以前，修建的房子并没有都遵循标准。并不是说不按标准修建的房子就不是好房子——只是说如果要翻新、修葺或者维修这些房子，需要花更多的工夫。

很多人都买旧房子，然后再装修。当繁重的装修工作完成时，房主便因标准的尺寸而受益，今后的维修也会简单很多。

本书并不是关于房子的。但前面的这些比喻同样可以用于Web世界——通过在页面中使用标准，维修工作将变得容易得多。其他设计师和开发者可以更容易地参与和理解页面的构造和样式。

从历史上看，设计师和开发者们一直都依赖于臃肿的页面代码来实现设计效果，今天也遍布这样的网站。嵌套了三层之深的表格以及用透明的GIF图片获得像素精度的布局是沿用了多年的模范做法。但是随着现代浏览器对标准支持的程度越来越好，将精简的结构化页面代码和CSS相结合的能力已经十分强大，兼容Web标准绝不意味着难看而乏味的设计效果。

潮流正在改变，那些意识到Web标准的优势的人与Web设计和开发社区中的其他人相比，会超前一大步。这是事物的未来走向。

通过理解和运用Web标准，可以获得下面这些好处：

  ●  更少的页面代码：更少的代码意味着更快的页面加载速度，也意味着更强的服务器负载能力，这反过来也意味着更少的存储空间占用和带宽花销。

  ●  内容和表现的更大程度的分离：通过用CSS来控制站点的外观设计，样式修改和重构变得更容易。修改一个样式表就能立刻改变整个网站。

  ●  更好的亲和力（accessibility）：Web标准使得我们能支持最大可能数量的浏览器和设备。站点内容可以被任何浏览器、手机、PDA或者那些使用辅助性软件的设备所访问。

  ●  前向兼容性（forward compatibility）：通过使用Web标准创建写页面，可以保证它们在未来仍然可读。

上述任何一个好处都可以是使用Web标准的充分理由，本书将会告诉你如何（how）丢掉那些坏习惯，教给你创建富有吸引力的、基于标准的设计方案的经验和技巧。

为什么要用XHTML

本书中的页面代码示例都使用XHTML，即可扩展的超文本标记语言编写。从技术上讲，XHTML是HTML 4以XML形式的重生。这是什么意思呢？嗯，你已经熟悉HTML了，对吧？XHTML也是一样的——只是多了一些规则。

再一次引用W3C的内容（www.w3.org/TR/xhtml1/#xhtml）：

“XHTML家族是因特网进化的下一步。通过今天转移到XHTML上，内容开发者们能够走进XML的世界，获得它现有的全部好处，同时还能确保他们的内容具备对过去和未来的兼容性”。

这是个很好的出发点——对未来的兼容性。现在用XHTML编写页面，我们就能进一步保证这些页面在未来的浏览器和设备中仍然可用。

XHTML还被设计为可由最大数量的浏览器、设备和软件所识别。不管用什么来读取，XHTML代码都比用其他语言编写的代码更有可能被正确地解析。

不过，XHTML有一些规则。

在XHTML的世界里，要写出合法的代码，需要遵循更加严格的规则。所有的标签和属性名都必须用小写字母，属性值必须用双引号引起来，所有标签最后都必须是闭合的。有一些规则继承自XML。但这些规则是有好处的。

除了对未来的兼容性，通过坚持严格的规则，书写正确合法的XHTML，设计师和开发者们可以更容易地调试代码（在多个作者维护同一页面时尤其有帮助），而且页面在支持标准的浏览器中也更有机会被正确渲染。整本书中我们的示例都将采用XHTML。

结构化代码

整本书中你可能会发觉我经常使用“语义”（semantic）这个词。我还会经常使用“结构化代码”（structured markup）。它们是可互换的。所谓语义，是指我们要尽可能使用那些表示“意义”（meaning）的标签，而不是表示“外观”的。你是在处理一个列表吗？那就用表示列表的代码。这是一个数据表格吗？那就用相符合的结构。

通过用语义化代码构建页面，我们将更好地实现内容和表现相分离，这样页面就能更好地被正确理解——这是你所希望的——支持更多种类的浏览器和设备。

如同我前面提到过的，以前Web设计师们依赖于嵌套表格和占位图片来实现像素精度的布局。<table>标签用来标识页面上的每个成分，导致了大量的多余代码——还导致页面实际上无法用文本浏览器、小屏幕设备或者辅助性软件来浏览。这些臃肿的东西从过去到现在一直在阻塞Web。

贯穿本书的每一章，我都会说明语义化代码如何帮助页面变得更简洁、更富亲和力、更容易用CSS设定样式。

本书的起源

它开始得很单纯。我在我的个人网站上发布了一些简单的测验题。一个多项选择题，每个答案都实现相同或者相似的结果。为什么某种方法要比其他方法更好？这是测验问题的真正答案。

测验的目的是揭示每种方法的优点和缺点，要注意到，即使许多方法使用的是合法的代码，它们仍然不一定是最佳方案。读者们可以评论并留下自己的意见，通过这些讨论，我前面提到的“武器”就出现了。如果我们能够理解为什么（why）使用页面标题以及合适的列表是重要的，那么我们就能将这些东西应用到自己的日常项目中去。

还值得提及的是，我并非试图规定构建某些页面成分只能用一种方式——如同Web设计中的每样东西，要实现相同或相似的结果，有多种方式。使用最适合当前任务的——但通过理解不同方法的优点和缺点，你再遇到这些情况时就会做出最佳决策。

本书结构

本书分为两大部分，第一部分涵盖了和页面代码相关的话题，第二部分则着重于CSS。每一章都解答一个专门的问题，通常都会展示能实现同样结果的多种方法。我们会详细介绍每种方法，了解它们各自的优缺点。在许多章节的最后部分还有一节“实例秀”，进一步研究了与本章内容相关的更高级的页面代码和CSS话题。

我希望你喜欢本书——现在让我们开始吧。

致谢

我向下面这些在成书过程中给予我帮助的人致以诚挚的谢意：

Chris Miller很早就参与到我的写作中，给予我很多指导并确保整体进展。

Drew McLellan给了我极好的建议和指导，并付出了很大努力。

Apress/friends of ED出版社的许多人都为本书做了许多事，特别是Sofia Marchant，Ami Knox和Ellie Fountain。

Jeffrey Zeldman，没有他的话我不可能会写出本书，他为Web标准所做的贡献超过了任何人。

Douglas Bowman给了我无懈可击的设计灵感，他还证明了CSS布局在大型商业网站上也能工作得非常漂亮。

Dave Shea种植了那个美丽的花园（CSS Zen Garden），证明了CSS可以实现我们想要的任何效果。

Jason Kottke提出了关于“spark”的问题。

SimpleBits的访客们提供了很有价值的讨论，使我产生了撰写本书的想法。

Eric Meyer、Christopher Schmitt、Tantek Celik、Molly Holzschlag、Todd Dominey、Mike Davidson、Ryan Carver、Dan Rubin、D. Keith Robinson、Mark Pilgrim、Joe Clark、 Craig Saila、Nick Finck、Owen Briggs、Simon Willison、Ian Lloyd、Dan Benjamin和其他许多人，他们在Web标准社区里线上线下的贡献帮助了成百上千的人，我就是其中之一。

Web Standards Project的成员们，他们让所有的Web设计师和开发者都一直受益良多。

我在Fast Company and Inc.时的同事们——特别是Rob Roesler，他给我提供了很好的机会和支持；David Searson，我从他那里学到了太多太多；同样还有Bob Joyal；Paul Maiorana容忍了我的旅行强迫症；还有Daigo Fujiwara、Paul Cabana、Nick Colletta、Heath Row、Irina Lodkin、Carole Matthews、Becca Rees、Alex Ashton、Peter Wilkinson——以及Linda Tischer，是她将我带进了FC公司。

我的家人和朋友，以及最重要的——我的爱妻Kerry——感谢她对我无比的支持。

当然，还有你们，我亲爱的读者们。感谢你们的阅读！