2.2　构建网页通用结构

HTML文档的主体部分包括了要在浏览器中显示的所有信息。这些信息需要在特定的结构中呈现，下面介绍网页通用结构的设计方法。

2.2.1　定义文档结构

视频讲解

HTML5包含一百多个标签，大部分继承自HTML4，新增加30个标签。这些标签基本上都被放置在主体区域（<body>）内，我们将在各章节中逐一进行说明。

正确选用HTML5标签可以避免代码冗余。在设计网页时不仅需要使用<div>标签来构建网页通用结构，还要使用下面几类标签完善网页结构。

　<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：定义文档标题，1表示一级标题，6表示六级标题，常用标题包括一级、二级和三级。

　<p>：定义段落文本。

　<ul>、<ol>、<li>等：定义信息列表、导航列表、榜单结构等。

　<table>、<tr>、<td>等：定义表格结构。

　<form>、<input>、<textarea>等：定义表单结构。

　<span>：定义行内包含框。

【示例】下面示例是一个简单的HTML页面，使用了少量HTML标签。它演示了一个简单的文档应该包含的内容，以及主体内容是如何在浏览器中显示的。

第1步，新建文本文件，输入下面代码。

第2步，保存文本文件，命名为test，设置扩展名为.html。

第3步，使用浏览器打开这个文件，则可以看到如图2.4所示的预览效果。

图2.4　网页文档演示效果

为了更好地选用标签，读者可以参考w3school网站的http://www.w3school. com.cn/tags/index.asp页面信息。其中DTD列描述标签在哪一种DOCTYPE文档类型是允许使用的：S=Strict, T=Transitional, F=Frameset。

【课后福利】

感兴趣的读者可以扫码查看一份完整的HTML5结构模板。

线上阅读

2.2.2　使用div和span

视频讲解

文档结构基本构成元素是div。div表示区块（division）的意思，通过将指定结构内容包围在div中，并分配id或class，就可以在文档中添加有意义的结构。

【示例1】为了减少不必要的标签，应该避免随意嵌套。例如，在设计导航列表时，就没有必要将<ul>再包裹一层<div>标签。

可以完全删除div，直接在ul上设置id。

    <ul id="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </u1>

过度使用div是结构不合理的一种表现，也容易造成结构复杂化。

与div不同，span元素可以用来对行内元素进行分组。

【示例2】在下面代码中为段落文本中部分信息进行分隔显示，以便应用不同的类样式。

    <h1>新闻标题</h1>
    <p>新闻内容</p>
    <p>……</p>
    <p>发布于<span class="date">2016年12月</span>，由<span class="author">张三</span>编辑</p>

对行内元素进行分组的情况比较少，所以使用span的频率没有div多。一般应用类样式时才会用到。

2.2.3　使用id和class

视频讲解

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

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

    <ul id="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </u1>

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

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

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

　提示：id和class的名称一定要保持语义性，并与表现方式无关。例如，可以给导航元素分配id名为right_nav，因为希望它出现在右边。但是，如果以后将它的位置改到左边，那么CSS和HTML就会产生歧义。所以，将这个元素命名为sub_nav或nav_main更合适。这种名称解释就不再涉及如何表现它。

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

　注意：class和id名称需要区分大小写，虽然CSS不区分大小写，但是在标签中是否区分大小写取决于HTML文档类型。如果使用XHTML严谨型文档，那么class和id名是区分大小写的。最好的方式是保持一致的命名约定，如果在HTML中使用驼峰命名法，那么在CSS中也采用这种形式。

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

    <h1 class="newsHead">标题新闻</h1>
    <p class="newsText">新闻内容</p>
    <p>……</p>
    <p class="newsText"><a href="news.php" class="newsLink">更多</a></p>

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

    <div class="news">
        <h1>标题新闻</h1>
        <p>新闻内容</p>
        <p>……</p>
        <p><a href="news.php">更多</a></p>
    </div>

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

上一章目录下一章