HTML5与CSS3基础教程:通过footer在任何位置创建页脚

摘要:一般的,section定义成“通用的”区块,但不要将它与div元素混淆。从语义上讲,section标记的是页面中的特定区域,而div则不传达任何语义。

作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)

第三章全部章节:
第一节:“基本HTML结构 开始编写网页”
第二节:创建页面标题
第三节:创建分级标题
第四、五节:普通页面构成和创建页眉
第六节:标记导航 通过nav指向任意页面内容
第七节:标记页面主要区域
第八节:标题在不同浏览器中显示相同大小(创建文章)
第九节:用section定义区块 它与div不同
第十节:用aside表示网页独立内容(指定附注栏)

3.11 创建页脚

当你想到页脚的时候,你大概想的是页面底部的页脚(通常包括版权声明,可能还包括指向隐私政策页面的链接以及其他类似的内容)。HTML5的footer元素可以用在这样的地方,但它同header一样,还可以用在其他的地方。

footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时,它才是整个页面的页脚(参见图3.11.1和图3.11.2)。

如果一个footer包着它所在区块(如一个article)的所有内容,它代表的是像附录、索引、版权页、许可协议这样的内容。

创建页脚的步骤

(1) 将光标放在希望创建页脚的元素里。

(2) 输入<footer>。

(3) 输入页脚的内容。

(4) 输入</footer>。

页脚通常包含关于它所在区块的信息,如指向相关文档的链接、版权信息、作者及其他类似条目。参见“其他footer示例”中的前两个例子。

页脚并不一定要位于所在元素的末尾,不过通常是这样的。

1.jpg

图3.11.1

这个footer代表整个页面的页脚,因为它最近的祖先是body元素。现在,页面有了header、nav、main、article、aside和footer元素。并非每个页面都需要以上所有元素,但它们确实代表了HTML中的主要页面构成要素

不能在footer里嵌套header或另一个footer。同时,也不能将footer嵌套在header或address元素里。

2.jpg

图3.11.2

这个footer出现在页面的最底部,位于aside之后。footer元素本身不会为文本添加任何默认样式。这里,版权信息的字号比普通文本的小,这是因为它嵌套在“用来对法律文本进行语义化”的small元素里(参见第4章)。像其他内容一样,可以通过CSS修改footer元素所含内容的字号

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

要了解在哪种情况下可对页面级的footer使用role="contentinfo",参见3.13节。将其放入图3.11.1中的代码是合理的,因为它代表的是整个页面的页脚,不过我有意略去了,避免给读者留下所有footer元素都需要role="contentinfo"的印象。在“其他footer示例”中,我们在不同的示例中体现了这种区别,另外还演示了使用role属性的正确方法。

3.jpg