HTML5文字段落與特殊標籤

元素標籤

段落:figure(圖片)、figcaption(圖標)、details(細節)、summary(細節標題)

特殊:meter(測量值)、progress(任務進度)、command(命令)

關連文章:通用HTML(2)-【文字段落篇】

details

說明:指定其它細節訊息。

屬性:

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

【範例】

<details>
    <summary>Copyright 2010 - by Omew. All Rights Reserved.</summary>
    

摩刻部落的網站從 2010 年 6 月開始營運,希望可以提供程式設計人員方便查閱的空間。

</details>

【結果】

Copyright 2010 - by Omew. All Rights Reserved.

摩刻部落的網站從 2010 年 6 月開始營運,希望可以提供程式設計人員方便查閱的空間。

figcaption

說明:

的第一個或最後一個子元素,用來標示圖片的說明文字(圖片標題)。

屬性:

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

【範例】

<figure>
    <figcaption>MOLESKINE筆記本</figcaption>
    
</figure>

【結果】

MOLESKINE筆記本

figure

說明:將圖片獨立出來,使其不會影響主內容。配合

標籤可以加入圖標。

屬性:

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

【範例】

<figure>
    
    <figcaption>MOLESKINE筆記本</figcaption>
</figure>

【結果】

MOLESKINE筆記本

meter

說明:顯示一個範圍內的測量值(Gauge)。可以表示硬碟使用狀況、內容關聯度等等。但它不該用來顯示進度,進度應使用標籤。

屬性:

  • class=“類別”:指定物件類別。
  • dir=“顯示方向(ltr | rtl)“:由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • form=“表單ID”:指定歸屬的表單ID。目前沒有瀏覽器支援。
  • high=“高標”:指定高標的水準。當數值達到高標時會變色。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang=“所屬語言”:標籤包覆文字所屬的語言。
  • low=“低標”:指定低標的水準。當數值達到高標時會變色。
  • max=“最大值”:指定範圍的最大值。若不指定則預設值為1。
  • min=“最小值”:指定範圍的最小值。若不指定則預設值為0。
  • optimum=“最佳值”:指定最佳數值。
  • style=“樣式”:設定顯示樣式。
  • tabindex=“數字”:使用Tab時的瀏覽順序。
  • title=“標題”:指定一個標題,當滑鼠移到超連結上時會顯現。
  • value=“數值”:指定目前的數值,此為必要屬性。

【範例】

<meter value="6" min="0" max="10">10分得6分</meter>
<meter value="0.4">40%</meter>
<meter min="0" max="100" low="40" high="80" value="90">

【結果】

10分得6分

40%

progress

說明:顯示任務的進度。如果要表示測量值(Gauge),應使用標籤。

屬性:

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

【範例】

<progress value="65" max="100">已完成65%</progress>

【結果】 已完成65%

summary

說明:指定

顯示的標題名稱。

屬性:

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

【範例】

<details>
    <summary>Copyright 2010 - by Omew. All Rights Reserved.</summary>
    

摩刻部落的網站從 2010 年 6 月開始營運,希望可以提供程式設計人員方便查閱的空間。

</details>

【結果】

Copyright 2010 - by Omew. All Rights Reserved.

摩刻部落的網站從 2010 年 6 月開始營運,希望可以提供程式設計人員方便查閱的空間。