新元素之hgroup,header,footer,address,nav
hgroup
<hgroup>?標(biāo)簽用于對(duì)網(wǎng)頁(yè)或區(qū)段（section）的標(biāo)題進(jìn)行組合。
<hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2> </hgroup><p>The rest of the content...</p>?
header
header元素是一種具有引導(dǎo)和導(dǎo)航作用的輔助元素。通常，header元素可以包含一個(gè)區(qū)塊的標(biāo)題(如h1至h6，或者h(yuǎn)group元素標(biāo)簽)，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。
我們可以使用該元素來(lái)寫整個(gè)頁(yè)面的標(biāo)題部分：
<header><h1>The most important heading on this page</h1> </header>?
同一個(gè)頁(yè)面中，每一個(gè)內(nèi)容區(qū)塊都可以有自己的<header>元素，例如：
<header> <h1>The most important heading on this page</h1> </header><article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p> </article>?
<header>元素通常包含一個(gè)標(biāo)題標(biāo)簽(h1至h6)或是hgroup。另外，也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片；根據(jù)最新的W3C HTML5規(guī)范更新，<nav>元素標(biāo)簽也可以在<header>中使用。
footer
footer元素可以作為其直接父級(jí)內(nèi)容區(qū)塊或是一個(gè)根區(qū)塊的結(jié)尾。footer通常包括其相關(guān)區(qū)塊的附加信息，如作者、相關(guān)閱讀鏈接以及版權(quán)信息等。
過(guò)去(及目前)，我們通常使用類似下面這樣的代碼來(lái)寫頁(yè)面的頁(yè)腳：
<div id="footer"><ul><li>copyright</li><li>sitemap</li><li>contact</li><li>to top</li></ul> <div>?
在HTML5中，我們可以不使用div，而用更加語(yǔ)義化的footer來(lái)寫：
<footer><ul><li>copyright</li><li>sitemap</li><li>contact</li><li>to top</li></ul> </footer>?
在同一個(gè)頁(yè)面中可以使用多個(gè)<footer>元素，即可以用作頁(yè)面整體的頁(yè)腳，也可以作為一個(gè)內(nèi)容區(qū)塊的結(jié)尾，例如，我們可以將<footer>直接寫在<section>或是<article>中：
<section>Section content appears here.<footer>Footer information for section.</footer> </section><article>Article content appears here.<footer>Footer information for article.</footer> </article>?
address
address元素用來(lái)在文檔中呈現(xiàn)聯(lián)系信息，包括文檔創(chuàng)建者的名字、站點(diǎn)鏈接、電子郵箱、真實(shí)地址、電話號(hào)碼等；address不只是用來(lái)呈現(xiàn)電子郵箱或真實(shí)地址這樣的“地址”概念，而應(yīng)該包括與文檔創(chuàng)建人相關(guān)的各類聯(lián)系方式信息。
根據(jù)以上定義，我們可以使用下面的代碼來(lái)展示一些志愿者的名字及主頁(yè)鏈接：
The HTML5 Doctor is run by the following group of volunteers: <address><a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,<a href="http://html5doctor.com/author/richc">Rich Clark</a>,<a href="http://html5doctor.com/author/miker">Mike Robinson</a>, </address>?
下面是另一個(gè)范例，同時(shí)還使用到了<footer>及<time>?元素：
<footer><div class="vcard"> by<address class="author"><em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em></address> on<time datetime="2009-11-04" class="published updated">November 4th, 2009</time></div> </footer>?
如果我們確實(shí)需要在頁(yè)面中顯示某些與當(dāng)前文檔創(chuàng)建者聯(lián)系方式無(wú)關(guān)的聯(lián)系人信息，那么可以使用hCard微格式：
<div class="vcard"><p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p><p class="adr"><span class="street-address">HTML5 Hospital</span><span class="region">Doctorville</span><span class="postal-code">Postal Code</span><span class="country-name">Great Britain</span></p><p class="tel">+44 (0)XXXX XXXXXX</p> </div>?
nav
nav元素是一個(gè)可以用來(lái)作為頁(yè)面導(dǎo)航的鏈接組；其中的導(dǎo)航元素鏈接到其他頁(yè)面或當(dāng)前頁(yè)面的其他部分。并不是所有的鏈接組都要被放進(jìn)<nav>元素；例如，在頁(yè)腳中通常會(huì)有一組鏈接，包括服務(wù)條款、首頁(yè)、版權(quán)聲明等；這時(shí)使用<footer>元素是最恰當(dāng)?shù)?#xff0c;而不需要<nav>元素。
一直以來(lái)，我們都習(xí)慣用如下這種方式來(lái)定義導(dǎo)航條：
<nav><ul><li><a href="index.html">Home</a></li><li><a href="/about/">About</a></li><li><a href="/blog/">Blog</a></li></ul> </nav>?
下面是W3C給出的一個(gè)代碼示例：
<body><h1>The Wiki Center Of Exampland</h1><nav><ul><li><a href="/">Home</a></li><li><a href="/events">Current Events</a></li>...more...</ul></nav><article><header><h1> Demos in Exampland</h1><p>Written by A. N. Other.</p></header><nav><ul><li><a href="#public">Public demonstrations</a></li><li><a href="#destroy">Demolitions</a></li>...more...</ul></nav><div><section id="public"><h1>Public demonstrations</h1><p> ...more...</p></section><section id="destroy"><h1>Demolitions</h1><p>...more...</p></section>...more...</div><footer><p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p></footer></article><footer><p><small>? copyright 1998 Exampland Emperor</small></p></footer> </body>總結(jié)
以上是生活随笔為你收集整理的新元素之hgroup,header,footer,address,nav的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 新元素之section,article,
- 下一篇： 新元素之video,audio,mete