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> <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>
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>
在同一個頁面中可以使用多個
<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> <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> <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>
以上就是HTML5学习笔记简明版(3):新元素之hgroup,header,footer的内容,更多相关内容请关注PHP中文网(www.php.cn)!