中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

對(duì)于初學(xué)者，我們�？匆妛eb標(biāo)準(zhǔn)的好處之一是“能做到表現(xiàn)和結(jié)構(gòu)相分離”，那這到底是什么意思呢？我將以一個(gè)實(shí)際的例子來詳細(xì)說明。首先我們必須先明白一些基本的概念：內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為。

1.內(nèi)容

內(nèi)容就是頁面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。比如一個(gè)不包含輔助的信息,比如導(dǎo)航菜單、裝飾性圖片等。舉個(gè)例子，有下面一段文本是我們頁面要表現(xiàn)的信息。

2.結(jié)構(gòu)(Structure)

可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團(tuán)，難以閱讀和理解，我們必須給它格式化一下。把它分成標(biāo)題、作者、章、節(jié)、段落和列表等。

標(biāo)題

憶江南(1)
作者 唐.白居易
正文
江南好，風(fēng)景舊曾諳。(2)
日出江花紅勝火，春來江水綠如藍(lán)，(3)
能不憶江南。
節(jié)1作者介紹
772－846 ，字樂天，太原(今屬山西)人。唐德宗朝進(jìn)士，元和三年(808)拜左拾遺，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽，自號(hào)醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人中的佼佼者，所作對(duì)后世影響甚大。
節(jié)2注釋
列表
(1)據(jù)《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。又名《望江南》、《夢(mèng)江南》等。分單調(diào)、雙調(diào)兩體。單調(diào)二十七字，雙凋五十四字，皆平韻。
(2)諳(音安)：熟悉。
(3)藍(lán)：藍(lán)草，其葉可制青綠染料。
節(jié)3品評(píng)
此詞寫江南春色，首句“江南好”，以一個(gè)既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的贊頌之意與向往之情也盡寓其中。同時(shí)，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結(jié)句“能不憶江南”，并與之相關(guān)闔。次句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”，并非得之傳聞，而是作者出牧杭州時(shí)的親身體驗(yàn)與親身感受。這就既落實(shí)了“好”字，又照應(yīng)了“憶”字，不失為勾通一篇意脈的精彩筆墨。三、四兩句對(duì)江南之“好”進(jìn) 　行形象化的演繹，突出渲染江花、江水紅綠相映的明艷色彩，給人以光彩奪目的強(qiáng)烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對(duì)江南春色的無限贊嘆與懷念，又造成一種悠遠(yuǎn)而又深長(zhǎng)的韻味，把讀者帶入余情搖漾的境界中。

類似上面標(biāo)題、作者、章、節(jié)、段落和列表，我們就把它稱做結(jié)構(gòu)。結(jié)構(gòu)使內(nèi)容更加具有邏輯性，易用性。

2.表現(xiàn)(Presentation)

雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，例如標(biāo)題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西，我們稱之為“表現(xiàn)”。下面是對(duì)上面文本用表現(xiàn)處理過后的效果:

噢，很明顯，我們加了2種背景，將標(biāo)題字體變大并居中，將小標(biāo)題加粗并變成紅色，等等等等。所有這些，都是“表現(xiàn)”的作用。它使你的內(nèi)容看上去漂亮、可愛多了！形象一點(diǎn)的比喻:內(nèi)容是模特，結(jié)構(gòu)標(biāo)明頭和四肢等各個(gè)部位，表現(xiàn)則是服裝,將模特打扮得漂漂亮亮。(請(qǐng)?jiān)�諒我用模特打比方，很多時(shí)候模特比web標(biāo)準(zhǔn)更具有吸引力。)

那么行為是什么？

3.行為(Behavior)

行為就是對(duì)內(nèi)容的交互及操作效果。例如，我們最熟悉不過的JavaScript。使用JavaScript我們可以使內(nèi)容動(dòng)起來，可以判斷一些表單提交，可以相應(yīng)你的一些操作。這個(gè)我就不再舉例子了。

所有HTML和XHTML頁面就是由“結(jié)構(gòu)、表現(xiàn)和行為”這三方面組成的。抽象一點(diǎn)理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層，作后再對(duì)它們做點(diǎn)“行為”,示意草圖如下：

4.傳統(tǒng)的HTML方法

傳統(tǒng)的HTML3.2/4.0標(biāo)簽里既有控制結(jié)構(gòu)的標(biāo)簽，例如<title>,<p>，又有控制表現(xiàn)的標(biāo)簽，例如<font>,<b>，還有本意用于結(jié)構(gòu)后來被濫用于控制表現(xiàn)的標(biāo)簽，例如：<h1>,<table>等。結(jié)構(gòu)標(biāo)簽與表現(xiàn)標(biāo)簽混雜在一起。

例如上面舉例的頁面，你可能很熟練的2-5個(gè)表格來控制邊框、背景和文本居中；用<h2><h3>來定義標(biāo)題和小節(jié)標(biāo)題；用<font>和<b>來控制字體大小、顏色和粗體。輕而易舉地就能制作好頁面。聰明些的設(shè)計(jì)師還采用CSS樣式表來統(tǒng)一控制一些字體的表現(xiàn)。下面的代碼是我們最熟悉不過的了：

傳統(tǒng)的方法看上去并沒有什么問題。(我們已經(jīng)很習(xí)慣了,從來沒有想過會(huì)有什么問題。)但是既然W3C放棄HTML，推薦XHTML和XML就一定有它的道理和原因，問題出在哪里？

問題就出在結(jié)構(gòu)層和表現(xiàn)層混雜在一起！當(dāng)我們只發(fā)布一些簡(jiǎn)單頁面，沒什么影響。當(dāng)我們發(fā)布了大量頁面，問題就來了。

第一個(gè)問題是：如何改版。假如由于某些原因我們需要把背景替換成黑色，邊框變成1px黃色，文字變成白色，所有文字居中。你可能就要一頁一頁的修改。好，你說你用了CSS，那么恭喜你，你可以直接修改樣式表，輕松實(shí)現(xiàn)這樣簡(jiǎn)單的改版。(復(fù)雜改版暫且不提。)

第二個(gè)問題是：數(shù)據(jù)的利用。本質(zhì)上講所有頁面信息都是數(shù)據(jù)。當(dāng)我發(fā)布了唐詩300首，宋詞100首，就是一個(gè)可觀的數(shù)據(jù)庫，這個(gè)應(yīng)該不難理解。那么好，是數(shù)據(jù)就存在數(shù)據(jù)查詢，處理和交換的問題。假如我所有的頁面上都不需要顯示“品評(píng)”這一小節(jié)；假如我要將頁面數(shù)據(jù)轉(zhuǎn)成excel格式；假如我要打印一個(gè)干凈內(nèi)容的頁面(不要背景、導(dǎo)航、版權(quán)等不相干信息)怎么辦？傳統(tǒng)的解決方法是：一頁一頁刪除“品評(píng)”小節(jié)；一頁一頁地拷貝粘貼到excel，一頁一頁地制作"打印友好頁"。這樣做顯然不是有效率的辦法。

實(shí)際上，第一個(gè)問題實(shí)質(zhì)是批量改變"表現(xiàn)"。由于傳統(tǒng)HTML方法的結(jié)構(gòu)并不明顯，甚至可以視作只有表現(xiàn)，我們就象設(shè)計(jì)時(shí)尚雜志那樣精心畫出每一頁。嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)師可以控制到每1px的細(xì)節(jié)。內(nèi)容與表格緊密的嵌套、混雜在一起，結(jié)構(gòu)只是用表現(xiàn)來表現(xiàn)出來，而不是用標(biāo)簽。這種設(shè)計(jì)方法下，任何內(nèi)容的變化，結(jié)構(gòu)的變化都會(huì)影響整個(gè)頁面的表現(xiàn)，都需要一點(diǎn)一點(diǎn)細(xì)節(jié)的修改。CSS的出現(xiàn)，一開始似乎就是用來解決"批量改表現(xiàn)"的問題。大部分的網(wǎng)頁設(shè)計(jì)師已經(jīng)能夠熟練使用CSS來控制字體的大小顏色，超鏈接的效果，表格的邊框等等，已經(jīng)體會(huì)到CSS批量改變表現(xiàn)的效率。

第二個(gè)問題則是無法避免。由于結(jié)構(gòu)和表現(xiàn)混雜在一起(內(nèi)容被n層的表格拆分)，你無法判斷哪個(gè)td里面到那個(gè)td是你需要的數(shù)據(jù)，無法剝離其中夾雜的<font><b>的標(biāo)簽。上例中，從哪里開始是正文？哪里開始是“品評(píng)”小節(jié)?哪些是附加信息不需要打�。课覀兌紵o法讓電腦自己去判斷，唯一的方法是人工判斷，手工處理。結(jié)構(gòu)和表現(xiàn)混雜在一起，頁面就好比是一張圖片，你無法讓電腦搜索其中的文字。(哦，我聽見有人說：我的站點(diǎn)有全文檢索啊。恩，我想說的是，第一,這樣的檢索效率非常低，你需要濾過整個(gè)內(nèi)容，匹配到你的"檢索關(guān)鍵字"，例如，我要查找作者李白，搜索引擎會(huì)檢索頁面所有文字才能告訴你這頁里面含有"李白"，而且不一定出現(xiàn)在作者上。第二，這樣的檢索對(duì)數(shù)據(jù)處理和交換毫無用處。例如我要將所有作者李白的詩摘出來，我要給所有作者增加一個(gè)肖像圖片，這樣的搜索毫無幫助。)

對(duì)于第二個(gè)問題，要如何解決呢？解決的辦法就是：結(jié)構(gòu)清晰化，將內(nèi)容、結(jié)構(gòu)與表現(xiàn)相分離。

5.web標(biāo)準(zhǔn)推薦的方法

對(duì)于內(nèi)容、結(jié)構(gòu)與表現(xiàn)相分離，最早是在軟件開發(fā)架構(gòu)理論中提出來的。QQ用過吧，QQ面板的變更皮膚就是內(nèi)容不變，外觀表現(xiàn)在變化；還有winamp的skin也是這種原理的典型體現(xiàn)。其實(shí)我們大多數(shù)的設(shè)計(jì)師已經(jīng)在實(shí)踐中都接觸到。我們的動(dòng)態(tài)信息發(fā)布系統(tǒng)，實(shí)際上就是基于這個(gè)原理制作的，設(shè)計(jì)師只需要設(shè)計(jì)模版，程序員將數(shù)據(jù)(標(biāo)題、作者、發(fā)布日期、摘要、相關(guān)文章、相關(guān)圖片等等)從數(shù)據(jù)庫中讀出，嵌入你的模板，形成一個(gè)新的頁面再展示給瀏覽者。其中的內(nèi)容已經(jīng)被結(jié)構(gòu)化后分別保存在數(shù)據(jù)庫的不同字段中。例如查找作者，我們只要在作者字段中搜索，這樣的效率就提高很多了。

上面都是有賴于程序，如果頁面文檔本身就能實(shí)現(xiàn)表現(xiàn)和結(jié)構(gòu)相分離，那么數(shù)據(jù)的交換和再利用不就更方便了。嘿嘿，其實(shí)XML就是奔著這個(gè)方向去的，XML允許你自己定制結(jié)構(gòu)標(biāo)識(shí)，還提供了XSLT用來格式化、查詢和處理文檔內(nèi)容。例如上面的詩詞頁面，用XML寫出來的代碼就象這樣：

這些<標(biāo)題><作者>都是自己定義的標(biāo)簽，這樣文檔結(jié)構(gòu)非常清晰，查詢和處理也很簡(jiǎn)單。啊哦，說遠(yuǎn)了。還是回到目前能應(yīng)用的web標(biāo)準(zhǔn)方法上。

web標(biāo)準(zhǔn)方法目前推薦大家使用XHTML+CSS來制作網(wǎng)站。目標(biāo)是使結(jié)構(gòu)與表現(xiàn)徹底相分離。

就是說，XHTML的標(biāo)簽只用來定義文檔的結(jié)構(gòu)，所有涉及表現(xiàn)的東西通通剝離出來，把它放到一個(gè)單獨(dú)的文件里，這個(gè)單獨(dú)的文件就是CSS。(CSS的好處上面已經(jīng)講到，可以批量處理表現(xiàn))。采用這種方法后，上面的第二個(gè)問題中的3個(gè)假設(shè)困難就迎刃而解。我們可以利用樣式表將所有"品評(píng)"結(jié)構(gòu)不顯示(DISPLAY: none);我們可以根據(jù)頁面結(jié)構(gòu)標(biāo)簽將內(nèi)容自動(dòng)導(dǎo)入到excel；我們可以設(shè)計(jì)一個(gè)專門的打印樣式表，隱藏掉所有附加的信息，只打印干凈的內(nèi)容。就這么簡(jiǎn)單。

現(xiàn)在你明白了吧，為什么我們反對(duì)用表格設(shè)計(jì)布局。原因是<table>用于布局的時(shí)候，它是一個(gè)控制表現(xiàn)的標(biāo)簽。混雜在內(nèi)容和結(jié)構(gòu)中，使我們的內(nèi)容數(shù)據(jù)無法再利用。結(jié)構(gòu)與表現(xiàn)相分離帶來的好處主要有：

• 1.數(shù)據(jù)的多樣顯示。通過不同的樣式表適應(yīng)不同的設(shè)備，做到內(nèi)容與設(shè)備無關(guān)
• 2.保持整個(gè)站點(diǎn)的視覺一致性變得非常簡(jiǎn)單，修改樣式表就可以輕松改版;
• 3.由于結(jié)構(gòu)清晰，數(shù)據(jù)的集成、更新和處理更加方便靈活；
• 4.更有意義的搜索。

好了，說到這，關(guān)于表現(xiàn)與結(jié)構(gòu)相分離的概念，您是否有一點(diǎn)理解？如果還是模模糊糊，也不要緊，自己實(shí)際制作體驗(yàn)一把，在實(shí)踐中逐步領(lǐng)會(huì)。學(xué)習(xí)web標(biāo)準(zhǔn)需要循序漸進(jìn)，阿捷和您一樣，也在努力學(xué)習(xí)中。

要一個(gè)符合web標(biāo)準(zhǔn)的實(shí)際例子？查看本頁原代碼，講"表現(xiàn)"概念的那個(gè)例子就是用CSS+DIV實(shí)現(xiàn)的。樣式表的內(nèi)容直接在本頁head區(qū)，沒有另外單獨(dú)調(diào)用，便于你的查看:)

出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論