HTML5页⾯架构元素-footer标签
今天研究的HTML5标签元素是footer元素,对于<footer>这个标签表⽰最近部分内容的页脚,⽽跟上篇⽂章的恰恰对应,⼀头⼀尾。下⾯看看w3cSchool给出的定义:
<footer> 标签定义 section 或 document 的页脚。
在典型情况下,该元素会包含创作者的姓名、⽂档的创作⽇期以及/或者联系信息。
第349⾏:footer作为部分的页脚进⾏定义
。。。
<section id="free-stickers" class="swag">
<div>
<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="HT
ML5 Stickers" title="HTML5 Stickers"
<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 yo </footer>
</div>
</section>
。。。
第366⾏:footer元素作为页⾯的底部进⾏定义
<footer>
<section id="credits" class="outro">
<a href="/"><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="/licenses/by/3.0/" title="Creative Commons Attribution 3.0 License">Attribution 3.0 License</a></p>
</section>
......
</footer>
看了上⾯两个使⽤的例⼦,相信对footer元素有所了解,⼤概可以描述为:
footer就是⼀个⽤来表⽰页⾯和部分内容块页脚的元素。
加强:通常情况下我们可以想到我们在XHTML中经常使⽤的<div id="footer">,⽽这部分内容到HTML5中我们就可以移植到footer元素中了。⽽footer元素更加强⼤,不但表⽰页⾯级,还可以是内容块级别(包含在
article,section等元素中)。
延伸:通常footer元素中包含版权作者信息,但不是唯⼀,通过上⾯W3C⾃⼰的HTML5宣传⽹站可以看出。跟header元素⼀样,我们也可以将footer元素放到页⾯的顶端或页⾯任何部分。如W3C教程中的例⼦:
<body>html5标签区分大小写
<footer><a href="../">Back </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 </a></footer>
</body>
所有footer只是⼀个定义,也只是⽐我们之前使⽤的DIV多⼀个真正的实意。⽽这个含义恰恰可以给到以后的浏览器、搜索引擎或其他应⽤更好的掌握⽹页的结构罢了。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。