HTML5 Fundamentals Example

header

hesder: 定義文件的頁首.

<header>
  <h1>
    <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
  </h1>
</header>

hgroup

hgroup: 用於對網頁或區段（section）的標題進行組合。常用於主副標題。

<header>
  <hgroup>
    <h1>Acme United</h1>
    <h2>A Simple HTML5 Example</h2>
  </hgroup>
</header>
 

nav

nav: 定義導航連結的部分。

• 一個網頁也可能含有多個<nav>元素,例如一個是網站內的導航列表,另一個是本頁面內的導航列表.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>
 

article

article: 定義的內容本身必須是有意義的且必須是獨立於文件的其餘部分。
article 裡的內容多數是： [ 論壇帖子 | 部落格文章 | 新聞故事 | 評論 ]

<article>
  <header>
    <h1>
      <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
    </h1>
  </header>
  <p>
    Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de gustibus
    et coloribus non est disputandum Ad infinitum, ad nauseum.
  </p>
  <section>
    <header>
      <h1>This is the first section heading</h1>
    </header>
    <p>
      Scientia potentia est qua nocent docent ars longa, Vita brevis alea lacta
      est vici. P rimum non nocere quid pro quo. Audaces fortuna iuvat fortes
      fortuna adiuvat.
    </p>
  </section>
</article>
 

section

section: 定義了文件的某個區域。比如章節、頭部、底部或者文件的其他區域。

<section>
  <header>
    <h1>This is the first section heading</h1>
  </header>
  <p>
    Scientia potentia est qua nocent docent ars longa, Vita brevis alea lacta
    est vici. P rimum non nocere quid pro quo. Audaces fortuna iuvat fortes
    fortuna adiuvat.
  </p>
</section>

aside

aside: 定義 <article> 標籤外的內容。類似文章註釋。

<aside>
  <p>
    This is an aside that has multiple lines.Primum non nocere ad vitam paramus
    tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum Ad
    infinitum, ad nauseum.
  </p>
</aside>

figure

figure: 規定獨立的流內容（影象、圖表、照片、程式碼等等）。

• figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文件流產生影響。
• 請使用 <figcaption> 元素為 figure 新增標題（caption）。
• "figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

<figure>
  <img
    src="../img/LaBiXiaoXin.jpg"
    alt="Photograph of Stonehenge"
    width="200"
    height="131"
  />
  <figcaption>Figure 1. Stonehenge</figcaption>
</figure>

param

param: 允許您為插入 XHTML 文件的物件規定 run-time 設定，也就是說，此標籤可為包含它的 <object> 提供引數。

objec

object: 定義一個嵌入的物件。用於包含物件，比如影象、音訊、視訊、Java applets、ActiveX、PDF 以及 Flash。

<object data="horse.mp3">
   <param name="autoplay" value="true">
</object>

audio

audio: 定義聲音，比如音樂或其他音訊流。

• 目前，<audio> 元素支援的3種檔案格式：MP3、Wav、Ogg。
• 提示：可以在 <audio> 和 </audio> 之間放置文字內容，這些文字資訊將會被顯示在那些不支援 <audio> 標籤的瀏覽器中。

Attributes

<audio controls>
  <source src="https://www.runoob.com/try/demo_source/horse.mp3" >
  <p>您的瀏覽器不支援 audio 元素。</p>
</audio>

track

track: 為媒體元素（比如 <audio> and <video>）規定外部文字軌道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式檔案）。
這個元素用於規定字幕檔案或其他包含文字的檔案，當媒體播放時，這些檔案是可見的。

video

video: 定義視訊，比如電影片段或其他視訊流。

• 目前，<video> 元素支援三種視訊格式：MP4、WebM、Ogg。

• 提示：可以在 <video> 和 </video> 標籤之間放置文字內容，這樣不支援 <video> 元素的瀏覽器就可以顯示出該標籤的資訊。

Attributes

<video controls autoplay loop>
  <source src="https://www.runoob.com/video/php/friday.mp4" type="video/mp4" />
  <!-- 不支援video時用embed -->
  <object data="https://www.runoob.com/video/php/friday.mp4" width="320" height="240" >
    <embed src="https://www.runoob.com/video/php/friday.mp4" width="320" height="240" />
  </object>
  <!-- 不支援嵌入視訊時的文案 -->
  <div class="no-html5-video">
    <p>This video will work in Mozilla Firefox or Google Chrome only.</p>
  </div>
  <!-- 字幕 -->
  <track default kind="captions" srclang="en" src="https://www.runoob.com/video/php/friday.vtt" />
</video>

footer

footer: 定義文件或節的頁尾。

• 頁尾通常包含文件的作者、版權資訊、使用條款連結、聯絡資訊等等。
• 提示：假如您使用 <footer> 元素來插入聯絡資訊，應該在 <footer> 元素內使用 <address> 標籤。

<footer>
  <p>&copy; 2011 Acme United. All rights reserved.</p>
</footer>