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相同。