通用HTML(3)-【文字標註篇】

這個單元的特色是…大部份的標籤加上去也看不出來有什麼效果…或著是可以使用【字型篇】裡的格式來設定(簡而言之就是沒什麼特別的),之所以會有這些標籤,主要是為了讓文件中的某些內容標示得更清楚,它只是對文章中的某段文字進行〝說明〞而已,因此比較少被使用到,我們只要知道有這種東西就好,不學其實沒有什麼關係(要用再來查即可)。

元素標籤

code(程式碼)、samp(程式輸出)、var(變數)、abbr(縮寫)、acronym(組合字)、city(引述文字)、ins(轉載)、q(引用)、address(位置)、bdo(反向文字)、dd(定義說明)、dl(定義清單)、dt(定義名稱)、dfn(術語)、kbd(鍵盤)、tt(打字機)

關連文章:HTML5文字字型與標註

abbr Adobe Dreamweaver CS3

說明:代表標籤中的文字是縮寫字,不會產生任何效果。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是縮寫字

【結果】

這是縮寫字

acronym Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是組合字,不會產生任何效果。在HTML5中不被支援。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是組合字

【結果】

這是組合字

address Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:標示位置的資訊,通常以斜體方式呈現。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是一個位置

【結果】

這是一個位置

city Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是一段引述,通常以斜體方式呈現,但有些瀏覽器不會產生任何效果。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是一段引述的文字,可能是引用書名、作者等等。

【結果】

這是一段引述的文字,可能是引用書名、作者等等。

code Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是程式碼,使用(單一間距)的型態輸出。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是Programming程式碼

【結果】

這是Programming程式碼

dd Adobe Dreamweaver CS3

說明:在定義式清單裡,標示說明的開始和結束。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

術語1
術語1的說明
術語2
術語2的說明

【結果】

術語1
術語1的說明
術語2
術語2的說明

dfn Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:標示文章中的術語名稱,通常以斜體方式呈現。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是一個術語

【結果】

這是一個術語

dl Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:宣告一個定義式清單。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

術語1
術語1的說明
術語2
術語2的說明

【結果】

術語1
術語1的說明
術語2
術語2的說明

dt Adobe Dreamweaver CS3

說明:在定義式清單裡,標示術語的名稱。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

術語1
術語1的說明
術語2
術語2的說明

【結果】

術語1
術語1的說明
術語2
術語2的說明

ins Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是從其他網頁複製插入而來的,內容會劃底線顯示。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是轉載的內容

【結果】

這是轉載的內容

kbd Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是由鍵盤輸入,會使用(單一間距)的型態輸出,很少被使用。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

keyboard-input 的文字

【結果】

keyboard-input 的文字

q Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是引述的內容,會自動用雙引號括起來。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

這是引述的內容

【結果】

這是引述的內容

samp Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的內容是範例程式輸出的結果,會使用(單一間距)的型態輸出。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

sample output

【結果】

sample output

tt Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:代表標籤中的文字是由打字機輸入,會使用(單一間距)的型態輸出,很少被使用。在HTML5中不被支援。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

Teletype Text的文字

【結果】

Teletype Text的文字

var Microsoft Office FrontPageAdobe Dreamweaver CS3

說明:強調標籤中的內容是變數或是參數,通常以斜體方式呈現。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • title="標題":指定一個標題。

【範例】

Variable_A

【結果】

Variable_A