XHTML 結(jié)構(gòu)化之二：案例分析：W3school 的結(jié)構(gòu)化標(biāo)記
無論如何，不要跳過本節(jié)。閱讀本章將增進(jìn)你的技能，為你的網(wǎng)頁減肥，并且使你對(duì)標(biāo)記與設(shè)計(jì)之間的差異有更清晰的認(rèn)識(shí)。本章中的理念是易于學(xué)習(xí)的，但是卻能極大的提高網(wǎng)站的性能，以及設(shè)計(jì)、制作和更新網(wǎng)站的便利性。
在本節(jié)，你將學(xué)到如何撰寫合乎邏輯的、緊湊的標(biāo)記，使得你有能力將帶寬流量降低50%左右，在減少服務(wù)器負(fù)擔(dān)和壓力的同時(shí)，減少網(wǎng)站的加載時(shí)間。通過去除那些表現(xiàn)元素，并改掉那些沒有任何好處的壞習(xí)慣，我們就可以達(dá)到上述的目的。
這些壞習(xí)慣折磨著網(wǎng)絡(luò)中的許多站點(diǎn)，特別是那些將 CSS 代碼與主要基于表格的布局混合在一起的站點(diǎn)。這種做法笨拙且不經(jīng)濟(jì)，即使是對(duì)于那些在其他領(lǐng)域很有經(jīng)驗(yàn)的設(shè)計(jì)師來說。同時(shí)，出現(xiàn)這個(gè)問題的幾率是均等的，不論是那些手寫代碼的站點(diǎn)，還是利用可見編輯工具，比如 Dreamweaver 和 GoLive，來創(chuàng)建的站點(diǎn)。
本節(jié)會(huì)提出這些常見的錯(cuò)誤，這樣你就可以識(shí)別和防范它們，并且學(xué)會(huì)如何改正錯(cuò)誤。我們?cè)敿?xì)闡述唯一標(biāo)識(shí)符屬性 (id) - ，并展示它如何使你可以編寫極其緊湊的 XHTML 代碼，不論你創(chuàng)建的是混合布局還是純粹的 CSS 布局。
每個(gè)元素都必須結(jié)構(gòu)化嗎？
正如上一節(jié)中我們講到的那樣，每個(gè)元素都可以被結(jié)構(gòu)化，CSS 可使得一個(gè)有序或無序的列表顯示為徹頭徹尾的導(dǎo)航欄，其中還擁有反轉(zhuǎn)按鈕效果。文檔的內(nèi)容可以通過普通的元素進(jìn)行標(biāo)記，這些元素通過特定的結(jié)構(gòu)化屬性標(biāo)志來指示出它們?cè)诰W(wǎng)站設(shè)計(jì)中所扮演的語義角色。
我們?cè)诠?2006 年創(chuàng)建了 W3School 的第一個(gè)中文測(cè)試版，我們?cè)谝婚_始就使用了 CSS 進(jìn)行布局，并使用 XHTML 來結(jié)構(gòu)化文檔。每一個(gè)其中的元素都是結(jié)構(gòu)化的，從標(biāo)題到列表，乃至段落。你可以在 w3school 的每個(gè)頁面看到具有反轉(zhuǎn)效果的首頁按鈕和二級(jí)菜單按鈕。下面是這兩個(gè)組件的 XHTML 代碼：
<div id="header"><h1><a href="/">w3school在線教程</a></h1></div> <div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="html教程">html教程</a></li> <li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li> <li id="b"><a href="/b.asp" title="瀏覽器腳本">瀏覽器腳本</a></li> <li id="s"><a href="/s.asp" title="服務(wù)器腳本">服務(wù)器腳本</a></li> <li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li> <li id="m"><a href="/m.asp" title="多媒體教程">多媒體教程</a></li> <li id="w"><a href="/w.asp" title="建站手冊(cè)">建站手冊(cè)</a></li> </ul> </div>
div、id 和其他幫手
如果被正確地使用，div 可以成為結(jié)構(gòu)化標(biāo)記的好幫手，而 id 則是一種令人驚訝的小工具，它使你有能力編寫極其緊湊的 XHTML，以及巧妙地利用 CSS，并通過標(biāo)準(zhǔn)文檔對(duì)象模型 (DOM) 向站點(diǎn)添加復(fù)雜精巧的行為。
W3C 在其最新的 XHTML2 草案的 XHTML 結(jié)構(gòu)模型中這樣定義 div：
div 元素，通過與 id、class 及 role 屬性配合，提供向文檔添加額外結(jié)構(gòu)的通用機(jī)制。這個(gè)元素不會(huì)將表現(xiàn)的風(fēng)格定義于內(nèi)容。所以，創(chuàng)作者可以通過將這個(gè)元素與樣式表、xml:lang、屬性等配合使用，使 XHTML 適應(yīng)他們自身的需求和口味。
div 是 division 的簡寫。division 意為分割、區(qū)域、分組。比方說，當(dāng)你將一系列的鏈接組合在一起，就形成了文檔的一個(gè) division。
確定結(jié)構(gòu)的通用機(jī)制
所有編寫 HTML 的人對(duì)段落和標(biāo)題這類常見的元素都很熟悉，但是有些人對(duì) div 就可能不那么熟悉了。在W3C的描述中我們可以找到理解 div 元素的關(guān)鍵，“一種添加結(jié)構(gòu)的通用機(jī)制�！�
在本站的首頁，我們將教程目錄列表封裝于一個(gè) div 之中，這是因?yàn)榻坛棠夸洸⒉皇钦牡娜魏卧氐囊徊糠�。其中，h2元素標(biāo)記每個(gè)教程的標(biāo)題，同時(shí) ul 列表元素標(biāo)記每個(gè)教程的詳細(xì)列表。但是在更大更具體的意義中，這個(gè)教程目錄扮演了一個(gè)結(jié)構(gòu)化的角色，即二級(jí)導(dǎo)航組件。為了強(qiáng)調(diào)這個(gè)角色，我們使用 navsecond 這個(gè) id 標(biāo)注這個(gè) div。
<div id="navsecond"> <h2>HTML教程</h2> <ul> <li><a href="/html/index.asp" title="HTML教程">HTML</a></li> <li><a href="/xhtml/index.asp" title="XHTML教程">XHTML</a></li> <li><a href="/css/index.asp" title="CSS教程">CSS</a></li> <li><a href="/tcpip/index.asp" title="TCP/IP教程">TCP/IP</a></li> </ul> <h2>XML教程</h2> <ul> <li><a href="/xml/index.asp" title="XML教程">XML</a></li> <li><a href="/xsl/xsl_languages.asp" title="XSL語言">XSL</a></li> ... ... ... ... </div>
你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名規(guī)則。但是語義的 (semantic) 或者元結(jié)構(gòu)化 (meta-structural) 的命名是最好的（即能夠解釋其中元素所執(zhí)行功能的命名）。
當(dāng)客戶決定使用藍(lán)色時(shí)，你會(huì)覺得將站點(diǎn)某部分命名為 orangebox（橙色框）會(huì)非常地傻。下面的這種情況中，你會(huì)覺得自己更傻，當(dāng)距離最后交付只有六個(gè)月時(shí)，你開始調(diào)校樣式表，卻怎么也想不起來 "Gladys"（格拉迪斯，女子名）到底代表導(dǎo)航區(qū)、側(cè)欄還是搜索框。
因此，將 id 標(biāo)注為 "menu"、"content" 或者 "searchform"會(huì)幫助你回憶。進(jìn)一步講，標(biāo)記不等同于設(shè)計(jì)，結(jié)構(gòu)良好的的頁面可以被格式化為你希望的任何樣子。這樣做的結(jié)果是，無論你使用純粹 CSS 布局或者混合布局，你都會(huì)徹底改掉使用表現(xiàn)標(biāo)記進(jìn)行思考和創(chuàng)作的習(xí)慣。
id Vs. class
id 屬性對(duì)于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣。它們都可以回溯到 HTML 時(shí)代。id 屬性為一個(gè)元素分配一個(gè)唯一的名字。每個(gè)名字只能在被賦予的頁面使用一次。（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個(gè) div 或者其他別的元素都不能使用這個(gè)名字。相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個(gè)段落都可以使用名為 "small" 或者"footnote" 的 class 名稱）。下面的標(biāo)記將有助于闡明 id 和 class 的差異：
<div id="searchform">Search form components go here. This section of the page is unique.</div> <div class="blogentry"> <h2>Today's blog post</h2> <p>Blog content goes here.</p> <p>Here is another paragraph of blog content.</p> <p>Just as there can be many paragraphs on a page, so too there may be many entries in a blog. A blog page could use multiple instances of the class "blogentry" (or any other class).</p> </div> <div class="blogentry"> <h2>Yesterday's blog post</h2> <p>In fact, here we are inside another div of class "blogentry."</p> <p>They reproduce like rabbits.</p> <p>If there are ten blog posts on this page, there might be ten divs of class "blogentry" as well.</p> </div>
在這個(gè)例子中，名為 searchform 的 div 被用來封裝包含搜索表單的頁面區(qū)域，而 div class="blogentry" 則用來封裝 blog 中的每個(gè)文章入口。在頁面中只有一個(gè)搜索表單，所以我們選擇 id 標(biāo)注這個(gè)唯一的組件。但是 blog 則擁有許多的（文章）入口，所以 class 屬性被應(yīng)用于這種情況。同樣地，新聞?wù)军c(diǎn)通常擁有多個(gè) div，這些 div 的 class 可以命名為 "newsitem" 或者別的什么。
然而不是所有的站點(diǎn)都需要 div。blog 站點(diǎn)可以僅僅使用 h1, H2, 和 h2 標(biāo)題和 <p> 段落，新聞?wù)军c(diǎn)也一樣。我們?cè)谶@里展示 class 為 blogentry 的 div，并不是鼓勵(lì)你在站點(diǎn)中塞滿 div，而僅僅是為了向你展示這個(gè)原則：在同一個(gè) HTML 文檔中，使用多次 class，但只能使用一次 id。
粘性貼紙理論
把 id 屬性比作粘性貼紙來進(jìn)行思考應(yīng)該是有幫助的。我會(huì)在冰箱上拍一張貼紙來提醒自己去買牛奶，電話上面也會(huì)貼一張，提醒我給一位逾期繳納的客戶打電話。還有一個(gè)，被貼在賬本夾上面，來提醒我這個(gè)月 15 號(hào)之前必須繳納的賬單。
id同樣會(huì)標(biāo)注文檔中的特殊區(qū)域，以便提醒你哪個(gè)區(qū)域需要特殊的處理，在這點(diǎn)上，id屬性與粘性貼紙是相似的。為了實(shí)現(xiàn)所謂的特殊處理，你需要使用這個(gè)特殊的id在樣式表中編寫若干規(guī)則，或者在JavaScript文件中添加幾行代碼。比方說，你的CSS文件中有一些特定的規(guī)則，這些規(guī)則只應(yīng)用于id名為searchform的div內(nèi)的元素。
當(dāng)某一 id 屬性作為一個(gè)有磁性的東西（磁鐵）被用于一系列特定的 CSS 規(guī)則時(shí)，它被稱為CSS選擇器。有許多創(chuàng)建選擇器的方法，不過 id 是很容易使用的，并且有多的用途。
id 的力量
id 屬性不可思議地強(qiáng)有力。它具有以下的能力：
- 作為樣式表選擇器，使我們有能力創(chuàng)作緊湊的最小化的 XHTML。
- 作為超文本的目標(biāo)錨，取代過時(shí)的 name 屬性。
- 作為從基于 DOM 的腳本來定位特定元素的方法。
- 作為對(duì)象元素的名稱。
- 作為一種綜合用途處理 (general purpose processing) 的工具（在 W3C 的例子中，“當(dāng)把數(shù)據(jù)從HTML頁面中提取到數(shù)據(jù)庫，或?qū)?HTML 文檔轉(zhuǎn)換為其他格式等情況下，作為域識(shí)別工具來使用�！保�。
id的規(guī)則
id 值必須以字母或者下劃線開始；不能以數(shù)字開始。雖然 W3C 驗(yàn)證不會(huì)捕獲這個(gè)錯(cuò)誤，但是 XML 解析器會(huì)的。同時(shí)，如果你將 id 與 JavaScript 在表單中配合使用，那么 id 名稱和值必須是合法的 JavaScript 變量�？崭窈瓦B字號(hào)，特別是連字號(hào)，是不被允許的。不僅如此，將下劃線用于 class 或者 id 名都不是個(gè)好主意，這是由于在 CSS2.0（以及某些瀏覽器）中的限制。
語義標(biāo)記和可用性
現(xiàn)在，我們已經(jīng)討論過了用途廣泛的 XHTML 元素（特別是 div 和 id），讓我們?cè)诳纯搓P(guān)于本站首頁的例子。首先讓我們回顧一下這個(gè)位于報(bào)頭位置的菜單：
<div id="navfirst"> <ul id="menu"> <li id="h"><a href="/h.asp" title="html教程">html教程</a></li> <li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li> <li id="b"><a href="/b.asp" title="瀏覽器腳本">瀏覽器腳本</a></li> <li id="s"><a href="/s.asp" title="服務(wù)器腳本">服務(wù)器腳本</a></li> <li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li> <li id="m"><a href="/m.asp" title="多媒體教程">多媒體教程</a></li> <li id="w"><a href="/w.asp" title="建站手冊(cè)">建站手冊(cè)</a></li> </ul> </div>
我們擁有七個(gè)鏈接，每個(gè)鏈接被分配一個(gè)id來對(duì)應(yīng)相應(yīng)的內(nèi)容：例如名為 h 的 id 對(duì)應(yīng) HTML 教程，以此類推。同時(shí)這些鏈接被封裝于名為 menu 的列表元素內(nèi)，名為 menu 的 id 標(biāo)明了這個(gè)列表的職能 - 一個(gè)菜單列表，而更外圍的名為 navfirst 的 div 則用來標(biāo)注頁面中的這個(gè)節(jié) (section)，將之與諸如主要內(nèi)容 (maincontent)、側(cè)欄 (sidebar) 和頁腳 (footer) 之類的元素區(qū)別開來。
div 和 ul 兩個(gè)元素提供了真實(shí)的結(jié)構(gòu)，即標(biāo)明了其中內(nèi)容的職能（導(dǎo)航欄）和它在文檔中所屬的位置（頁面的報(bào)頭位置）。相反地，傳統(tǒng)的表格布局無法提供有關(guān)數(shù)據(jù)的任何語義信息，同時(shí)會(huì)輕松地吃掉三倍的帶寬。
請(qǐng)注意這些標(biāo)記沒有包含img標(biāo)簽，所以不會(huì)牽扯到 width、height、background 或者 border 等等屬性。同時(shí)它沒有使用表格單元格，也不會(huì)涉及相關(guān)的一系列屬性。它非常地干凈小巧，同時(shí)提供了所有可供理解它的信息。
通過與 CSS 配合使用，這些標(biāo)記向網(wǎng)站訪問者提供了可靠的可快速加載的布局。同時(shí)也提供了為訪問者創(chuàng)造更靈活多樣的外觀的可能性。并且在無 CSS 的環(huán)境中，我們的結(jié)構(gòu)良好的標(biāo)記依然可以毫不混亂地提供所有的內(nèi)容。
目光敏銳的讀者也許已經(jīng)發(fā)現(xiàn)，a 元素中包含的文本并沒有被瀏覽器顯示出來，這也要?dú)w功于結(jié)構(gòu)化標(biāo)記與 CSS 的完美配合，使我們可以通過幾行 CSS 規(guī)則來定義一個(gè)觸發(fā)機(jī)制，當(dāng)用戶使用圖形瀏覽器時(shí)，他們會(huì)看到漂亮的導(dǎo)航按鈕，而當(dāng)用戶使用純文本的閱讀器時(shí)，他們也可以得到全部的文本，這樣，對(duì)所有的用戶來說，內(nèi)容都是一樣的。
并且，由于標(biāo)記沒有包含圖像和表格單元，這個(gè)導(dǎo)航欄組件可以在不改變結(jié)構(gòu)的情況下被站點(diǎn)內(nèi)的任何頁面所引用，同時(shí)賦予它不同的視覺效果。簡而言之，通過對(duì)代碼進(jìn)行模塊化，我們提高了代碼的復(fù)用性。