为了最有效地利用CSS，需要你的HTML代码为CSS提供一个坚实和良好的基础。本章向你展示怎样写出更好的、对CSS更友好的HTML。好消息是当你整个网站都使用CSS时，实际上HTML变得更容易编写。你不再需要担心尝试将HTML变成以前从来不曾想过的设计行家。甚至，CSS还将提供你可能需要的所有图形设计技巧。因为用CSS编写HTML网页只需要更少的代码、更少的字，并且更容易创建，所以你的工作将变得更简单。它们下载也将更快——这将是最受你网站的访客欢迎的一个好处（见图1-1）。

_HTML：过去和现在

HTML: Past and Present

如简介所述，HTML和它的继承者XHTML，为你在万维网上见到的每一张网页提供了基础。当你把CSS加入其中时，你使用HTML的方式就改变了。对那些仅仅为了获得某种视觉效果的笨拙的HTML标签说再见吧。一些HTML标签和属性——如<font>——你可以完全忘掉。接下来的章节将解释为什么。

图1-1：CSS驱动（CSS- driven）的Web设计使得编写HTML更简洁。此处两幅设计图看起来相似，但上图完全以CSS定义样式，而下图则仅使用HTML。上图HTML文件的大小只有4K，下图的文件大小则有14K，几乎是上图的4倍。只用HTML方法需要更多的代码才能获得几乎相同的视觉效果：213行纯HTML代码等同于71行CSS版的HTML代码。

HTML的过去：一切看起来都好

HTML Past: Whatever Looked Good

过去，当一群科学家创建网页来帮助人们分享和保留技术文档的历史时，没有人需要图形设计师。所有的科学家要HTML所做的就是清楚地构造信息以便于理解。比如，<h1>标签表明一个重要的标题，而<h2>标签代表一个次要的标题，通常是<h1>的一个子标题。另一个过去喜欢用的是，<ol>（排序列表）标签，给比如“不要和水母一起玩的10大原因”这类事创建一个有序列表清单。

但是，一旦除了科学家之外的人们开始使用HTML，他们便要求网页看起来要好看。因此网页设计师开始使用标签代替结构信息来控制展现效果。比如，你可以在任何你想要缩进的文本处使用<blockquote>标签（表示从其他地方引用来的资料）。可以使用标题标签将任何文本变得更大更粗，无论它是否起到标题的作用。

在一个更为精细的权宜之计中，设计师们学会了怎样使用<table>标签来创建文本列，怎样精确地给网页上的图片和文本定位。不幸的是，因为标签本是用于显示电子数据表的如数据调查结果、培训进度表等，设计师们不得不以各种非常规的方式使用<table>标签进行创造，有时为了使网页好看只好在一个表格中再嵌套一个又一个表格。

同时，浏览器制造者推出了一些新标签和新属性，以达到制作更美观网页的特殊目的。比如<font>标签，让你指定字体颜色、字体和7种不同字号中的一种。（假如你在家计分，这儿的字号比你能从如Microsoft Word中获得的少了约100种。）

最终，当设计师们无法真正获得其想要的效果时，他们经常借助于图片。比如，他们要用一个非常大的图片作为网页背景，或者将它切成许多小的图片文件，再在表格里拼起来，重新创建原图片。

当以上所有的方法——以创造性的方式使用标签，利用专门设计的标签属性，扩展图片的用途——提供设计来控制网页时，他们也增加了许多额外的HTML代码（和你的皱纹——比你在太阳底下过一辈子所长的皱纹还要多）。

_HTML的现在：_CSS的脚手架

HTML Present: Scaffolding for CSS

无论你的网页保存什么内容——从渔季日历到最近的IKEA的驾车路线，或者你孩子最新的生日聚会照片——网页的设计使它看起来像一家专业的公司或者一个业余者的爱好。好的设计增强了你网站的信息功能，帮助访客找到他们想要的东西，以及决定别人怎样看到你的网站。那就是前一节里提到的过去的网页设计师费尽心思要让HTML更好看的原因。通过承担这些设计责任，CSS让HTML继续做它最拿手的结构内容（比它本身的内容更有意义）。

使用HTML来控制文本展现效果和其他网页元素是过时的做法。不必担心HTML的<h1>标签与你的风格差异太大，也不必担心无序列表的间隔不对，因为这些都可以在稍后使用CSS来调整。也就是将HTML作为在你的网页上对所要的内容增加结构的一种方法。用HTML来组织内容，用CSS来使内容看起来更棒。