欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-24 20:40:41
...
本文是节选《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,将会在第一时间进行处理!