|
Chapter 2 web標(biāo)準(zhǔn)真的是要完全不用表格？
好像是在2005年的時(shí)候，一篇叫做《把表格從你的網(wǎng)頁(yè)中扔出去》（找不到文章的鏈接了，但確實(shí)有這篇文章）的在線文章，似乎給了人們一個(gè)錯(cuò)覺(jué)，要符合標(biāo)準(zhǔn)，那么表格在網(wǎng)頁(yè)中就完全不能使用了。必須用div來(lái)代替。也許div+css這個(gè)概念就是這樣被想當(dāng)然的創(chuàng)造出來(lái)的（源自表格布局）。但事實(shí)上，web標(biāo)準(zhǔn)并不是完全不允許使用表格。而是要求摒棄使用表格來(lái)布局的做法。同時(shí)，也不再使用布局這個(gè)概念。而是提倡結(jié)構(gòu)與表現(xiàn)分離。這時(shí)，就有一些人會(huì)產(chǎn)生一個(gè)疑惑，如果說(shuō)xhtml代表結(jié)構(gòu)，css用來(lái)控制表現(xiàn)，那么，布局該如何解決？相信現(xiàn)在接觸web標(biāo)準(zhǔn)的朋友不會(huì)再有這個(gè)疑惑了吧？結(jié)構(gòu)和表現(xiàn)結(jié)合起來(lái)就形成了布局。既然不能用表格來(lái)做布局了，那么表格還有什么用呢？似乎很多人忘了表格在html中的原始定義——展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)表格。舉個(gè)例子，某學(xué)校班級(jí)的期中考試成績(jī)表，這種數(shù)據(jù)，就是一個(gè)非常明顯的表格。web標(biāo)準(zhǔn)中絕對(duì)沒(méi)有要求你用div來(lái)模擬表格，那是非常蠢的做法。這幾天在經(jīng)典論壇上還看到有人產(chǎn)生這樣的疑惑，表格形式的格式化數(shù)據(jù)，用表格比用div要方便的多，他們搞不懂為什么一定要用div來(lái)表現(xiàn)表格，現(xiàn)在我告訴你答案了，該用表格展現(xiàn)數(shù)據(jù)的時(shí)候就要用表格。
Chapter 3 為什么要用web標(biāo)準(zhǔn)？怎么樣才算是符合web標(biāo)準(zhǔn)？
很多人會(huì)說(shuō)例如兼容性好、代碼易懂、代碼量小、結(jié)構(gòu)合理、甚至有人說(shuō)使用標(biāo)準(zhǔn)可以實(shí)現(xiàn)比表格更豐富的樣式等各種理由來(lái)支持web標(biāo)準(zhǔn)，而web標(biāo)準(zhǔn)也的確具有這些優(yōu)點(diǎn)，然而，這些卻并非web標(biāo)準(zhǔn)真正要做的。
并非把表格換成div就是符合web標(biāo)準(zhǔn)了。也并非使用xhtml和css就是符合web標(biāo)準(zhǔn)。甚至就算你的代碼能夠通過(guò)w3c的驗(yàn)證，也很難說(shuō)它就完全符合web標(biāo)準(zhǔn)。事實(shí)上，web標(biāo)準(zhǔn)的最終目標(biāo)不是為了讓人容易看懂網(wǎng)頁(yè)如果僅僅是為了讓人容易看懂，那么表格布局已經(jīng)足夠了。它的最終目標(biāo)是為了讓計(jì)算機(jī)能夠讀懂網(wǎng)頁(yè)。看下面幾個(gè)例子：
表格布局的一段代碼：
<table width="50%">
<tr>
<td width="30%"></td>
<td width="30%"><font size="3">web</font>標(biāo)準(zhǔn)的概念</td>
<td width="40%">如何實(shí)現(xiàn)<b>標(biāo)準(zhǔn)化制作</b></td>
</tr>
<tr>
<td colspan="3"><font color="red"><font size="3">web</font>標(biāo)準(zhǔn)在網(wǎng)頁(yè)中的使用</font></td>
</table>
web標(biāo)準(zhǔn)（XHTML/CSS）實(shí)現(xiàn)的一段代碼：
<h3><span>web</span>標(biāo)準(zhǔn)的概念</h3>
<h3>如何實(shí)現(xiàn)<em>標(biāo)準(zhǔn)化制作</em></h3>
<h3 class="important"><span>web</span>標(biāo)準(zhǔn)在網(wǎng)頁(yè)中的使用</td>
web標(biāo)準(zhǔn)(XML)實(shí)現(xiàn)的另一段代碼：
<articles>
<articletitle>web標(biāo)準(zhǔn)的概念</articletitle>
<articletitle em="4" emlegth="3">如何實(shí)現(xiàn)標(biāo)準(zhǔn)化制作</articletitle>
<articletitle level="important">web標(biāo)準(zhǔn)在網(wǎng)頁(yè)中的使用</articletitle>
<articles>
看過(guò)以上幾段代碼后，我們先來(lái)分析一下。第一段是表格布局的代碼，它把整塊分成了兩行，第一行用了三列，第一列是空的用于縮進(jìn)，后面兩列分別放了兩篇文章的標(biāo)題。其中的英文文字采用了不同于中文的字號(hào)。第二篇文章的標(biāo)題上還有一部分是加粗強(qiáng)調(diào)的。第二行則是一篇文章的標(biāo)題占用了整行，并且以紅色顯示文章標(biāo)題。在頁(yè)面展現(xiàn)出來(lái)之后，我們能夠明白下面的信息：第一篇文章是普通文章，第二篇文章中有一個(gè)概念是很重要的。而第三篇文章則非常重要。然而，在代碼中我們卻很難看出這一點(diǎn)。因?yàn)闆](méi)有人說(shuō)過(guò)加粗就一定是強(qiáng)調(diào)。也沒(méi)有人告訴我們紅色就一定表示重要（如果是在暗紅色背景下，它甚至表示不重要，光看代碼是不知道頁(yè)面展現(xiàn)出來(lái)是什么樣子的，是否重要自然無(wú)從判斷），在這段代碼中甚至沒(méi)有告訴我們，這幾段文字是文章標(biāo)題。
第二段代碼就要清楚的多了，首先，h3標(biāo)簽告訴我們，它是一個(gè)標(biāo)題。span標(biāo)簽完全沒(méi)有含義，會(huì)被分析器忽略掉。而em標(biāo)簽則表示強(qiáng)調(diào)。程序很容易明白它究竟是什么。最后一行指定的的類important則可以告訴分析器，這篇文章十分重要。
最后，我們?cè)倏吹谌沃械腦ML代碼，首先，articletitle已經(jīng)明明白白的告訴我們，它是文章標(biāo)題，多余的信息沒(méi)有了。事實(shí)上多數(shù)情況下是否強(qiáng)調(diào)一段文字中某一個(gè)部分對(duì)于分析器來(lái)說(shuō)并不重要。因此，加粗強(qiáng)調(diào)被放到了屬性里面。最后一條，level屬性非常明白告訴分析器，這個(gè)屬性定義的是文章的級(jí)別。而它的屬性important則告訴分析器，它的級(jí)別是重要。將來(lái)采用這種結(jié)構(gòu)，我們的網(wǎng)絡(luò)將會(huì)更加智能，而搜索引擎的搜索結(jié)果也將會(huì)更加準(zhǔn)確。當(dāng)然，好處遠(yuǎn)遠(yuǎn)不只是這些。
直到現(xiàn)在為止，第三段代碼要想真正完美實(shí)現(xiàn)并且兼容，仍然只能停留在我們的夢(mèng)想里。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) Web標(biāo)準(zhǔn)的web UI [1] 下一頁(yè) Web標(biāo)準(zhǔn)的web UI [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) Web標(biāo)準(zhǔn)的web UI [2]
