HTML5页面架构元素 - 标签

程序员文章站 2022-05-28 14:12:35

今天研究的HTML5标签元素是footer元素，对于

今天研究的HTML5标签元素是footer元素，对于<footer>这个标签表示最近部分内容的页脚，而跟上篇文章https://www.2cto.com/kf/201203/122163.html 的<header>标签恰恰对应，一头一尾。下面看看w3cSchool给出的定义：
<footer> 标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
也就是说footer元素跟header元素很类似，可以为整体页面的单独架构元素（表示页面页脚），也可以作为部分元素内的架构元素（表示部分的页脚）。这样说比较抽象，很难理解，下面我们就看看HTML5中footer元素在W3C官网的使用。地址：https://www.w3.org/html/logo/
第349行：footer作为部分的页脚进行定义
。。。
<section id="free-stickers" class="swag">
        <p>
          <h3>Free Stickers!</h3>
          <p>Send a Self-Addressed, Stamped Envelope and we'll send you three cool HTML5 stickers—just like that, free! Envelopes must be received by July 15, 2011.</p><img src="img/html5-stickers.png" alt="HTML5 Stickers" title="HTML5 Stickers" id="sticker-image" width="220" height="184">
          <address>HTML5 Sticker<br>PO Box 615<br>Belmont, CA 94002-0615</address>
          <p>Please send a No. 10 business envelope to accommodate all three stickers, see below for more details and international shipping.</p>
        <footer>
        Make sure to include enough postage to return a sticker pack via U.S. mail. It's less than one ounce, so a standard $0.44 stamp will do if you're in the United States; enclose an international reply coupon (IRC) if you're outside of the U.S. And be sure to send your envelope in soon -- one per person please.<br/>Your contact information won't be maintained in any way. Void where prohibited and only while supplies last. We just want to send you stickers.
        </footer>
        </p>
      </section>
。。。

第366行：footer元素作为页面的底部进行定义
    <footer>
      <section id="credits" class="outro">

<a href="https://www.w3.org/"><img src="img/footer_W3C_logo.png" id="footer-html5-logo" alt="W3C" width="114" height="61"></a>
         <img src="img/footer-cc.png" alt="Creative Commons" width="88" height="32">
         <p>Except where otherwise noted, content on this site is licensed under a Creative Commons<br><a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons
Attribution 3.0 License">Attribution 3.0 License</a></p>
      </section>
......
    </footer>

看了上面两个使用的例子，相信对footer元素有所了解，大概可以描述为：
footer就是一个用来表示页面和部分内容块页脚的元素。
加强：通常情况下我们可以想到我们在XHTML中经常使用的<p id="footer">，而这部分内容到HTML5中我们就可以移植到footer元素中了。而footer元素更加强大，不但表示页面级，还可以是内容块级别（包含在article,section等元素中）。
延伸：通常footer元素中包含版权作者信息，但不是唯一，通过上面W3C自己的HTML5宣传网站可以看出。跟header元素一样，我们也可以将footer元素放到页面的顶端或页面任何部分。如W3C教程中的例子:
<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<footer><a href="../">Back to index...</a></footer>
</body>

所有footer只是一个定义，也只是比我们之前使用的DIV多一个真正的实意。而这个含义恰恰可以给到以后的浏览器、搜索引擎或其他应用更好的掌握网页的结构罢了。
另附W3C中<footer>的解析：https://www.whatwg.org/specs/web-apps/current-work/#the-footer-element

摘自红草帽 * Arain

上一篇： vue下axios拦截器token刷新机制

下一篇：刘邦麾下的一大悍将，彭越的实力有多强？

HTML5页面架构元素 - 标签

HTML5在a标签内放置块级元素示例代码

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题

html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？