今天有人和我談一個(gè)網(wǎng)站開發(fā)項(xiàng)目，當(dāng)說到具體要求時(shí)，他給我來了這么一句“用web2.0來制作符合標(biāo)準(zhǔn)的頁面”，我當(dāng)場(chǎng)暈倒，心想你不懂也別裝啊，不過最后還是決定進(jìn)行一次面談，可是他的這句話卻引起了我對(duì)網(wǎng)站重構(gòu)的重新思考。

web2.0是一個(gè)歷史性概念，是一個(gè)階段，更是一種互聯(lián)網(wǎng)模式，但絕對(duì)不是一種技術(shù)；而web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，它的核心是內(nèi)容，結(jié)構(gòu)，表現(xiàn)和行為的徹底分離(我自己將內(nèi)容也添加進(jìn)去了)，這對(duì)于以后改版和維護(hù)是十分方便的，如果要說對(duì)瀏覽速度有多么大的改進(jìn)，我不感茍同。

說到重構(gòu)，當(dāng)然得從內(nèi)容說起，因?yàn)槿魏蔚母倪M(jìn)都是為了更好的顯示內(nèi)容。那什么是內(nèi)容？?jī)?nèi)容應(yīng)該是頁面實(shí)際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等，從本質(zhì)上簡(jiǎn)潔地講，內(nèi)容就是指最原始的數(shù)據(jù)，是構(gòu)成頁面的基礎(chǔ)。

下面就得主要說頁面重點(diǎn)–結(jié)構(gòu)了，因?yàn)槊撾x了結(jié)構(gòu)的內(nèi)容幾乎不能使用，一個(gè)具有良好語義的結(jié)構(gòu)會(huì)使內(nèi)容更加具有邏輯性和易用性，所以說內(nèi)容和結(jié)構(gòu)是無法分割的整體，也許這也是標(biāo)準(zhǔn)未把內(nèi)容分離明確指出的原因。

一提起結(jié)構(gòu)，很多人大腦里就迸出“用div+css布局”的概念，我先不管這種意識(shí)的對(duì)錯(cuò)，因?yàn)槲乙恢焙芟矚g先弄清楚一個(gè)事物的概念：結(jié)構(gòu)目前劃分為兩部分，一是語義結(jié)構(gòu)，二是代碼結(jié)構(gòu)，語義結(jié)構(gòu)是靠標(biāo)簽自身的語義產(chǎn)生(附注：關(guān)于到底什么是語義，我一直沒有大搞明白，不過現(xiàn)在自己可以明確的一點(diǎn)是：語義含有部分結(jié)構(gòu)的概念，卻不等于結(jié)構(gòu)，同樣語義也和樣式無關(guān))，代碼結(jié)構(gòu)則是面向程序的，需要人工的參與。下來說我對(duì)上面那種意識(shí)的看法,首先我認(rèn)為布局這個(gè)詞匯是不應(yīng)該出現(xiàn)的，也許這都是IE惹的禍，另外必須糾正一個(gè)錯(cuò)誤的概念，標(biāo)準(zhǔn)是提倡用xhtml+css而不是div+css，這個(gè)就得歸罪于那些推廣標(biāo)準(zhǔn)的朋友了，不能為快速取得成效而迷惑學(xué)習(xí)者啊，開個(gè)玩笑。既然說到div與table了，我想順便說下二者的區(qū)別：div有語義且是面向代碼結(jié)構(gòu)的，它代表部分,用于在文檔中定義一個(gè)分割,通過分割來展現(xiàn)xml化的節(jié)點(diǎn)結(jié)構(gòu),通過分割產(chǎn)生具有結(jié)構(gòu)的行,關(guān)于節(jié)點(diǎn)和行的具體應(yīng)用，在即將出世的xhtml2.0中已經(jīng)出現(xiàn)了，它用section代表節(jié)點(diǎn)，line表示行；table的重心應(yīng)該是在產(chǎn)生數(shù)據(jù)列，顯示表狀數(shù)據(jù)，而絕不應(yīng)該用來劃分結(jié)構(gòu)。但這時(shí)候可能有朋友要提出問題了：如果顯示的表狀數(shù)據(jù)是單列多行，那么使用ul/ol不也可以實(shí)現(xiàn)嗎？假如你真有如此疑問，那我得說你不清楚表狀數(shù)據(jù)的概念了，表狀數(shù)據(jù)指擴(kuò)展趨勢(shì)是列的數(shù)據(jù)，所以當(dāng)你預(yù)計(jì)擴(kuò)展的趨勢(shì)是產(chǎn)生列的時(shí)候，哪怕它只有一列也應(yīng)該使用table，而不能運(yùn)用列表，因?yàn)閡l/ol的重心是在產(chǎn)生數(shù)據(jù)級(jí)上,對(duì)于二者的正確把握和應(yīng)用,關(guān)鍵得看個(gè)人對(duì)未來頁面結(jié)構(gòu)的預(yù)見性.

不往下說了，好象有點(diǎn)跑題了，回到結(jié)構(gòu)上來，根據(jù)設(shè)計(jì)給出的效果圖，我們?cè)陂_始之前應(yīng)通盤考慮所有要素, 爭(zhēng)取用通用的結(jié)構(gòu)來獲得相同的效果, 而不是不斷定義那些小巧的div單元，從而努力達(dá)到設(shè)計(jì)中最理想的境界：前臺(tái)閉著眼睛都能知道后臺(tái)輸出的是什么樣的xhtml結(jié)構(gòu)代碼，為了這一目的我們就必須得固定xhtml，具體實(shí)現(xiàn)方法就是用H系列來劃分頁面的大結(jié)構(gòu)，用div來模塊化局部區(qū)域。

在模塊化局部的時(shí)候，由于xhtml中有意義的專用元素可能不夠用，且它又不能象XML那樣創(chuàng)建自己的元素，所以就必須通過添加id或class來賦予它們額外的意義。關(guān)于二者的區(qū)別，簡(jiǎn)單來講就是，id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。具體說來，在XHTML的結(jié)構(gòu)中，科學(xué)的方法是大結(jié)構(gòu)尤其外圍元素盡量用id,而class盡量在結(jié)構(gòu)內(nèi)部使用,使其具有通用性,但最好不要讓class包含id,它倆之間有點(diǎn)類似于父子關(guān)系，但絕不理解為就是父子或爺孫關(guān)系。

關(guān)于表現(xiàn)和行為我不想多說什么，只進(jìn)行一下簡(jiǎn)單的描述：沒有添加樣式的純xhtml結(jié)構(gòu)是有UE的，但沒有UI，這就使得css的地位永遠(yuǎn)都不可能超越xhtml的核心地位，當(dāng)然我并沒有說表現(xiàn)不重要，因?yàn)榫臀覀�(gè)人而言，一份沒有調(diào)料的燒烤或一部沒有藝術(shù)的電影對(duì)我都是沒有吸引力的。至于javascript，隨著對(duì)ajax的接觸和了解，越來越體會(huì)到了它的特效作用，不過站在行為層而言，它的使用更多是和CSS結(jié)合在一起的，這也就讓你在學(xué)習(xí)CSS時(shí)多了另一個(gè)任務(wù)。

http://wz818.com