表现和结构相分离

4.5.1　表现和结构相分离

在Web的布局设计中，有一个重要的思想就是将结构和表现分离。即将所有的内容结构化，而所有关于呈现方式的内容全部采用CSS实现。即HTML页面仅仅对内容编写结构，而CSS专门编写该HTML页面的样式。这样能够大大提高修改、维护、升级和转化时的工作效率。

结构即将内容进行格式化，组织起来。比如，对一篇论文进行结构化处理，即将这篇文章分为标题、关键字、作者、摘要、引言(包含若干段落)、第一部分(包含若干段落)、第二部分等。我们借助XML的表示法表示如下:

而表现则是如何将内容展示出来。比如那篇文章:表现所关注的是文章中各个部分用什么字体，大小为几号等样式，用什么背景等显示的效果。如果它们混杂在一起，不分彼此，显示出需要的某个样式是没有问题。问题是当遇到需要修改表现的时候，麻烦就来了。我们不得不针对结构的每一个部分将原来的表现剥离出来，再套上新的表现。这种工作量是巨大的，如果是一篇文章的话，修改一次表现就得将文章从头到尾全部浏览一遍，边浏览边修改，而且只能是手工修改，计算机不可能智能地帮你做这些事情，因为没有结构化，它根本不知道哪儿需要修改。

假如将结构和表现分离，文章结构化则关注将文章分成哪些部分，而表现则关注每个部分该如何显示。即将一篇文章分为两层:结构层和表现层，它们各司其职。当需要改变结构的时候，我们去结构层修改，而表现层不需要改动。当需要改变表现的时候，我们到表现层去修改，结构层不需要变化。

因此，在HTML中，有些与样式相关的元素或属性是不建议使用的，比如font，center，color，bgcolor，align，width，height等。它们实现的效果应该使用CSS来实现。比如，辅助性的图片，即那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片，应该使用CSS中background属性来定义。

类似这样:

background: url(images/bg_poem．jpg)#FEFEFE no-repeat right bottom;

这样做除了将表现与结构彻底相分离外，还有另外一个好处——使页面更具有易用性，更有亲和力。比如:盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。