HTML5与CSS3基础教程：普通页面构成和创建页眉_html/css_WEB-ITnose

本文是节选《HTML5与CSS3基础教程》（第八版）第3章第3节。

本章全部文章：

第一节： “基本HTML结构 开始编写网页”

第二节：创建页面标题

第三节：创建分级标题

3.4 普通页面构成

你肯定已经访问过了大量像图3.4.1中显示的那种网站。抛开内容不谈，我们可以看到该页面有四个主要组件：带导航的页头、显示在主体内容区域的文章、显示次要信息的附注栏以及页脚，如图3.4.2所示。

图3.4.1 一个普通的布局，顶部是主导航，左侧是主要内容，右侧是附注栏，底部是页脚。要让页面成为这个样子，需要添加CSS

图3.4.2 页面的常规信息类型。这只是一种安排方式，不过是很常见的一种

现在，在没有引入CSS的情况下，你还无法像这样为页面添加样式。我们将从第7章开始学习CSS，在第10章开始学习如何对文字进行格式化、添加颜色等，在第11章学习多栏布局。

不过，应用到这些常规页面结构的语义都是非常相似的，与布局无关。本章剩余章节的大部分内容都会讲解这些结构。按照从页面顶端向下的顺序，将依次讲解用header、nav、main、article、section、aside和footer定义页面的结构，以及用来添加额外样式信息或实现其他目的的通用容器div。除了div以外，这些元素都是HTML5推出后才有的。

在学习这些元素的过程中，不要关心它们在示例布局中的位置，而应该关注它们的语义。

接下来，我们还会先大概了解一下其他元素，如ul（无序列表）和a（链接），后续章节会详细讲解。

3.5 创建页眉

如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。

一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header可能代表整个页面的页眉（有时称为页头），如图3.5.1所示。通常，页眉包括网站标志、主导航（图3.5.2）和其他全站链接，甚至搜索框（图3.5.3）。这无疑是header元素最常见的使用形式，不过不要误认为是唯一的形式。

图3.5.1 这个header代表整个页面的页眉。它包含一组代表整个页面主导航的链接（在nav元素中）。可选的role="banner"并不适用于所有的页眉。它显式地指出该页眉为页面级的页眉，因此可以提高可访问性。图3.5.4中也显示了一个这样的例子。要了解更多信息，参见3.13节（对于nav元素的role属性值，参见3.6节）

图3.5.2 包含导航的页面级页眉

图3.5.3 这是另一个网站的页眉（包含样式）。这种页面级页眉的形式在网上很常见。它包含网站名称（通常为一个标识）、指向网站主要板块的导航链接以及一个搜索框

header也很适合对页面深处的一组介绍性或导航性内容进行标记。例如，一个区块的目录，参见图3.5.4。

图3.5.4 这个页面有两个header，一个是整个页面的，另一个是Frequently Asked Questions的父元素article的。注意第一个并不包含任何h1～h6标题，而第二个则有。而且，只有第一个header中有role="banner"，因为它是页面级的页眉

header通常包含其自身的标题（h1～h6），但这并不是强制性的。例如，图3.5.3中有标题，但图3.5.1中就没有。

创建页眉的步骤

(1) 将光标放置在需要创建页眉的元素里。

(2) 输入

。

(3) 输入页眉的内容，包括各种类型的内容，它们分别由各自的HTML元素（本书余下部分将会讲到其中的大多数）进行标记。例如，header可以包含h1～h6标题、标识、导航、搜索框，等等。

(4) 输入。

只在必要时使用header。大多数情况下，如果使用h1～h6能满足需求，就没有必要用header将它包起来。

header与h1～h6元素中的标题（参见3.3节）是不能互换的。它们都有各自的语义目的。

不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。

header不一定要像示例那样包含一个nav元素（图3.5.1和图3.5.4），不过在大多数情况下，如果header包含导航性链接，就可以用nav。在图3.5.4所示的例子中，nav包住Frequently Asked Questions链接列表是恰当的，因为它是页面内的主要导航组（将在3.6节中讨论）。

要了解header如何取代HTML5之前版本中div元素的一个功能，参见3.12节。

原文链接

文章来源于网络，如果有侵犯到您的权益，请及时联系QQ：123464386，将会在第一时间进行处理！