html5知识点补充—footer元素的使用
使用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>
html5知识点补充—footer元素的使用的更多相关文章
- html5知识点补充—mark元素的使用
使用mark元素高亮文本 利用mark元素,文档作者可以高亮显示文档中的某些文本以达到醒目的效果. 如果用户在站点进行搜索,搜索页面中的关键字可以高亮显示.这时,就可以很好的利用到mark元素.不选用 ...
- HTML5<footer>元素
HTML5中<footer>元素是用来描述文档中的底部信息,比如:版本,版权,作者,链接声明,联系信息,时间等等. 实例: <footer> <p>这是一个底部的信 ...
- HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素
---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...
- HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 知识点
HTML5 知识点 (1)语义化标记 <header>,<footer>,<nav>,<article>,<section> ...
- HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- HTML5 中的Nav元素详解
什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...
随机推荐
- Python:tkinter无法同时显示多个image的解决方法
0.问题 在用Tkinter进行编程时,需要在一个Frame下显示多个图片,但是不管怎么设置都是只显示最后一张,就像这样: 代码 for i in range(3): ... image=ImageT ...
- vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'
问题: vue 项目npm run dev运行时报错,如下图: 原因: 缺少相应的组件 解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --sav ...
- JavaScript与C#互通的DES加解密算法的实现(转)
本文提供了一个能使JavaScript与C#互通的DES加解密算法的实现,在前台页面中用JavaScript版本的DES算法将数据加密之后,传到服务器端,在服务器端可用C#版本的DES解密算法将其解密 ...
- 云计算与云存储:使用云服务器搭建一个情侣纪念Web服务器
做完了实验一,做完感觉这门还是蛮好玩的,而且第一实验就很有趣,搭建了一个可以在公网访问的纪念网站给女朋友秀了一下.写好实验报告后简单搬运,应该能给感兴趣的朋友带来帮助. 创建阿里云主机 进入阿里云官方 ...
- JAVA 猜拳游戏
JAVA 猜拳游戏 题目:通过控制台方式实现一个人机对战的猜拳游戏 用户通过输入(0.石头子 1.剪刀 2.布),机器随机生成(0.石头子 1.剪刀 2.布) 要求: 能打印玩家的对局信息,胜利的次数 ...
- How to use Remote-SSH in Windows
对于不太会使用 Vim 的我来说,在服务器上用 Vim 去修改 nginx.conf 实在有点麻烦,比如没有高亮和格式化.正好想起前不久微软发布了远程开发工具包,其中一个就是今天要介绍的 Remote ...
- unittest简介01
前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先 ...
- java中的List接口(ArrayList、Vector、LinkedList)
一.List接口有三个常用的集合(ArrayList.Vector.LinkedList) ArrayList注意事项 ArrayList底层是用数组来实现数据存储的 底层是 transient Ob ...
- C语言之判断质数算法
今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...
- Java入土---基本DOS命令
基本DOS命令 打开cmd方式 开始+系统+命令提示符 win+R,输入cmd 在任意文件夹下,按住shift + 右键,打开命令行窗口 资源管理器里打开 常用DOS命令 盘符切换 E: dir命令查 ...