HTML5 使用id和class

■知识点

    HTML是简单的文档标识语言，不是界面语言。文档结构大部分使用<div>标签来完成，为了能够识别不同的结构，一般通过定义id或class给它们赋予额外的语义，给CSS样式提供有效的“钩子”。

    ■实例设计

    【示例1】构建一个简单的列表结构，并给它分配一个id,自定义导航模块。

<ul id="nav">

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

    <li><a href="#">关于</a></li>

    <lix<a hzef="#">联系</a></li>

</ul>

    使用id标识页面上的元素时，id名必须是唯一的。id可以用来标识持久的结构性元素，例如主导航或内容区域；id还可以用来标识一次性元素，如某个链接或表单元素。

    在整个网站上，id名应该应用于语义相似的元素以避免混淆。例如，如果联系人表单和联系人详细信息在不同的页面上，那么可以给它们分配同样的id名contact，但是如果在外部样式表中给它们定义样式，就会遇到问题，因此使用不同的id名(如contact_form和contact_details)就会简单得多。

    与id不同，同一个class可以应用于页面上任意数量的元素，因此class非常适合标识样式相同的对象。例如，设计一个新闻页面，其中包含每条新闻的日期。此时不必给每个日期分配不同的id，而是可以给所有日期分配类名date。

    对于class名称，也是如此。例如，如果定义所有错误消息以红色显示，不要使用类名red，而应该选择更有意义的名称，如error或feedback。

    【示例2】在实际设计中，class被广泛使用，这就容易产生滥用现象。例如，很多初学者把所有的元素上添加类，以便更方便地控制它们。这种现象被称为“多类症”，在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的代码。

    <hl class=" news Head" >标题新闻 </hl>

    <p class="newsText">新闻内容</p>

    <p>...</p>

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

    【示例3】在上面示例中，每个元素都使用一个与新闻相关的类名进行标识。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是，不需要用这么多类来区分每个元素。可以将新闻条目放在一个包含框中，并加上类名news,从而标识整个新闻条目。然后，可以使用包含框选择器识别新闻标题或文本。

    <div class="news">

    <hl>标题新闻</hl>

    <p>新闻内容</p>

    <P>...</p>

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

    </div>

    以这种方式删除不必要的类有助于简化代码，使页面更简洁。过度依赖类名是不必要的，只需要在不适合使用id的情况下对元素应用类，而且尽可能少使用类。实际上，创建大多数文档常常只需要添加几个类。如果初学者发现自己添加了许多类，那么这很可能意味着自己创建的HTML文档结构有问题。