HTML5与CSS3基础教程:普通页面构成和创建页眉

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

本章全部文章:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题

3.4 普通页面构成

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

1.jpg

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

2.jpg

图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.jpg

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

4.jpg

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

5.jpg

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

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

6.jpg

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

header通常包含其自身的标题(h1~h6),但这并不是强制性的。例如,图3.5.3中有标题,但图3.5.1中就没有。

创建页眉的步骤

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

(2) 输入<header>。

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

(4) 输入</header>。

只在必要时使用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节。