• html5知识点补充—footer元素的使用


    使用footer元素创建脚注

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

    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>
  • 相关阅读:
    使用Stream方式处理集合元素
    Consumer方法结合Lambda表达式的应用
    java-遍历字符串的两种方式:1.char charAt(int index);2.char[] toCharArray()
    java-成员变量与局部变量的测试
    java-统计字符串中各字符次数
    java-字符串的遍历和字符串数组的遍历
    java-String类的获取方法(indexOf();substring()等)
    java-模拟登陆练习
    java-String类中的各字符串判断(包括" "和null的区别)
    java-String类的常见面试题
  • 原文地址:https://www.cnblogs.com/10manongit/p/12669892.html
Copyright © 2020-2023  润新知