XHTML 結(jié)構(gòu)化之二：案例分析：W3Cschool 的結(jié)構(gòu)化標(biāo)記

<div id="header"><h1><a href="http://hgci.cn/">W3Cschool在線教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="http://hgci.cn/html/" title="html教程">html教程</a></li>
<li id="x"><a href="http://hgci.cn/xml/" title="XML教程">XML教程</a></li>
<li id="b"><a href="http://hgci.cn/javascript/" title="javascript教程">javascript教程</a></li>
<li id="s"><a href="http://hgci.cn/css/" title="css教程">css教程</a></li>
<li id="d"><a href="http://hgci.cn/webdevelopment/" title="前端開發(fā)規(guī)范">前端開發(fā)規(guī)范</a></li>
<li id="m"><a href="http://hgci.cn/jquery/" title="jQuery教程">jQuery教程</a></li>
<li id="w"><a href="http://hgci.cn/wzjszn/" title="網(wǎng)站建設(shè)指南">網(wǎng)站建設(shè)指南</a></li>
</ul>
</div>

div、id 和其他幫手

如果被正確地使用，div 可以成為結(jié)構(gòu)化標(biāo)記的好幫手，而 id 則是一種令人驚訝的小工具，它使你有能力編寫極其緊湊的 XHTML，以及巧妙地利用 CSS，并通過標(biāo)準(zhǔn)文檔對象模型 (DOM) 向站點(diǎn)添加復(fù)雜精巧的行為。

W3C 在其最新的 XHTML2 草案的 XHTML 結(jié)構(gòu)模型中這樣定義 div：

div 元素，通過與 id、class 及 role 屬性配合，提供向文檔添加額外結(jié)構(gòu)的通用機(jī)制。這個元素不會將表現(xiàn)的風(fēng)格定義于內(nèi)容。所以，創(chuàng)作者可以通過將這個元素與樣式表、xml:lang、屬性等配合使用，使 XHTML 適應(yīng)他們自身的需求和口味。

div 是 division 的簡寫。division 意為分割、區(qū)域、分組。比方說，當(dāng)你將一系列的鏈接組合在一起，就形成了文檔的一個 division。

確定結(jié)構(gòu)的通用機(jī)制

所有編寫 HTML 的人對段落和標(biāo)題這類常見的元素都很熟悉，但是有些人對 div 就可能不那么熟悉了。在W3C的描述中我們可以找到理解 div 元素的關(guān)鍵，“一種添加結(jié)構(gòu)的通用機(jī)制?！?/p>

在本站的首頁，我們將教程目錄列表封裝于一個 div 之中，這是因?yàn)榻坛棠夸洸⒉皇钦牡娜魏卧氐囊徊糠帧Ｆ渲?，h2元素標(biāo)記每個教程的標(biāo)題，同時 ul 列表元素標(biāo)記每個教程的詳細(xì)列表。但是在更大更具體的意義中，這個教程目錄扮演了一個結(jié)構(gòu)化的角色，即二級導(dǎo)航組件。為了強(qiáng)調(diào)這個角色，我們使用 navsecond 這個 id 標(biāo)注這個 div。

<div id="navsecond">

<h2>HTML教程</h2>
<ul>
<li><a href="http://hgci.cn/html/" title="HTML教程">HTML</a></li>
<li><a href="http://hgci.cn/xhtml/" title="XHTML教程">XHTML</a></li>
<li><a href="http://hgci.cn/css/" title="CSS教程">CSS</a></li>
<li><a href="http://hgci.cn/tcpip/" title="TCP/IP教程">TCP/IP</a></li>
</ul>

<h2>XML教程</h2>
<ul>
<li><a href="http://hgci.cn/xml/" title="XML教程">XML</a></li>
<li><a href="http://hgci.cn/xslt/xsl-languages.html" title="XSL語言">XSL</a></li>
... ...
... ...

</div>

在瀏覽器中的展示效果：

你可以使用任何命名。"Gladys" 和 "orangebox"都完全符合 XHTML 的命名規(guī)則。但是語義的 (semantic) 或者元結(jié)構(gòu)化 (meta-structural) 的命名是最好的（即能夠解釋其中元素所執(zhí)行功能的命名）。

當(dāng)客戶決定使用藍(lán)色時，你會覺得將站點(diǎn)某部分命名為 orangebox（橙色框）會非常地傻。下面的這種情況中，你會覺得自己更傻，當(dāng)距離最后交付只有六個月時，你開始調(diào)校樣式表，卻怎么也想不起來 "Gladys"（格拉迪斯，女子名）到底代表導(dǎo)航區(qū)、側(cè)欄還是搜索框。

因此，將 id 標(biāo)注為 "menu"、"content" 或者 "searchform"會幫助你回憶。進(jìn)一步講，標(biāo)記不等同于設(shè)計(jì)，結(jié)構(gòu)良好的的頁面可以被格式化為你希望的任何樣子。這樣做的結(jié)果是，無論你使用純粹 CSS 布局或者混合布局，你都會徹底改掉使用表現(xiàn)標(biāo)記進(jìn)行思考和創(chuàng)作的習(xí)慣。

id Vs. class

id 屬性對于 XHTML 并不新鮮；class 屬性或者 div 元素也一樣。它們都可以回溯到 HTML 時代。id 屬性為一個元素分配一個唯一的名字。每個名字只能在被賦予的頁面使用一次。（例如，假如你的頁面包含 id 為 content 的 div，那么另外一個 div 或者其他別的元素都不能使用這個名字。相反地，class 屬性可以被一遍又一遍地使用在頁面中（例如，頁面中的五個段落都可以使用名為 "small" 或者"footnote" 的 class 名稱）。下面的標(biāo)記將有助于闡明 id 和 class 的差異：

<div id="searchform">在這里搜索表單組件。頁面的這一部分是獨(dú)一無二的。</div>
<div class="blogentry">
   <h2>今天的博客文章</h2>
   <p>博客內(nèi)容在這里。</p>
   <p>下面是博客內(nèi)容的另一段。</p>
   <p>正如頁面上可能有很多段落一樣，博客中也可能有很多條目。 博客頁面可以使用類“blogentry”（或任何其他類）的多個實(shí)例。</p>
</div>

<div class="blogentry">
   <h2>昨天的博客文章</h2>
   <p>事實(shí)上，我們在這里又是一個層級的“blogentry”。</p>
   <p>它們像兔子一樣繁殖。</p>
   <p>如果在這個頁面上有十個博客文章，那么也可能會有十個類的“blogentry”。</p>
</div>

在瀏覽器中的展示效果：

在這個例子中，名為 searchform 的 div 被用來封裝包含搜索表單的頁面區(qū)域，而 div class="blogentry" 則用來封裝 blog 中的每個文章入口。在頁面中只有一個搜索表單，所以我們選擇 id 標(biāo)注這個唯一的組件。但是 blog 則擁有許多的（文章）入口，所以 class 屬性被應(yīng)用于這種情況。同樣地，新聞?wù)军c(diǎn)通常擁有多個 div，這些 div 的 class 可以命名為 "newsitem" 或者別的什么。

然而不是所有的站點(diǎn)都需要 div。blog 站點(diǎn)可以僅僅使用 h1, H2, 和 h2 標(biāo)題和 <p> 段落，新聞?wù)军c(diǎn)也一樣。我們在這里展示 class 為 blogentry 的 div，并不是鼓勵你在站點(diǎn)中塞滿 div，而僅僅是為了向你展示這個原則：在同一個 HTML 文檔中，使用多次 class，但只能使用一次 id。

粘性貼紙理論

把 id 屬性比作粘性貼紙來進(jìn)行思考應(yīng)該是有幫助的。我會在冰箱上拍一張貼紙來提醒自己去買牛奶，電話上面也會貼一張，提醒我給一位逾期繳納的客戶打電話。還有一個，被貼在賬本夾上面，來提醒我這個月 15 號之前必須繳納的賬單。

id同樣會標(biāo)注文檔中的特殊區(qū)域，以便提醒你哪個區(qū)域需要特殊的處理，在這點(diǎn)上，id屬性與粘性貼紙是相似的。為了實(shí)現(xiàn)所謂的特殊處理，你需要使用這個特殊的id在樣式表中編寫若干規(guī)則，或者在JavaScript文件中添加幾行代碼。比方說，你的CSS文件中有一些特定的規(guī)則，這些規(guī)則只應(yīng)用于id名為searchform的div內(nèi)的元素。

當(dāng)某一 id 屬性作為一個有磁性的東西（磁鐵）被用于一系列特定的 CSS 規(guī)則時，它被稱為CSS選擇器。有許多創(chuàng)建選擇器的方法，不過 id 是很容易使用的，并且有多種用途。

id 的力量

id 屬性不可思議地強(qiáng)有力。它具有以下的能力：

• 作為樣式表選擇器，使我們有能力創(chuàng)作緊湊的最小化的 XHTML。
• 作為超文本的目標(biāo)錨，取代過時的 name 屬性。
• 作為從基于 DOM 的腳本來定位特定元素的方法。
• 作為對象元素的名稱。
• 作為一種綜合用途處理 (general purpose processing) 的工具（在 W3C 的例子中，“當(dāng)把數(shù)據(jù)從HTML頁面中提取到數(shù)據(jù)庫，或?qū)?HTML 文檔轉(zhuǎn)換為其他格式等情況下，作為域識別工具來使用?！保?。

id的規(guī)則

id 值必須以字母或者下劃線開始；不能以數(shù)字開始。雖然 W3C 驗(yàn)證不會捕獲這個錯誤，但是 XML 解析器會的。同時，如果你將 id 與 JavaScript 在表單中配合使用，那么 id 名稱和值必須是合法的 JavaScript 變量?？崭窈瓦B字號，特別是連字號，是不被允許的。不僅如此，將下劃線用于 class 或者 id 名都不是個好主意，這是由于在 CSS2.0（以及某些瀏覽器）中的限制。

<div id="header"><h1><a href="http://hgci.cn/">W3Cschool在線教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="http://hgci.cn/html/" title="html教程">html教程</a></li>
<li id="x"><a href="http://hgci.cn/xml/" title="XML教程">XML教程</a></li>
<li id="j"><a href="http://hgci.cn/javascript/" title="javascript教程">javascript教程</a></li>
<li id="c"><a href="http://hgci.cn/css/" title="css教程">css教程</a></li>
<li id="q"><a href="http://hgci.cn/webdevelopment/" title="前端開發(fā)規(guī)范">前端開發(fā)規(guī)范</a></li>
<li id="u"><a href="http://hgci.cn/jquery/" title="jQuery教程">jQuery教程</a></li>
<li id="w"><a href="http://hgci.cn/wzjszn/" title="網(wǎng)站建設(shè)指南">網(wǎng)站建設(shè)指南</a></li>
</ul>
</div>