萬盛學電腦網 >> 網頁制作 >> xml編程 >> HTML5學習筆記簡明版（3）：新元素之hgroup,header,footer,add
HTML5學習筆記簡明版（3）：新元素之hgroup,header,footer,add
hgroup
<hgroup> 標簽用於對網頁或區段（section）的標題進行組合。
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
header
header元素是一種具有引導和導航作用的輔助元素。通常，header元素可以包含一個區塊的標題(如h1至h6，或者hgroup元素標簽)，但也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片。
我們可以使用該元素來寫整個頁面的標題部分：
<header>
<h1>The most important heading on this page</h1>
</header>
同一個頁面中，每一個內容區塊都可以有自己的<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>元素通常包含一個標題標簽(h1至h6)或是hgroup。另外，也可以包含其他內容，例如數據表格、搜索表單或相關的logo圖片；根據最新的W3C HTML5規范更新，<nav>元素標簽也可以在<header>中使用。
footer
footer元素可以作為其直接父級內容區塊或是一個根區塊的結尾。footer通常包括其相關區塊的附加信息，如作者、相關閱讀鏈接以及版權信息等。
過去(及目前)，我們通常使用類似下面這樣的代碼來寫頁面的頁腳：
<div id="footer">
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
<div>
在HTML5中，我們可以不使用div，而用更加語義化的footer來寫：
<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>
在同一個頁面中可以使用多個<footer>元素，即可以用作頁面整體的頁腳，也可以作為一個內容區塊的結尾，例如，我們可以將<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元素用來在文檔中呈現聯系信息，包括文檔創建者的名字、站點鏈接、電子郵箱、真實地址、電話號碼等；address不只是用來呈現電子郵箱或真實地址這樣的“地址”概念，而應該包括與文檔創建人相關的各類聯系方式信息。
根據以上定義，我們可以使用下面的代碼來展示一些志願者的名字及主頁鏈接：
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>
下面是另一個范例，同時還使用到了<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>
如果我們確實需要在頁面中顯示某些與當前文檔創建者聯系方式無關的聯系人信息，那麼可以使用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元素是一個可以用來作為頁面導航的鏈接組；其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的鏈接組都要被放進<nav>元素；例如，在頁腳中通常會有一組鏈接，包括服務條款、首頁、版權聲明等；這時使用<footer>元素是最恰當的，而不需要<nav>元素。
一直以來，我們都習慣用如下這種方式來定義導航條：
<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給出的一個代碼示例：
<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>
