HTML5 使用id和class

■知識(shí)點(diǎn)

    HTML是簡(jiǎn)單的文檔標(biāo)識(shí)語(yǔ)言，不是界面語(yǔ)言。文檔結(jié)構(gòu)大部分使用<div>標(biāo)簽來完成，為了能夠識(shí)別不同的結(jié)構(gòu)，一般通過定義id或class給它們賦予額外的語(yǔ)義，給CSS樣式提供有效的“鉤子”。

    ■實(shí)例設(shè)計(jì)

    【示例1】構(gòu)建一個(gè)簡(jiǎn)單的列表結(jié)構(gòu)，并給它分配一個(gè)id,自定義導(dǎo)航模塊。

<ul id="nav">

    <lix<a href="#">首頁(yè)</a></li>

    <li><a href="#">關(guān)于</a></li>

    <lix<a hzef="#">聯(lián)系</a></li>

</ul>

    使用id標(biāo)識(shí)頁(yè)面上的元素時(shí)，id名必須是唯一的。id可以用來標(biāo)識(shí)持久的結(jié)構(gòu)性元素，例如主導(dǎo)航或內(nèi)容區(qū)域；id還可以用來標(biāo)識(shí)一次性元素，如某個(gè)鏈接或表單元素。

    在整個(gè)網(wǎng)站上，id名應(yīng)該應(yīng)用于語(yǔ)義相似的元素以避免混淆。例如，如果聯(lián)系人表單和聯(lián)系人詳細(xì)信息在不同的頁(yè)面上，那么可以給它們分配同樣的id名contact，但是如果在外部樣式表中給它們定義樣式，就會(huì)遇到問題，因此使用不同的id名(如contact_form和contact_details)就會(huì)簡(jiǎn)單得多。

    與id不同，同一個(gè)class可以應(yīng)用于頁(yè)面上任意數(shù)量的元素，因此class非常適合標(biāo)識(shí)樣式相同的對(duì)象。例如，設(shè)計(jì)一個(gè)新聞頁(yè)面，其中包含每條新聞的日期。此時(shí)不必給每個(gè)日期分配不同的id，而是可以給所有日期分配類名date。

    對(duì)于class名稱，也是如此。例如，如果定義所有錯(cuò)誤消息以紅色顯示，不要使用類名red，而應(yīng)該選擇更有意義的名稱，如error或feedback。

    【示例2】在實(shí)際設(shè)計(jì)中，class被廣泛使用，這就容易產(chǎn)生濫用現(xiàn)象。例如，很多初學(xué)者把所有的元素上添加類，以便更方便地控制它們。這種現(xiàn)象被稱為“多類癥”，在某種程度上，這和使用基于表格的布局一樣糟糕，因?yàn)樗谖臋n中添加了無(wú)意義的代碼。

    <hl class=" news Head" >標(biāo)題新聞 </hl>

    <p class="newsText">新聞內(nèi)容</p>

    <p>...</p>

    <p class="newsText"><a href="news.php" class=”newsLink">更多</a></p>

    【示例3】在上面示例中，每個(gè)元素都使用一個(gè)與新聞相關(guān)的類名進(jìn)行標(biāo)識(shí)。這使新聞標(biāo)題和正文可以采用與頁(yè)面其他部分不同的樣式。但是，不需要用這么多類來區(qū)分每個(gè)元素。可以將新聞條目放在一個(gè)包含框中，并加上類名news,從而標(biāo)識(shí)整個(gè)新聞條目。然后，可以使用包含框選擇器識(shí)別新聞標(biāo)題或文本。

    <div class="news">

    <hl>標(biāo)題新聞</hl>

    <p>新聞內(nèi)容</p>

    <P>...</p>

    <p><a href="news.php">更多</a></p>

    </div>

    以這種方式刪除不必要的類有助于簡(jiǎn)化代碼，使頁(yè)面更簡(jiǎn)潔。過度依賴類名是不必要的，只需要在不適合使用id的情況下對(duì)元素應(yīng)用類，而且盡可能少使用類。實(shí)際上，創(chuàng)建大多數(shù)文檔常常只需要添加幾個(gè)類。如果初學(xué)者發(fā)現(xiàn)自己添加了許多類，那么這很可能意味著自己創(chuàng)建的HTML文檔結(jié)構(gòu)有問題。