3-10 粗體顯示<b>和<strong>元素

過去<b>元素只是標示粗體文字，而HTML5更強調的是元素的語意。因此<b>元素雖然顯示時是粗體，但是原始的用意是希望用戶將其應用在文件的關鍵詞，例如商品介紹或目錄內的商品名稱，或是想要將某字符串與其他內容區隔。

<strong>元素也可以讓內容以粗體顯示，一般是用在重要內容上。

程序實例ch3_11.html：<b>和<strong>元素的應用。

執行結果

3-11 斜體<em>和<i>元素

過去<i>元素只是標示斜體文字，而在HTML5中還代表聲音、情感、思考、船舶名稱或不同的語言類別等。

<em>元素雖然也是將所標示的文字以斜體顯示，但是此元素語意的重點是強調，如果表示重要內容則建議使用<strong>元素。

程序實例ch3_12.html：<em>和<i>元素的應用。

執行結果

3-12 引用<cite>、<q>和<blockquote>元素

<cite>元素可以讓內容以斜體顯示，主要用在引用源的標題。

<q>元素可以讓內容前后自動加上引號，主要用在引用短篇文章或段落元素時。如果所引用的短文位于因特網則應使用<cite>元素，下一章會以程序實例ch4_9.html做說明。

<blockquote>元素主要用于引用長篇文章，所引用的文章會有縮排效果，如果所引用的文章位于因特網則也應使用<cite>元素。

程序實例ch3_13.html：<cite>、<q>和<blockquote>元素的應用。

執行結果

3-13 加上底紋<mark>元素

將資料加上底紋可以讓讀者更容易關注，所以一些需做特別解說的部分，最好加上底紋。

程序實例ch3_14.html：<mark>元素的應用。

執行結果

3-14 小型字<small>元素

<small>元素雖然可以讓所標示的文字變小，但是，這不是這個元素主要的意義，它的主要意義是用于批注信息，例如網頁腳注區的法律聲明、警告聲明或著作權聲明等。

程序實例ch3_15.html：修改ch3_10.html的第28行。其實該行數據就很適合用<small>元素標示，下面將只列出該行內容。

執行結果 讀者可以將下列執行結果與ch3_10.html的執行結果做比較，可看到字號明顯變小了。

3-15 顯示與計算機有關聯的文字<kbd>、<samp>、<var>和<code>元素

<kbd>元素主要用于顯示計算機鍵盤或語音輸入的內容。

<samp>元素主要用于顯示計算機程序產生的結果。

<var>元素主要用于顯示變量，例如顯示程序語言的變量或數學公式的變量。

<code>元素主要用于顯示部分程序語言的原始碼、HTML或CSS的元素名稱或屬性等。

程序實例ch3_16.html：<kbd>、<samp>和<var>元素的應用。

執行結果

程序實例ch3_17.html：<code>元素的應用。

執行結果

3-16 定義縮寫<abbr>元素

<abbr>元素主要用于定義一個縮寫。

程序實例ch3_18.html：<abbr>元素的應用。

執行結果

3-17 定義用語<dfn>元素

<dfn>元素用于定義用語，數據將以斜體輸出。

程序實例ch3_19.html：<dfn>元素的應用。

執行結果

3-18 內容新增與刪除<ins>和<del>元素

<ins>元素表示新增加的資料，將以加下畫線的方式表示。

<del>元素表示要刪除的元素，將以加刪除線的方式處理。

程序實例ch3_20.html：<ins>和<del>元素的應用。

執行結果

3-19 隔離雙向文字走向<bdi>元素

<bdi>其實是指Bi-Direction Isolation，也就是隔離雙向文字走向。

中文或英文在橫向書寫時，皆是由左到右，但是有些語言，例如希伯來文或阿拉伯文，書寫方向是由右到左，即使用編輯程序編輯希伯來文或阿拉伯文時，從輸入第2個字起，該字將被自動放在前一個字的左邊。如果所編文件是中文或英文交雜著阿拉伯文或希伯來文時，就會有文字方向的錯亂，使用<bdi>元素可以避免此狀況。

值得注意的是目前IE尚未支持此元素，不過Google Chrome和Opera則支持該元素。

程序實例ch3_21.html：<bdi>元素的應用。這個程序第12行的希伯來文英文字意是Mary。

執行結果 下圖所示為ch3_21.html在支持<bdi>元素的Google Chrome中的執行結果。

執行結果 下圖所示為ch3_21.html在不支持<bdi>元素的IE中的執行結果。

3-20 指定文字走向<bdo dir="direction"> … </bdo>

瀏覽器可以根據網頁所用語言判斷文字的走向。<bdo>元素可以直接利用dir屬性設定文字走向，格式如下：

    <bdo dir="direction"> … </bdo>

direction可取下列值：

ltr：由左到右。

rtl：由右到左。

程序實例ch3_22.html：<bdo>元素的應用。

執行結果

3-21 標示注音或拼音<ruby>、<rt>和<rp>元素

使用<ruby>元素可以為每個漢字加上注音或拼音，此外，我們也可以利用這個功能為漢字加上英文拼音。本節將講解這方面的應用。

<ruby>元素主要用于標示拼音的范圍。

<rt>元素是<ruby>元素的子元素，放置的是拼音。

<rp>元素是<ruby>元素的子元素，當瀏覽器不支持<ruby>元素時，就顯示<rp>元素中的內容；如果瀏覽器支持<ruby>元素，就不顯示<rp>元素中的內容。早期Google Chrome和Opera瀏覽器尚未支持拼音功能時，這個元素還很有用，但是現在這個功能比較少用了，因為筆者測試目前幾乎所有主要瀏覽器，如IE、Google Chrome、Opera、Safari和Firefox均已支持此功能了。

程序實例ch3_23.html：<ruby>和<rt>元素的應用。本程序會為“明志科大”加上注音，同時也為“明志”加上英文拼音。

執行結果

上圖是瀏覽器支持注音的狀況，如果遇上瀏覽器不支持時，可考慮使用下面的程序實例實現。下例處理的情況是當瀏覽器不支持注音功能時，列出括號內的內容。

程序實例ch3_24.html：加上<rp>元素，重新設計ch3_23.html。

由于目前主要瀏覽器均已支持<ruby>和<rt>元素組成的標示注音或拼音功能，所以這個程序的執行結果與ch3_23.html相同。