HTML5 使用id和class

■知識點(diǎn)

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

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

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

<ul id="nav">

    <lix<a href="#">首頁</a></li>

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

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

</ul>

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

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

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

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

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

    <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】在上面示例中，每個元素都使用一個與新聞相關(guān)的類名進(jìn)行標(biāo)識。這使新聞標(biāo)題和正文可以采用與頁面其他部分不同的樣式。但是，不需要用這么多類來區(qū)分每個元素?？梢詫⑿侣剹l目放在一個包含框中，并加上類名news,從而標(biāo)識整個新聞條目。然后，可以使用包含框選擇器識別新聞標(biāo)題或文本。

    <div class="news">

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

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

    <P>...</p>

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

    </div>

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