首頁 > 文章 > web前端 > HTML5學習筆記簡明版（3）：新元素之hgroup,header,footer

HTML5學習筆記簡明版（3）：新元素之hgroup,header,footer

黄舟原創: 2017-01-21 16:34:002193瀏覽

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>

元素通常包含一個標題標籤(h1至h6)或是hgroup。另外，也可以包含其他內容，例如資料表、搜尋表單或相關的logo圖片；根據最新的W3C HTML5規格更新，

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）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5學習筆記簡明版（2）：新元素之section,article,aside下一篇：HTML5學習筆記簡明版（2）：新元素之section,article,aside

看更多

HTML5學習筆記簡明版（3）：新元素之hgroup,header,footer

相關文章