不夠語義網(wǎng)頁設(shè)計(jì)和語義的網(wǎng)頁制作

這個(gè)時(shí)代DIV+CSS已經(jīng)創(chuàng)造著新的神話，不久的將來，也許你所訪問的互聯(lián)網(wǎng)將不再出現(xiàn)Table。

作為一個(gè)身處2008年末的Web設(shè)計(jì)師，你是否好意思承認(rèn)自己的代碼中使用了Table，如果是，你是一個(gè)有勇氣的人，Web設(shè)計(jì)是個(gè)奇怪的行業(yè)，你可以將自己的網(wǎng)站設(shè)計(jì)得像晚報(bào)的分類廣告，或者樓道里的開鎖廣告，但千萬別讓人知道你使用了Table，在你的源代碼中發(fā)現(xiàn)Table就像一個(gè)銷售被人掀起褲腳發(fā)現(xiàn)穿了白襪子一樣。

Table是如此丑陋，臃腫，哪怕只顯示一段簡單的內(nèi)容，你也需要<table><tr><td>這三個(gè)基本的標(biāo)簽，每個(gè)標(biāo)簽里面還要加上一堆亂七八糟的屬性，不像<div>，既簡單，又整潔，又時(shí)尚，它和CSS珠聯(lián)璧合，琴瑟和諧，它們構(gòu)成最完美的Box模型，他們象現(xiàn)實(shí)中的箱子，你把東西放進(jìn)去，然后，很自由地對他們進(jìn)行排列，厭煩了一種布局，沒關(guān)系，簡單地改動(dòng)一下CSS定義，一種全新的布局便誕生了；不象Table，Table像食堂里的餐具柜，一排排，一列列，土里土氣，油膩膩的，象我們的父輩，邋遢，什么都往家里拿，胡亂堆在角落里，如果Div是小資，Table就是老三屆，他們不屬于這個(gè)時(shí)代。

也就是近幾年的事，至多不過三五年，W3C是一個(gè)人人都認(rèn)為重要但人人都不喜歡的組織，他們的官方網(wǎng)站十分丑陋，我敢說平生沒見過這么丑陋的網(wǎng)站，但他們的網(wǎng)站是為數(shù)不多的可以通過全部W3C標(biāo)準(zhǔn)驗(yàn)證的網(wǎng)站，這意味著，他們的網(wǎng)站在語法上，在結(jié)構(gòu)上，在可訪問性上是完美的，雖然依舊十分丑陋。不過這是笑談，W3C非常重要，否則微軟會(huì)把全體Web開發(fā)工程師帶到萬劫不復(fù)的境地，還好，Netscape死后，涅磐出Firefox，而Opera在Firefox橫空出世之后雖然沒得到任何好處，至少得到了精神上的支持，看到?jīng)]，終于有大哥出來收拾你。喬布斯復(fù)出后，蘋果重返昔日的光芒，這時(shí)人們才知道世界上還有一個(gè)叫做Safari的瀏覽器，所有這一切加在一起，讓W(xué)3C真正有了存在的必要。

W3C說，Table可以用來容納文字，格式文字，圖片，鏈接，表單，以及其它Table。..但是，Table不應(yīng)該單純用來做網(wǎng)頁布局（Tables should not be used purely as a means to layout document content），理由是，當(dāng)Web被非可視化設(shè)備渲染的時(shí)候，Table會(huì)出現(xiàn)問題，他們指定是屏幕閱讀器以及盲文瀏覽器，另外，Table在大型顯示設(shè)備上會(huì)強(qiáng)迫用戶左右滾動(dòng)，因此，Web設(shè)計(jì)者應(yīng)該使用CSS而不是Table。參見W3CHTML4.01關(guān)于Table的定義。W3C說這段話的時(shí)候，是1999年12月24日，那時(shí)盡管CSS早已誕生，但并沒有多少人使用，最初的Web像一個(gè)在線版的文檔，并沒有成為現(xiàn)在這樣的平臺(tái)，不需要過多過多地考慮布局問題，隨著互聯(lián)網(wǎng)第一次泡沫的形成，涌現(xiàn)出大量的門戶網(wǎng)站，門戶網(wǎng)站是Table布局的始作俑者，因?yàn)樗麄兊氖醉摫纫徽輬?bào)紙的所有版面拼接在一起還復(fù)雜，Table在這方面十分順手，結(jié)合colspan和rolspan，你幾乎能夠?qū)崿F(xiàn)任何復(fù)雜的版面。

這種布局風(fēng)格在2000年代初，一直到中期仍然十分流行，尤其國內(nèi)，在大為美的潛意識(shí)下，人們把所有能塞到一個(gè)頁面的東西都塞進(jìn)了首頁，Table就像一個(gè)舊時(shí)代的管家，把所有東西雖不能井井有序，但至少是一樣不少地編排起來。然而這樣的Web終于到了讓人厭惡的地步，隨著搜索，RSS訂閱，以及以博客為代表的個(gè)性化Web的出現(xiàn)，人們有更多渠道獲得信息，而不必去訪問那幾個(gè)讓人幾乎要暈過去的門戶的首頁，于是出現(xiàn)了一種清新的，輕量的Web風(fēng)，使用更簡單的布局，更明快的配色，大圖標(biāo)，大Banner，以及更容易閱讀的大字體，同時(shí)，在這個(gè)時(shí)候，CSS已經(jīng)非常成熟，而Firefox，Opera，Safari為代表的瀏覽器，在遵守W3C標(biāo)準(zhǔn)方面要遠(yuǎn)遠(yuǎn)好過IE，人們終于認(rèn)識(shí)到CSS的威力。因?yàn)镃SS在布局上，其核心是一個(gè)Box模型，人們必須為CSS找一個(gè)可以依附的容器對象。

Div成為幸運(yùn)者一方面因?yàn)樗焐褪荁ox的最佳原型，在語義上，Div代表頁面的一個(gè)區(qū)域，在外形上，它四四方方，更重要的是，它不像<P>或<a>那樣事先已經(jīng)被賦予特殊的語義（雖然它們也能用于Box模型）；另一方面，則出于人們對Table統(tǒng)治一個(gè)臃腫時(shí)代的憎惡，一個(gè)時(shí)代的結(jié)束，繼任者都會(huì)努力抹去舊時(shí)代的痕跡，那些舊時(shí)代的象征或代表的命運(yùn)多半如此，人們并不是簡單地忘卻它們，而是斷然劃清界限。

Table的一切不公平待遇就此開始。為什么說不公平，W3C不建議Table布局的時(shí)候，只說應(yīng)使用CSS代替，這是什么意思，Table不支持CSS嗎？當(dāng)然支持，而且，由于Table作為老牌的HTML對象，它的地位曾如此重要，任何瀏覽器都對Table提供了最完美的支持，包括CSS支持。當(dāng)人們擁抱Div的時(shí)候，似乎忘記了Table也是Box，而且是一個(gè)擁有多個(gè)內(nèi)格的Box，Table作為一個(gè)整體，和Div在Box模型方面沒有任何區(qū)別，而它的內(nèi)格，除了Margin之外，仍然是一個(gè)Box，內(nèi)格不含Margin概念這是應(yīng)該理解的。Div很優(yōu)秀這不必說，然而當(dāng)人們說Div+CSS的時(shí)候，似乎暗示著Table無法CSS，這是天大的誤會(huì)。

Div支持的所有CSS屬性，Table全部支持，事實(shí)上，在Div大紅大紫之前，那些Div的早期采用者曾信心不足地表示，Table能做到，Div都能，而他們也為自己的話付出了代價(jià)，企圖在Div中實(shí)現(xiàn)垂直居中的人明白我的意思，企圖在IE6中不經(jīng)CSSHack而實(shí)現(xiàn)100%Div布局的人更明白我的意思。100%Height問題，幾個(gè)Div之間的寬度自適應(yīng)問題，相信任何從事Div+CSS設(shè)計(jì)的人會(huì)遇到。Table在這方面的優(yōu)勢并不是因?yàn)樗旧矶嗝磧?yōu)秀，而是因?yàn)樗吓疲瑳]有瀏覽器敢忽視，也因?yàn)樗奶匦栽救绱耍藗儼l(fā)明表格，是因?yàn)橄Ｍ麛?shù)據(jù)顯示得整齊，就這么簡單

然而，為什么Table后來背上那么多的惡名？Div擁護(hù)者對Table的責(zé)難不外乎以下幾條。

代碼臃腫：你至少需要寫下<table><tr><td>這三個(gè)標(biāo)簽之后，才能開始真正的內(nèi)容，另外，Table的各種標(biāo)簽中還包含了復(fù)雜的屬性定義，而Div只需<div>一個(gè)標(biāo)簽。

頁面渲染性能問題：瀏覽器需要將整個(gè)表格完全讀完后才會(huì)開始渲染。

不利于搜索引擎優(yōu)化：搜索引擎喜歡內(nèi)容與修飾分開。

可訪問性差：屏幕朗讀軟件和盲文瀏覽器無法很好地理解Table中的內(nèi)容。

不夠語義（Semantic）：我們需要語義的Web。

第1條：代碼臃腫

首先，Table里面唯一無法用CSS定義的屬性只有Cellspacing，Cellpadding幾個(gè)，其它屬性都可以并且應(yīng)當(dāng)使用CSS，這樣，剩下的，就是<table><tr><td>和<div>的對決，我相信一個(gè)動(dòng)輒幾十K大小的網(wǎng)頁，即使使用了幾十個(gè)Table，因此多出來的代碼也可以忽略不計(jì)，那些埋怨Table代碼臃腫的人其實(shí)該檢查自己的編碼習(xí)慣，能將Table寫得十分臃腫的人，寫Div相比也未必會(huì)簡潔到哪里。

第2條：頁面渲染性能問題

我使用一臺(tái)2004年的筆記本電腦，1.6G的CPU與1G內(nèi)存，這種配置下，看不出Table布局和Div布局在頁面渲染上有任何速度差別，其實(shí)這點(diǎn)差別即使有，相對網(wǎng)絡(luò)本身的延遲也可以忽略。

第3條：不利于搜索引擎優(yōu)化

如果你盡可能使用CSS而不是Table的屬性，前面說了，產(chǎn)生的代碼和Div的差別也不會(huì)很大，搜索引擎會(huì)歧視<table>標(biāo)簽嗎，這種說法的依據(jù)我至今并沒有找到。

第4條：可訪問性差

這是Table固有的缺陷，不過多數(shù)Div+CSS的擁躉似乎并不是基于這個(gè)原因才排斥Table。

第5條：不夠語義

語義Web的含義要深遠(yuǎn)得多，并不是僅僅在Table和Div上糾纏，即使W3C，也并沒有規(guī)定Table只能用來顯示表格數(shù)據(jù)，很多在Table的語義上進(jìn)行糾纏的人，其實(shí)不妨再等等HTML5，那才是真正的語義。

本文的目的不是讓你丟棄Div投身Table，相反，如果Div能滿足你的設(shè)計(jì)需要，Div仍是選，但沒必要避諱Table，否則會(huì)走入另外一個(gè)極端。很多使用Div無法簡單實(shí)現(xiàn)的設(shè)計(jì)，仍可以使用Table，當(dāng)然，不管使用什么，都應(yīng)該用CSS將內(nèi)容與修飾分離。Div+CSS和Table+CSS都是合法的設(shè)計(jì)，誰更簡單就用誰。根據(jù)我的經(jīng)驗(yàn)，當(dāng)你能預(yù)見你的內(nèi)容的格式，對你即將加入的內(nèi)容有能力完全控制其顯示格式時(shí)，應(yīng)當(dāng)使用Div+CSS；當(dāng)你即將加入的內(nèi)容是不固定的，你無法預(yù)見其格式，如果不想讓頁面坍塌，使用Table+CSS是一種保險(xiǎn)的做法

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

標(biāo)題名稱：不夠語義網(wǎng)頁設(shè)計(jì)和語義的網(wǎng)頁制作
當(dāng)前地址：http://bm7419.com/news21/322521.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站改版、網(wǎng)站排名、商城網(wǎng)站、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)