HTML5文字字型與標註

元素標籤

字型:mark(標記文字)、ruby(注音標示)、rt(注音)、rp(ruby註解)
標註:article(文章)、header(頁首)、footer(頁尾)、section(節)、hgroup(標題群組)、nav(導覽)、aside(側欄)、time(時間戳記)、wbr(允許斷行)、bdi(方向隔離)

關連文章:通用HTML(1)-【文字字型篇】通用HTML(3)-【文字標註篇】

article
說明:表示標籤裡的內容是單篇文章。可以包含標題(hgroup)、內文、頁首(header)頁尾(footer)與時間(time)等資訊。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<article>
HTML的文字標註標籤只是用來對標籤的內容作聲明,通常沒有實際效果,不過使用者可以用CSS來修改顯示的樣式。
</article>

【結果】

HTML的文字標註標籤只是用來對標籤的內容作聲明,通常沒有實際效果,不過使用者可以用CSS來修改顯示的樣式。

aside
說明:側邊欄內容。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

HTML5新標籤
<aside>新標籤除了多媒體外,也增加許多文章標記標籤。</aside>

【結果】
HTML5新標籤

bdi
說明:雙向隔離,用來標記方向不明的文字。例如阿拉伯語的文字會使文字方向變得不正確。目前沒有任何瀏覽器支援。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

User <bdi>إيان</bdi>: 90 points

【結果】
User إيان: 90 points

footer
說明:表示標籤裡的內容是頁尾。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<footer>本文撰寫於 2011/11/12</footer>

【結果】

本文撰寫於 2011/11/12

header
說明:表示標籤裡的內容是頁首。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<header>歡迎來到 [ 摩刻部落 ],祝你有個充實美好的一天。</header>

【結果】

歡迎來到 [ 摩刻部落 ],祝你有個充實美好的一天。

hgroup
說明:標題群組。可將主標題與副標題結合。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<hgroup>
<h4>第一章</h4>
<h5>第二節</h5>
</hgroup>

【結果】

第一章

第二節

mark
說明:標記文字內容。預設的效果類似螢光標示文字。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

&lt;mark&gt;可以作為<mark>重點</mark>標記。

【結果】
<mark>可以作為重點標記。

nav
說明:定義一個導覽列。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<nav>
	<a href="http://www.moke.tw/wordpress/tag/html">HTML</a> |
	<a href="http://www.moke.tw/wordpress/tag/css">CSS</a> |
	<a href="http://www.moke.tw/wordpress/tag/android">Android</a> |
	<a href="http://www.moke.tw/wordpress/tag/facebook">Facebook</a>
</nav>

【結果】

rp
說明:當瀏覽器不支援<ruby>標籤時,要顯示什麼樣的文字。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby><rt><rp>(</rp>ㄓㄨㄥ<rp>)</rp></rt></ruby>

【結果】
(ㄓㄨㄥ)

rt
說明:定義注音標示的注音字。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby><rt>ㄓㄨㄥ</rt></ruby>

【結果】
ㄓㄨㄥ

ruby
說明:將標記文字進行注音標示。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby><rt>ㄓㄨㄥ</rt></ruby>

【結果】
ㄓㄨㄥ

section
說明:表示標籤裡的內容是section。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<section>HTML5未來可能會新增chapter標籤。</section>

【結果】

HTML5未來可能會新增chapter標籤。

time
說明:提供一個機器可讀的時間標記。目前沒有任何瀏覽器支援。
屬性:

  • class="類別":指定物件類別。
  • datetime="日期/時間":指定標記的日期/時間。若無標記則以標籤內容作為日期/時間。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • pubdate="pubdate":表示<time&lgt;裡標示的時間是文件出版日期。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<time datetime="2011-11-12">今天</time>發表了一篇文章。

【結果】
發表了一篇文章。

wbr
說明:斷字時機。用來標記一個很長的英文單字,避免瀏覽器在錯誤的地方換行。
屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

【結果】
To learn AJAX, you must be familiar with the XMLHttpRequest Object.

Category: 網路基礎程式  Tags: ,
Share on Google+
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.
One Response
  1. Cialis deutschland says:

    Very informative post. Thanks for taking the time to share your view with us.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *


+ 八 = 16

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>