<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 則是一種令人驚訝的小工具，它使你有能力編寫(xiě)極其緊湊的 XHTML，以及巧妙地利用 CSS，并通過(guò)標(biāo)準(zhǔn)文檔對(duì)象模型 (DOM) 向站點(diǎn)添加復(fù)雜精巧的行為。

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

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

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

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

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

在本站的首頁(yè)，我們將教程目錄列表封裝于一個(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語(yǔ)言">XSL</a></li>
... ...
... ...

</div>

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

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

因此，將 id 標(biāo)注為 "menu"、"content" 或者 "searchform"會(huì)幫助你回憶。進(jìn)一步講，標(biāo)記不等同于設(shè)計(jì)，結(jié)構(gòu)良好的的頁(yè)面可以被格式化為你希望的任何樣子。這樣做的結(jié)果是，無(wú)論你使用純粹 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è)名字只能在被賦予的頁(yè)面使用一次。（例如，假如你的頁(yè)面包含 id 為 content 的 div，那么另外一個(gè) div 或者其他別的元素都不能使用這個(gè)名字。相反地，class 屬性可以被一遍又一遍地使用在頁(yè)面中（例如，頁(yè)面中的五個(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 被用來(lái)封裝包含搜索表單的頁(yè)面區(qū)域，而 div class="blogentry" 則用來(lái)封裝 blog 中的每個(gè)文章入口。在頁(yè)面中只有一個(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 屬性比作粘性貼紙來(lái)進(jìn)行思考應(yīng)該是有幫助的。我會(huì)在冰箱上拍一張貼紙來(lái)提醒自己去買(mǎi)牛奶，電話上面也會(huì)貼一張，提醒我給一位逾期繳納的客戶打電話。還有一個(gè)，被貼在賬本夾上面，來(lái)提醒我這個(gè)月 15 號(hào)之前必須繳納的賬單。

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

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

id 的力量

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

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

id的規(guī)則

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

<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>