2008/10/30

片語元件: ABBR, ACRONYM, CITE, CODE, DFN, EM, KBD, SAMP, STRONG, VAR

片語元件可在文字片段，加上結構的訊息，賦予片語特定的意義。但是不同的瀏覽器，會有不同的顯示效果。使用 Internet Explorer, Firefox, Safari, Chrome 實際測試，發現展現的方式有不少差異。例如 ABBR 及 ACRONYM 在 Firefox 會加底線；其它瀏覽器卻沒有加底線。建議避免使用這些元件，多用風格表。

屬性說明
ABBR | ACRONYM | CITE | CODE | DFN | EM | KBD | SAMP | STRONG | VAR
通用屬性

此元件可以使用通用屬性，請參考通用屬性的說明。


元件使用說明
ABBR

表示縮寫字，例如 Inc.（incorporation）, etc.（et cetera）, abbr.（abbreviation）等等。可用 TITLE 屬性，詳述縮寫字的原文。

  • 範例：

    包括橘子，葡萄，香蕉，<abbr title='et cetera'>etc.</abbr>。<br>
    他在<abbr title='新竹科學園區'>竹科</abbr>工作。

  • 執行結果：

    包括橘子，葡萄，香蕉，etc.。
    他在竹科工作。

ACRONYM

表示首字母縮寫字，例如 ROC（Republic of China）, MBA（Master of business Administration）等等。可用 TITLE 屬性，詳述字母縮寫字的原文。

  • 範例：

    他苦讀多年終於拿到
    <acronym title='Master of business Administration'>
    MBA</acronym>。

  • 執行結果：

    他苦讀多年終於拿到 MBA。

CITE

內含的片語，是被引用的資料的來源。

  • 範例：

    <cite>孔子</cite>說：有朋自遠方來, 不亦樂乎!。

  • 執行結果：

    孔子說：有朋自遠方來, 不亦樂乎!。

CODE

標示出一段電腦程式碼。

  • 範例：

    Normal font<br>
    程式碼：
    <code>
    for(var i=0; i < 10; i++)
    {
      document.write('hello');
    }
    </code>

  • 執行結果：

    Normal font
    程式碼： for(var i=0; i < 10; i++) { document.write('hello'); }

DFN

指定專有名詞或術語的定義。

  • 範例：

    <dfn>眼鏡</dfn>：玻璃製作的光學物品，
    用來協助視力不良者。

  • 執行結果：

    眼鏡：玻璃製作的光學物品， 用來協助視力不良者。

EM

指定要強調所包含的片語。

  • 範例：

    我最喜歡吃的水果是
    <em>香蕉</em>。

  • 執行結果：

    我最喜歡吃的水果是 香蕉。

KBD

指定內含的片語，要由使用者用鍵盤輸入。

  • 範例：

    通關蜜語是小烏龜：
    <kbd>小烏龜</kbd>

  • 執行結果：

    通關蜜語是小烏龜： 小烏龜

SAMP

指定內含資料，是電腦程式輸出的範例。

  • 範例：

    一般數字：1 2 3 4 5 6 7<br>
    電腦算出來的質數：
    <samp>1 2 3 5 7 11 13 17 19 23 29</samp>

  • 執行結果：

    一般數字：1 2 3 4 5 6 7
    電腦算出來的質數： 1 2 3 5 7 11 13 17 19 23 29

STRONG

指定要更有力的強調內含的片語。

  • 範例：

    <span style='font-weight:normal'>
    我夏天最喜歡吃<em>西瓜</em>，
    <strong>好清涼ㄡ</strong>。</span>

  • 執行結果：

    我夏天最喜歡吃西瓜， 好清涼ㄡ。

VAR

標示內含的片語，是變數，或程式參數。

  • 範例：

    這個程式需要輸入<var>身份字號</var>。

  • 執行結果：

    這個程式需要輸入身份字號。

張貼者： ant2legs 於 清晨6:58

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章，圖片與程式的著作權，所有權利保留。