日期:2013-12-09  浏览次数:20734 次

 对于初学者,我们常看见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就一定有它的道理和缘由,问题出在哪里?

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