1 對(duì)于web標(biāo)準(zhǔn)和W3C XHTML規(guī)范的理解

按照習(xí)慣的理解，這兩個(gè)概念似乎都是指的一個(gè)東西（就是咱們?cè)谶@個(gè)版里討論的這些個(gè)"高深理論“^_^）。但我認(rèn)為，事實(shí)上從技術(shù)的角度上講，這兩個(gè)事物幾乎沒有任何相關(guān)性。web標(biāo)準(zhǔn)簡而言之就是將頁面的結(jié)構(gòu)、表現(xiàn)和行為各自獨(dú)立實(shí)現(xiàn)，更通俗的講就是如今招聘時(shí)流行的語言”div css"。但W3C XHTML的任何一個(gè)版本都沒有對(duì)web標(biāo)準(zhǔn)理念作限制。很顯然的，我們可以用xhtml 1.1寫出一個(gè)table定位的網(wǎng)頁。說到這里，或許會(huì)認(rèn)為我講了一堆廢話。但任何一項(xiàng)技術(shù)，只有當(dāng)你對(duì)基礎(chǔ)概念有足夠清楚的熟悉的時(shí)候，你才會(huì)正確的使用它。我從下面兩個(gè)方面，來談?wù)勅缃馱eb標(biāo)準(zhǔn)應(yīng)用走向的兩個(gè)歧途：

第一種情況很簡單。自以為只要使用了XHTML CSS就是Web標(biāo)準(zhǔn)了。頁面里面遍地是class和id。肆意的為每個(gè)細(xì)節(jié)都單獨(dú)定義class。這樣的頁面和傳統(tǒng)的html的區(qū)別就是img標(biāo)簽里多了個(gè)"/"。事實(shí)上這樣子還不如回到傳統(tǒng)的html，至少我可以輕松的使用font，而不用總是跟查字典一樣去查樣式表。另一種更隱蔽的隨意使用CSS的我在以后講。

第二種情況我覺得比較難理解一些，即試圖用各種紛繁復(fù)雜的div嵌套和css語句來實(shí)現(xiàn)你所想要的表現(xiàn)。很簡單的一個(gè)例子就在我剛看到的一個(gè)帖子" 不用切圖的頁面圓角"。首先我想肯定的是這個(gè)創(chuàng)意確實(shí)很不錯(cuò)，使用CSS功能將圓角“畫”出來。為此，設(shè)計(jì)者必須在相應(yīng)的位置加上一大段如下的代碼：

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

但是，這里嚴(yán)重違反了Web標(biāo)準(zhǔn)的基本概念——結(jié)構(gòu)與表現(xiàn)要分離。因?yàn)樗鼘⒂糜诳刂凭W(wǎng)頁表現(xiàn)的代碼放在結(jié)構(gòu)文檔中了。或許你會(huì)說它事實(shí)上還是將真正的表現(xiàn)代碼放在CSS里的。但我認(rèn)為這是一個(gè)偷換概念。因?yàn)橐陨线@些b標(biāo)簽跟網(wǎng)頁結(jié)構(gòu)無關(guān)，它們都是一些空標(biāo)簽。也就是說，它的存在并不是為了將某些內(nèi)容放在文檔結(jié)構(gòu)需要的位置。因此它們對(duì)于文檔結(jié)構(gòu)來說只是一些廢代碼。

另外一個(gè)例子可能更加隱蔽。之前我有在alistapart.com上看到過如何實(shí)現(xiàn)網(wǎng)頁三通欄的文章，其原理大概就是使用三四個(gè)div相互嵌套。我認(rèn)為這也是一個(gè)違反Web標(biāo)準(zhǔn)思想的做法。因?yàn)檫@些div標(biāo)簽在代碼中擺放的次序已經(jīng)不單純是為了結(jié)構(gòu)的需要，而是用于網(wǎng)頁的表現(xiàn)。

當(dāng)然，我承認(rèn)，以上的觀點(diǎn)在一定程度是鉆牛角尖（但反過來說，非要實(shí)現(xiàn)非圖片圓角不也是在鉆牛角尖么，呵呵）。有些時(shí)候結(jié)構(gòu)和表現(xiàn)并不是那么輕易的就能分開的，我們?yōu)榱藢?shí)現(xiàn)一些豐富的表現(xiàn)不得不讓結(jié)構(gòu)去遷就（想想<div style="clear:both" />的用處）。但是知道什么是對(duì)什么是錯(cuò)是很重要的。即使我們有時(shí)候不得不做一些錯(cuò)事。

最后，我想聲明的是，我并不是"非圖片圓角"是無意義或是錯(cuò)誤的。我也很佩服作者的聰明和靈感。我覺得這樣的技術(shù)研究就如同以前用CSS畫國旗一樣，對(duì)CSS技術(shù)的熟練把握很有幫助。但是，它的用途也應(yīng)該僅和CSS國旗一樣局限，不應(yīng)該在實(shí)際應(yīng)用中采納。因?yàn)樗�違反Web標(biāo)準(zhǔn)的基本原則。

2 HTML標(biāo)簽的語義

如今Web標(biāo)準(zhǔn)都被通俗的叫做“div css”或者“層布局”。我不反對(duì)這種便宜行事的叫法。但是這樣會(huì)陷入一個(gè)誤區(qū)：即大量的使用div標(biāo)簽作為結(jié)構(gòu)元素。事實(shí)上這是一種更高級(jí)的div濫用(Jeffrey Zeldman在《網(wǎng)站重構(gòu)》一書中提到）。

HTML為我們提供了相當(dāng)豐富的標(biāo)簽，每個(gè)標(biāo)簽都有它各自的含義。我認(rèn)為在設(shè)計(jì)時(shí)，除了遵循HTML語法以外，應(yīng)該充分利用并遵守各標(biāo)簽的“語義”。如標(biāo)題文字應(yīng)該包含在h1-h6中，大段的文字內(nèi)容應(yīng)該由<p>進(jìn)行分段而不是<br />，列表項(xiàng)應(yīng)該放在ul或ol或dl中，表格形式的數(shù)據(jù)應(yīng)該仍然用table布局。

為什么要這樣做？一個(gè)很有說服力的原因是，保證在用戶去掉CSS顯示的情況下，網(wǎng)頁能夠盡量有效的將內(nèi)容的結(jié)構(gòu)層次顯示出來。假如全部用div，當(dāng)去掉CSS之后，整個(gè)網(wǎng)頁就失去了層次，只剩下一些雜亂的文字碎片。這并不符合Web標(biāo)準(zhǔn)對(duì)低配置兼容性的要求。

我下面具體的列舉一下我對(duì)一些標(biāo)簽的語義的理解：

p br
先說個(gè)最簡單的。分段要用p標(biāo)簽而不是用br（甚至連續(xù)兩個(gè)<br />）。這個(gè)似乎不用多說。但是有時(shí)候我們不得不放棄這個(gè)原則。一個(gè)常見的例子是論壇發(fā)帖，假如我想分段，便打回車。而如此傳輸?shù)胶笈_(tái)并顯示出來的，顯然就是用<br />分段的。

table th
由于大力宣揚(yáng)div css的結(jié)果，似乎現(xiàn)在誰用table布局誰就是未開化的土著。但我認(rèn)為這種觀點(diǎn)是不正確的。table的含義是表格，因此凡是應(yīng)該以表格形式出現(xiàn)的數(shù)據(jù)，仍然應(yīng)該用table布局。簡單的例子是班級(jí)同學(xué)的花名冊(cè)，包括姓名學(xué)號(hào)性別等等，這明顯是一個(gè)表格形式的數(shù)據(jù)，因此應(yīng)該用table布局。另一個(gè)比較值得探討的例子是，blog里面的日歷導(dǎo)航。我曾經(jīng)有見過一個(gè)blog程序，它的日歷導(dǎo)航里的各個(gè)日期，從1號(hào)到30號(hào)全用div套好，再使用float:left樣式7個(gè)一排的排出當(dāng)月的日歷。當(dāng)我取消瀏覽器的CSS顯示之后，日歷的那部分則從1號(hào)到30號(hào)一豎排下來。我認(rèn)為這是不對(duì)的。因?yàn)槿諝v應(yīng)該是一個(gè)表格形式的數(shù)據(jù)，因此仍然應(yīng)該用table布局。當(dāng)取消css之后，應(yīng)該仍然按照一排7個(gè)的樣子歸成一個(gè)表格。

th則是另一個(gè)會(huì)被忽視的標(biāo)簽。由于CSS的萬能，所有的表格單元都可以用td加一個(gè)class屬性搞定。但是從語義上講，一些表格單元應(yīng)該用th標(biāo)簽。比如上文說到的日歷表格，里面的“MON TUE WED... SUN”這些標(biāo)識(shí)星期的單元，就應(yīng)該用th而不是td。

h1-h6
對(duì)于h1-h6標(biāo)簽，從語義上講，它們應(yīng)該適用于所有標(biāo)題文字。因此，一些如<div class="diary-title>的寫法都是多余的，直接寫成<h1>，然后直接對(duì)h1而不是.diary-title定義CSS，不是一樣的效果么？當(dāng)然，這個(gè)規(guī)矩我也不能定得太死，因?yàn)橛袝r(shí)候標(biāo)題部分的結(jié)構(gòu)元素并不能簡單的用一個(gè)h1就能解決的。但我最多用類似<h1><span></span></h1>的方法將標(biāo)題的結(jié)構(gòu)嵌套得更復(fù)雜，以滿足表現(xiàn)的需要。

但這里會(huì)出現(xiàn)一個(gè)語義上的分歧。h1究竟該理解為一級(jí)標(biāo)題呢還是理解為1號(hào)字體大小的標(biāo)題。我通常理解為一級(jí)標(biāo)題，一級(jí)標(biāo)題下再有小標(biāo)題就用h2。但是事實(shí)上回顧HTML設(shè)計(jì)之初，h1-h6后面的數(shù)字更多的被理解為控制標(biāo)題文字大小的。用h3或許只是為了使用三號(hào)大小的字體，而并非它就是三級(jí)標(biāo)題。否則一級(jí)標(biāo)題全用h1，個(gè)個(gè)都是斗大的字，又不得不用CSS來控制字號(hào)，感覺很累贅。所以，這是一個(gè)待商榷的問題。

ul ol
凡是需要羅列條款的，都應(yīng)該用ul或者ol，而不是用p。比如招聘廣告里的職位需求，比如注重事項(xiàng)，比如操作步驟說明。此外一個(gè)流行的用法是網(wǎng)頁的導(dǎo)航菜單也用ul li來列舉，然后再用CSS控制其排列方式。

應(yīng)該要補(bǔ)充的是，別忘了li里面還可以再用ul或ol，形成第二級(jí)列表。

dl dt dd
這是一組幾乎被人忘記的標(biāo)簽，但Jeffrey Zeldman在《網(wǎng)站重構(gòu)》中大力推崇對(duì)它們的使用。dl應(yīng)該是“defining list（或是definition list？有知道的朋友請(qǐng)告訴我）”的全稱，一個(gè)典型的用法是字典的詞條。單詞的名字放在dt里面，單詞的解釋放在dd里面。而alistapart.com網(wǎng)站更加高明的，將右側(cè)欄整個(gè)定義為dl，每個(gè)單元的標(biāo)題用dt，而該單元的內(nèi)容則用dd。

img
img標(biāo)簽本身也沒啥好說的。只是想老生常談一個(gè)，即只有當(dāng)確實(shí)這個(gè)元素是內(nèi)容里必須的圖片的時(shí)候才使用img，否則應(yīng)該用CSS定義為樣式。如插圖，頭像，表情圖標(biāo)，這些是內(nèi)容里必須出現(xiàn)的圖片，用img。而其他的比如標(biāo)題的背景圖，列表項(xiàng)前面的小icon，這些都不應(yīng)該用img標(biāo)簽。

span
span如今大有和div并駕齊驅(qū)的風(fēng)頭。但是事實(shí)上我認(rèn)為我們還是應(yīng)該遵從它最初的使用。我個(gè)人的理解，span最初就是用來帶class或者style屬性的。它本身不具有明確的語義。因此在文本流中，我們需要對(duì)某些文字做樣式上的改變，就用span括起來。比如有些字需要加紅，我就用<span class="red">。

但是值得注重的是，這樣又有可能犯之前h1里面提到的問題。因?yàn)橛行┪淖值臉邮狡鋵?shí)是有現(xiàn)成的標(biāo)簽的，比如<strong>、<sub>等，我們也應(yīng)該適當(dāng)?shù)慕o它們一些機(jī)會(huì)。

a
a是控制超連接的標(biāo)簽。但有些非凡的情況，我們不一定喜歡用它。比如需要彈出一個(gè)小窗口。我沒怎么留心，但我想有些設(shè)計(jì)師會(huì)將onclick直接定義到“播放”小圖標(biāo)的<img>標(biāo)簽里。我個(gè)人認(rèn)為還是應(yīng)該在img外面加一個(gè)a，然后將onclick定義到a里面，并記住在js函數(shù)最后寫上return false。假如可以，該a標(biāo)簽的href屬性也應(yīng)該寫上彈出窗口的URL,保證用戶在禁止JS的情況下仍能夠有效的打開頁面。

我暫時(shí)就列出這么多。

最后再總結(jié)一下遵循HTML標(biāo)簽語義的重要性。Web標(biāo)準(zhǔn)的其中一個(gè)要求是低配置的兼容性：當(dāng)用戶禁用圖片、禁用CSS或禁用JS的時(shí)候，我們?nèi)阅軌蜃屗�有效的瀏覽網(wǎng)頁內(nèi)容。眾所周知強(qiáng)制alt屬性就是為禁用圖片時(shí)的兼容性作考慮。而正確的遵循HTML標(biāo)簽的語義，則是保證禁用CSS時(shí)的兼容性。只有當(dāng)正確使用了HTML標(biāo)簽，我們的網(wǎng)頁在“CSS裸奔”的時(shí)候，才會(huì)仍然讓人看得出哪里是導(dǎo)航菜單，哪里是文章標(biāo)題，日歷表格也不會(huì)分崩離析。