使用footer元素创建脚注
顾名思义,footer
元素通常位于页面的底部。尽管footer
通常位于某个区域或者页面的底部,但并非总是如此。footer
元素旨在包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于article
或section
中,则包含文章发布的日期、标记、分类和其他元数据。
HTML5规范为一个非常常见的Web元素——页面中的版权声明——提供了一个解决方案:
<footer>
<small>© Copyright HTML5 Cookbook 2011</small>
</footer>
以上的代码示例一般在放置在</body>标记的前面(版权消息放置在small标记中)。
与header
类似,footer
元素可以在单个页面上多次使用,也可以将footer
元素放在article
中。示例代码使用了一个站点范围的footer
,还在article
中使用了嵌套的footer
元素。
<body>
<article>
<h1>10 things about HTML5</h1>
<footer>
<p>This news article was published on <time>1st April 2011</time>by <a href="#">Tom Leader</a></p>
</footer>
<p><strong>Pellentesque habitant morbi tristique</strong>....</p>
<footer>
<p>This news article was published on <time>1st April 2011</time>by <a href="#">Tom Leader</a></p>
</footer>
</article>
<footer>
<small>© Copyright HTML5 Cookbook 2011</small>
</footer>
</body>
该示例在一个article
中使用了两个footer
元素。在新闻或者博文中,文章开头和末尾通常都会显示作者或时间等信息,你可以根据需要多次使用footer
。
当然也可以在footer
元素中加入其他内容,比如导航、合作方的logo、许可协议,以及你经常会看到的“This site is powered by <cms name>"文本。
HTML5规范中讲到,footer
元素可以包含指向相关文档的链接。尽管在之前我们组合使用aside
和nave也实现该目的,但是如果footer
位于article
中,就可以使用它来提供这些信息。它还可以包含其他链接,显示“上一篇文章”、“下一篇文章”链接,
<body>
<article>
... all the content for this article...
<footer>
<a href="#">Previous article</a> | <a href="#">Next article</a>
</footer>
</article>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。