对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为

    1.内容

　　内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。留意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。

       忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者引见772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是晚期词人中的佼佼者，所作对后世影响甚大。注释(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的称颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行笼统化的归纳，突出渲染江花、江水红绿相映的明艳色彩，给人以光芒耀眼的强烈印象。其中，既有同色间的互相烘托，又有异色间的互相映托，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞赏与怀念，又形成一种悠远而又深长的神韵，把读者带入余情摇漾的境界中。


2.结构(Structure)

　　可以看到上面的文本信息本身曾经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。

标题 忆江南(1)
作者 唐.白居易
注释
江南好，风景旧曾谙。(2)
日出江花红胜火，春来江水绿如蓝，(3)
能不忆江南。
节1 作者引见
      772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是晚期词人中的佼佼者，所作对后世影响甚大。
节2 注释
列表
       (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
       (2)谙(音安)：熟悉。
       (3)蓝：蓝草，其叶可制青绿染料。
节3 品评
       此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的称颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行笼统化的归纳，突出渲染江花、江水红绿相映的明艳色彩，给人以光芒耀眼的强烈印象。其中，既有同色间的互相烘托，又有异色间的互相映托，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞赏与怀念，又形成一种悠远而又深长的神韵，把读者带入余情摇漾的境界中。

　　类似上面标题、作者、章、节、段落和列表，我们就把它称做结构。结构使内容愈加具有逻辑性，易用性。

2.表现(Presentation)

　　虽然定义了结构，但是内容还是原来的款式没有改变，例如标题字体没有变大，注释的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:

　　点击这里查看效果

　　噢，很明显，我们加了2种背景，将标题字体变大并居中，将小标题加粗并变成红色，等等等等。所有这些，都是“表现”的作用。它使你的内容看上去漂亮、可爱多了！笼统一点的比喻:内容是模特，结构标明头和四肢等各个部位，表现则是服装,将模特打扮得漂漂亮亮。(请原谅我用模特打比方，很多时候模特比web标准更具有吸引力。)

　　那么行为是什么？

3.行为(Behavior)

　　行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。

　　所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。笼统一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”,示意草图如下：

4.传统的HTML方法

　　传统的HTML3.2/4.0标签里既有控制结构的标签，例如<title>,<p>，又有控制表现的标签，例如<font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构标签与表现标签混杂在一同。

　　例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2><h3>来定义标题和大节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制造好页面。聪明些的设计师还采用CSS款式表来统一控制一些字体的表现。下面的代码是我们最熟悉不过的了：

<table border="0" width="100%"><tr><td align="center"><h1><font
color="#C61C18">忆江南</font></h1></td></tr></table>

　　传统的方法看上去并没有什么问题。(我们曾经很习惯了,从来没有想过会有什么问题。)但是既然W3C放弃HTML，推荐XHTML和XML就一定有它的道理和缘由，问题出在哪里？

　　问题就出在结构层和表现层混杂在一同！当我们只发布一些简单页