對于初學者，我們常看見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就一定有它的道理和原因，問題出在哪里？
問題就出在結構層和表現層混雜在一起！當我們只發布一些簡單頁面，沒什么影響。當我們發布了大量頁面，問題就來了。
第一個問題是：如何改版。假如由于某些原因我們需要把背景替換成黑色，邊框變成1px黃色，文字變成白色，所有文字居中。你可能就要一頁一頁的修改。好，你說你用了CSS，那么恭喜你，你可以直接修改樣式表，輕松實現這樣簡單的改版。(復雜改版暫且不提。)
第二個問題是：數據的利用。本質上講所有頁面信息都是數據。當我發布了唐詩300首，宋詞100首，就是一個可觀的數據庫，這個應該不難理解。那么好，是數據就存在數據查詢，處理和交換的問題。假如我所有的頁面上都不需要顯示“品評”這一小節；假如我要將頁面數據轉成Excel格式；假如我要打印一個干凈內容的頁面(不要背景、導航、版權等不相干信息)怎么辦？傳統的解決方法是：一頁一頁刪除“品評”小節；一頁一頁地拷貝粘貼到excel，一頁一頁地制作"打印友好頁"。這樣做顯然不是有效率的辦法
實際上，第一個問題實質是批量改變"表現"。由于傳統HTML方法的結構并不明顯，甚至可以視作只有表現，我們就象設計時尚雜志那樣精心畫出每一頁。嚴謹的設計師可以控制到每1px的細節。內容與表格緊密的嵌套、混雜在一起，結構只是用表現來表現出來，而不是用標簽。這種設計方法下，任何內容的變化，結構的變化都會影響整個頁面的表現，都需要一點一點細節的修改。CSS的出現，一開始似乎就是用來解決"批量改表現"的問題。大部分的網頁設計師已經能夠熟練使用CSS來控制字體的大小顏色，超鏈接的效果，表格的邊框等等，已經體會到CSS批量改變表現的效率
第二個問題則是無法避免。由于結構和表現混雜在一起(內容被n層的表格拆分)，你無法判斷哪個td里面到那個td是你需要的數據，無法剝離其中夾雜的<font><b>的標簽。上例中，從哪里開始是正文？哪里開始是“品評”小節?哪些是附加信息不需要打印？我們都無法讓電腦自己去判斷，唯一的方法是人工判斷，手工處理。結構和表現混雜在一起，頁面就好比是一張圖片，你無法讓電腦搜索其中的文字。(哦，我聽見有人說：我的站點有全文檢索啊。恩，我想說的是，第一,這樣的檢索效率非常低，你需要濾過整個內容，匹配到你的"檢索關鍵字"，例如，我要查找作者李白，搜索引擎會檢索頁面所有文字才能告訴你這頁里面含有"李白"，而且不一定出現在作者上。第二，這樣的檢索對數據處理和交換毫無用處。例如我要將所有作者李白的詩摘出來，我要給所有作者增加一個肖像圖片，這樣的搜索毫無幫助。)
對于第二個問題，要如何解決呢？解決的辦法就是：結構清晰化，將內容、結構與表現相分離。
5.web標準推薦的方法
對于內容、結構與表現相分離，最早是在軟件開發架構理論中提出來的。QQ用過吧，QQ面板的變更皮膚就是內容不變，外觀表現在變化；還有winamp的skin也是這種原理的典型體現。其實我們大多數的設計師已經在實踐中都接觸到。我們的動態信息發布系統，實際上就是基于這個原理制作的，設計師只需要設計模版，程序員將數據(標題、作者、發布日期、摘要、相關文章、相關圖片等等)從數據庫中讀出，嵌入你的模板，形成一個新的頁面再展示給瀏覽者。其中的內容已經被結構化后分別保存在數據庫的不同字段中。例如查找作者，我們只要在作者字段中搜索，這樣的效率就提高很多了。
上面都是有賴于程序，如果頁面文檔本身就能實現表現和結構相分離，那么數據的交換和再利用不就更方便了。嘿嘿，其實XML就是奔著這個方向去的，XML允許你自己定制結構標識，還提供了XSLT用來格式化、查詢和處理文檔內容。例如上面的詩詞頁面，用XML寫出來的代碼就象這樣：
<標題>憶江南</標題>
<作者>唐.白居易</作者>
<正文>江南好...</正文>
<作者介紹>772－846 ，字樂天...</作者介紹>
<注釋>據《樂府雜錄》...</注釋>
<品評>此詞寫江南春色...</品評>
這些<標題><作者>都是自己定義的標簽，這樣文檔結構非常清晰，查詢和處理也很簡單。啊哦，說遠了。還是回到目前能應用的web標準方法上。
web標準方法目前推薦大家使用XHTML+CSS來制作網站。目標是使結構與表現徹底相分離。
就是說，XHTML的標簽只用來定義文檔的結構，所有涉及表現的東西通通剝離出來，把它放到一個單獨的文件里，這個單獨的文件就是CSS。(CSS的好處上面已經講到，可以批量處理表現)。采用這種方法后，上面的第二個問題中的3個假設困難就迎刃而解。我們可以利用樣式表將所有"品評"結構不顯示(DISPLAY:
none);我們可以根據頁面結構標簽將內容自動導入到excel；我們可以設計一個專門的打印樣式表，隱藏掉所有附加的信息，只打印干凈的內容。就這么簡單。
現在你明白了吧，為什么我們反對用表格設計布局。原因是<table>用于布局的時候，它是一個控制表現的標簽。混雜在內容和結構中，使我們的內容數據無法再利用。結構與表現相分離帶來的好處主要有：
1.數據的多樣顯示。通過不同的樣式表適應不同的設備，做到內容與設備無關
2.保持整個站點的視覺一致性變得非常簡單，修改樣式表就可以輕松改版;
3.由于結構清晰，數據的集成、更新和處理更加方便靈活；
4.更有意義的搜索。
好了，說到這，關于表現與結構相分離的概念，您是否有一點理解？如果還是模模糊糊，也不要緊，自己實際制作體驗一把，在實踐中逐步領會。學習web標準需要循序漸進，阿捷和您一樣，也在努力學習中。
要一個符合wbe標準的實際例子？查看本頁原代碼，講"表現"概念的那個例子就是用CSS+DIV實現的。樣式表的內容直接在本頁head區，沒有另外單獨調用，便于你的查看:)
新聞熱點
疑難解答
