HTML5页面架构元素 - <footer>标签


<footer> 标签定义 section 或 document 的页脚。




<section id="free-stickers" class="swag">
<h3>Free Stickers!</h3>
<p>Send a Self-Addressed, Stamped Envelope and we'll send you three cool HTML5 stickers&mdash;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>
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.


<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="" title="Creative Commons Attribution 3.0 License">Attribution 3.0 License</a></p>



加强:通常情况下我们可以想到我们在XHTML中经常使用的<div id="footer">,而这部分内容到HTML5中我们就可以移植到footer元素中了。而footer元素更加强大,不但表示页面级,还可以是内容块级别(包含在article,section等元素中)。


<footer><a href="../">Back to index...</a></footer>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
<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>




posted @ 2012-03-05 22:01  红草帽  阅读(1583)  评论(0编辑  收藏