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

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

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

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

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

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

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

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

http://www.huatongnet.com