使用footer元素创建脚注

顾名思义，footer元素通常位于页面的底部。尽管footer通常位于某个区域或者页面的底部，但并非总是如此。footer元素旨在包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于article或section中，则包含文章发布的日期、标记、分类和其他元数据。

HTML5规范为一个非常常见的Web元素——页面中的版权声明——提供了一个解决方案：

<footer>

    <small>&copy; 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>&copy; 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元素的使用的更多相关文章

  1. html5知识点补充—mark元素的使用

    使用mark元素高亮文本 利用mark元素,文档作者可以高亮显示文档中的某些文本以达到醒目的效果. 如果用户在站点进行搜索,搜索页面中的关键字可以高亮显示.这时,就可以很好的利用到mark元素.不选用 ...

  2. HTML5<footer>元素

    HTML5中<footer>元素是用来描述文档中的底部信息,比如:版本,版权,作者,链接声明,联系信息,时间等等. 实例: <footer> <p>这是一个底部的信 ...

  3. HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素

    ---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...

  4. HTML5知识点总结

    HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...

  5. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  6. HTML5 知识点

    HTML5 知识点   (1)语义化标记       <header>,<footer>,<nav>,<article>,<section> ...

  7. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  8. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  9. HTML5 中的Nav元素详解

    什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要 ...

随机推荐

  1. 搞懂MySQL（各种）索引类型及其区别

    索引的概念介绍: 1.聚集索引 聚集索引:指索引项的排序方式和表中数据记录排序方式一致的索引  也就是说聚集索引的顺序就是数据的物理存储顺序.它会根据聚集索引键的顺序来存储表中的数据,即对表的数据按索 ...

  2. 矩池云 | 使用LightGBM来预测分子属性

    今天给大家介绍提升方法(Boosting), 提升算法是一种可以用来减小监督式学习中偏差的机器学习算法. 面对的问题是迈可·肯斯(Michael Kearns)提出的:一组"弱学习者&quo ...

  3. C语言之判断质数算法

    今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...

  4. CSAPP-Lab03 Attack Lab 记录

    纸上得来终觉浅,绝知此事要躬行 实验概览 Attack!成为一名黑客不正是我小时候的梦想吗?这个实验一定会很有趣. CMU 对本实验的官方说明文档:http://csapp.cs.cmu.edu/3e ...

  5. 有效提升Python代码性能的三个层面

    使用python进入一个熟练的状态之后就会思考提升代码的性能,尤其是python的执行效率还有很大提升空间(委婉的说法).面对提升效率这个话题,python自身提供了很多高性能模块,很多大牛开发出了高 ...

  6. PHP高并发商城秒杀

    1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...

  7. 10 Java的方法 可变参数

    5.可变参数 JDK 1.5开始,Java支持传递同类型的可变参数给一个方法. 在方法声明中,在制定参数类型后加一个省略号(-). 一个方法中只能指定一个可变参数,它必须是方法的最后一个参数.任何普通 ...

  8. 详解Nacos 配置中心客户端配置缓存动态更新的源码实现

    Nacos 作为配置中心,当应用程序去访问Nacos动态获取配置源之后,会缓存到本地内存以及磁盘中. 由于Nacos作为动态配置中心,意味着后续配置变更之后需要让所有相关的客户端感知,并更新本地内存! ...

  9. spring——依赖注入的三种方式

    1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...

  10. 《前端运维》四、Jenkins--持续构建

    首先,我们先来了解下什么叫做持续构建.持续构建简称CI,负责拉取代码库中的代码后,执行用户预定义的脚本,通过一系列编译操作构建出一个制品,并将制品推送到制品库里.常用的持续构建工具有 Gitlab C ...