对于初学者，我们常看见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)
虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:
忆江南(1)
唐.白居易
江南好，风景旧曾谙。(2)
日出江花红胜火，春来江水绿如蓝，(3)
能不忆江南。
作者介绍
772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
注释
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
(2)谙(音安)：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
品评
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
噢，很明显，我们加了2种背景，将标题字体变大并居中，将小标题加粗并变成红色，等等等等。所有这些，都是“表现”的作用。它使你的内容看上去漂亮、可爱多了！形象一点的比喻:内容是模特，结构标明头和四肢等各个部位，表现则是服装,将模特打扮得漂漂亮亮。(请原谅我用模特打比方，很多时候模特比web标准更具有吸引力。)
那么行为是什么？
3.行为(Behavior)
行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。
所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”,示意草图如下：
4.传统的HTML方法
传统的HTML3.2/4.0标签里既有控制结构的标签，例如,<p>，又有控制表现的标签，例如<font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构标签与表现标签混杂在一起。<br>例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2><h3>来定义标题和小节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制作好页面。聪明些的设计师还采用CSS样式表来统一控制一些字体的表现。下面的代码是我们最熟悉不过的了：<br><table border="0" width="100%"><tr><td align="center"><h1><font color="#C61C18">忆江南</font></h1></td></tr></table> <br>传统的方法看上去并没有什么问题。(我们已经很习惯了,从来没有想过会有什么问题。)但是既然W3C放弃HTML，推荐XHTML和XML就一定有它的道理和原因，问题出在哪里？<br>问题就出在结构层和表现层混杂在一起！当我们只发布一些简单页面，没什么影响。当我们发布了大量页面，问题就来了。<br>第一个问题是：如何改版。假如由于某些原因我们需要把背景替换成黑色，边框变成1px黄色，文字变成白色，所有文字居中。你可能就要一页一页的修改。好，你说你用了CSS，那么恭喜你，你可以直接修改样式表，轻松实现这样简单的改版。(复杂改版暂且不提。)<br>第二个问题是：数据的利用。本质上讲所有页面信息都是数据。当我发布了唐诗300首，宋词100首，就是一个可观的数据库，这个应该不难理解。那么好，是数据就存在数据查询，处理和交换的问题。假如我所有的页面上都不需要显示“品评”这一小节；假如我要将页面数据转成excel格式；假如我要打印一个干净内容的页面(不要背景、导航、版权等不相干信息)怎么办？传统的解决方法是：一页一页删除“品评”小节；一页一页地拷贝粘贴到excel，一页一页地制作"打印友好页"。这样做显然不是有效率的办法。<br>实际上，第一个问题实质是批量改变"表现"。由于传统HTML方法的结构并不明显，甚至可以视作只有表现，我们就象设计时尚杂志那样精心画出每一页。严谨的设计师可以控制到每1px的细节。内容与表格紧密的嵌套、混杂在一起，结构只是用表现来表现出来，而不是用标签。这种设计方法下，任何内容的变化，结构的变化都会影响整个页面的表现，都需要一点一点细节的修改。CSS的出现，一开始似乎就是用来解决"批量改表现"的问题。大部分的网页设计师已经能够熟练使用CSS来控制字体的大小颜色，超链接的效果，表格的边框等等，已经体会到CSS批量改变表现的效率。<br>第二个问题则是无法避免。由于结构和表现混杂在一起(内容被n层的表格拆分)，你无法判断哪个td里面到那个td是你需要的数据，无法剥离其中夹杂的<font><b>的标签。上例中，从哪里开始是正文？哪里开始是“品评”小节?哪些是附加信息不需要打印？我们都无法让电脑自己去判断，唯一的方法是人工判断，手工处理。结构和表现混杂在一起，页面就好比是一张图片，你无法让电脑搜索其中的文字。(哦，我听见有人说：我的站点有全文检索啊。恩，我想说的是，第一,这样的检索效率非常低，你需要滤过整个内容，匹配到你的"检索关键字"，例如，我要查找作者李白，搜索引擎会检索页面所有文字才能告诉你这页里面含有"李白"，而且不一定出现在作者上。第二，这样的检索对数据处理和交换毫无用处。例如我要将所有作者李白的诗摘出来，我要给所有作者增加一个肖像图片，这样的搜索毫无帮助。)<br>情缘.教程_网 [http://Www.XiuGoo.Com]<br>对于第二个问题，要如何解决呢？解决的办法就是：结构清晰化，将内容、结构与表现相分离。<br>5.web标准推荐的方法<br>对于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的。QQ用过吧，QQ面板的变更皮肤就是内容不变，外观表现在变化；还有winamp的skin也是这种原理的典型体现。其实我们大多数的设计师已经在实践中都接触到。我们的动态信息发布系统，实际上就是基于这个原理制作的，设计师只需要设计模版，程序员将数据(标题、作者、发布日期、摘要、<br></td></tr></table>
<!--[diy=diycontentbottom]--><div id="diycontentbottom" class="area"></div><!--[/diy]-->
<script src="data/cache/home.js?R1y" type="text/javascript"></script>
<div id="click_div"><table cellpadding="0" cellspacing="0" class="atd">
<tr></tr>
</table>
<script type="text/javascript">
function errorhandle_clickhandle(message, values) {
if(values['id']) {
showCreditPrompt();
show_click(values['idtype'], values['id'], values['clickid']);
}
}
</script>
</div>
<!--[diy=diycontentclickbottom]--><div id="diycontentclickbottom" class="area"></div><!--[/diy]-->
</div>
<div class="o cl ptm pbm">
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=favorite&type=article&id=21478&handlekey=favoritearticlehk_21478" id="a_favorite" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr ofav">收藏</a>
<a href="https://bbs.weiying.cn/home.php?mod=spacecp&ac=share&type=article&id=21478&handlekey=sharearticlehk_21478" id="a_share" onclick="showWindow(this.id, this.href, 'get', 0);" class="oshr">分享</a>
<a href="misc.php?mod=invite&action=article&id=21478" id="a_invite" onclick="showWindow('invite', this.href, 'get', 0);" class="oshr oivt">邀请</a>
</div>
</div>
<!--[diy=diycontentrelatetop]--><div id="diycontentrelatetop" class="area"></div><!--[/diy]-->
<!--[diy=diycontentrelate]--><div id="diycontentrelate" class="area"></div><!--[/diy]-->
<div id="comment" class="bm">
<div class="bm_h cl">
<h3>最新评论</h3>
</div>
<div id="comment_ul" class="bm_c"><form id="cform" name="cform" action="portal.php?mod=portalcp&ac=comment" method="post" autocomplete="off">
<div class="tedt">
<div class="area">
<textarea name="message" rows="3" class="pt" id="message" onkeydown="ctrlEnter(event, 'commentsubmit_btn');"></textarea>
</div>
</div>
<input type="hidden" name="portal_referer" value="portal.php?mod=view&aid=21478#comment">
<input type="hidden" name="referer" value="portal.php?mod=view&aid=21478#comment" />
<input type="hidden" name="id" value="0" />
<input type="hidden" name="idtype" value="" />
<input type="hidden" name="aid" value="21478">
<input type="hidden" name="formhash" value="58d91f8e">
<input type="hidden" name="replysubmit" value="true">
<input type="hidden" name="commentsubmit" value="true" />
<p class="ptn"><button type="submit" name="commentsubmit_btn" id="commentsubmit_btn" value="true" class="pn"><strong>评论</strong></button></p>
</form>
</div>
</div>
<!--[diy=diycontentcomment]--><div id="diycontentcomment" class="area"></div><!--[/diy]-->
</div>
<div class="sd pph">
<div class="drag">
<!--[diy=diyrighttop]--><div id="diyrighttop" class="area"></div><!--[/diy]-->
</div>
<div class="bm">
<div class="bm_h cl">
<h2>相关分类</h2>
</div>
<div class="bm_c">
<ul class="xl xl2 cl"><li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=21">设计资讯</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=22">平面设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=23">标志设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=24">空间设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=25">工业设计</a></li>
<li><a href="https://bbs.weiying.cn/portal.php?mod=list&catid=26">网页设计</a></li>
</ul>
</div>
</div>
<div class="drag">
<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
</div>
</div>
</div>
<div class="wp mtn">
<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
</div>
<input type="hidden" id="portalview" value="1"> </div>
<div id="ft" class="wp cl">
<div id="flk" class="y">
<p>
<a href="//wpa.qq.com/msgrd?v=3&uin=8828254&site=微赢网络技术论坛&menu=yes&from=discuz" target="_blank" title="QQ"><img src="static/image/common/site_qq.jpg" alt="QQ" /></a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?mod=misc&action=showdarkroom" >小黑屋</a><span class="pipe">|</span><a href="topic-sitemap.html" target="_blank" >最新主题</a><span class="pipe">|</span><a href="https://bbs.weiying.cn/forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><strong><a href="http://bbs.weiying.cn" target="_blank">微赢网络技术论坛</a></strong>
( <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备08020429号</a> )<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a66c064273122db3a05de72f6cd924eb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
<p class="xs0">
GMT+8, 2024-9-29 11:27<span id="debuginfo">
, Processed in 0.216964 second(s), 12 queries
, Gzip On, MemCache On.
</span>
</p>
</div>
<div id="frt">
<p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> <em>X3.5</em></p>
<p class="xs0">© 2001-2023 <a href="https://code.dismall.com/" target="_blank">Discuz! Team</a>.</p>
</div></div>
<script src="home.php?mod=misc&ac=sendmail&rand=1727580438" type="text/javascript"></script>
<div id="scrolltop">
<span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span>
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
</body>
</html>
|
