![HTML5+CSS3王者归来](https://wfqqreader-1252317822.image.myqcloud.com/cover/809/26846809/b_26846809.jpg)
3-10 粗体显示<b>和<strong>元素
过去<b>元素只是标示粗体文字,而HTML5更强调的是元素的语意。因此<b>元素虽然显示时是粗体,但是原始的用意是希望用户将其应用在文件的关键词,例如商品介绍或目录内的商品名称,或是想要将某字符串与其他内容区隔。
<strong>元素也可以让内容以粗体显示,一般是用在重要内容上。
程序实例ch3_11.html:<b>和<strong>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82728.jpg?sign=1739299140-7PkEIuxQNyefof4kdT0NDcEIMkQ7jeC7-0-5efb3a1ba0b925a441e7b3272386a584)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82735.jpg?sign=1739299140-yel9Camy4LJJJqYCtzGqXE2o0M33hI2f-0-8b2835eaec615c9567af318a983fee01)
3-11 斜体<em>和<i>元素
过去<i>元素只是标示斜体文字,而在HTML5中还代表声音、情感、思考、船舶名称或不同的语言类别等。
<em>元素虽然也是将所标示的文字以斜体显示,但是此元素语意的重点是强调,如果表示重要内容则建议使用<strong>元素。
程序实例ch3_12.html:<em>和<i>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82764.jpg?sign=1739299140-KWxUZU7kU1X2tHw1b1R3rvP8yhFdviDM-0-f531b111dce49d6844dc806868ce77ed)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_119255.jpg?sign=1739299140-ake8sKLaD3PfB7jb5obBhj3Cn2ighTBl-0-b72d917220e3f37b67a8850bee29c610)
3-12 引用<cite>、<q>和<blockquote>元素
<cite>元素可以让内容以斜体显示,主要用在引用源的标题。
<q>元素可以让内容前后自动加上引号,主要用在引用短篇文章或段落元素时。如果所引用的短文位于因特网则应使用<cite>元素,下一章会以程序实例ch4_9.html做说明。
<blockquote>元素主要用于引用长篇文章,所引用的文章会有缩排效果,如果所引用的文章位于因特网则也应使用<cite>元素。
程序实例ch3_13.html:<cite>、<q>和<blockquote>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82801.jpg?sign=1739299140-lYQAtvPPOC5uzbbYFI4UqfP43C6AwuQC-0-72bea5e92b7664fb9ee5ca0d34ebd656)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119258.jpg?sign=1739299140-2SipzGiGRZdzatRVgFP7KvsR3a85xjnF-0-8bd8643a6e334c2b79ba52213ed4059e)
3-13 加上底纹<mark>元素
将资料加上底纹可以让读者更容易关注,所以一些需做特别解说的部分,最好加上底纹。
程序实例ch3_14.html:<mark>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82871.jpg?sign=1739299140-LehsKUPk7NbTbFd2qYEEG1GxtpQkO0dR-0-b39b96787d189c7931b7446c4bab0b2d)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119259.jpg?sign=1739299140-jxy1DfmwydSRsKBmRkaQaVM0KQ5uQUTQ-0-57043f5ba44e8a441b644fded3f7300e)
3-14 小型字<small>元素
<small>元素虽然可以让所标示的文字变小,但是,这不是这个元素主要的意义,它的主要意义是用于批注信息,例如网页脚注区的法律声明、警告声明或著作权声明等。
程序实例ch3_15.html:修改ch3_10.html的第28行。其实该行数据就很适合用<small>元素标示,下面将只列出该行内容。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82907.jpg?sign=1739299140-qCauOvVDa1D0AI7JuhjYM4zW2yFPkJ9C-0-af5952a5feb8cb9653e9c8eafba33578)
执行结果 读者可以将下列执行结果与ch3_10.html的执行结果做比较,可看到字号明显变小了。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82913.jpg?sign=1739299140-64tnfzvzkc6OKIyIGIt6i7j8kfrwO1dG-0-ddfcc3f1250a54127877486dd12c4cb1)
3-15 显示与计算机有关联的文字<kbd>、<samp>、<var>和<code>元素
<kbd>元素主要用于显示计算机键盘或语音输入的内容。
<samp>元素主要用于显示计算机程序产生的结果。
<var>元素主要用于显示变量,例如显示程序语言的变量或数学公式的变量。
<code>元素主要用于显示部分程序语言的原始码、HTML或CSS的元素名称或属性等。
程序实例ch3_16.html:<kbd>、<samp>和<var>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82984.jpg?sign=1739299140-wHFwF4OcxhIdthfAoyPhSdtYODta0QUK-0-5c72c23228230ec266d893fcbfbbf4c2)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119260.jpg?sign=1739299140-xyJcWm8ReX2z2PSmIMuhWSi1uHkwL4bw-0-8dc15b2075f41177c718d0c6edd065fb)
程序实例ch3_17.html:<code>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82993.jpg?sign=1739299140-6FMquaF2Kb5esLHHhLlUmevu3K1bd4e4-0-cc5d7b62185ef641f05614474fb8ac15)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119261.jpg?sign=1739299140-ObwIyc8CJ7csYfjdtXhe0cK9HxyGQl5g-0-d46c914f2a095770673cacd9dddc89f7)
3-16 定义缩写<abbr>元素
<abbr>元素主要用于定义一个缩写。
程序实例ch3_18.html:<abbr>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83028.jpg?sign=1739299140-hmUuiQVTB5l2Bka4sp64sZURLOJmm2AZ-0-309ebd5475e1597e8e2c9ee30905e497)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119262.jpg?sign=1739299140-NGRlSFFJWGXUBDR43NzUv8f6auSLprMI-0-985949992a194d591f7e66adc669e21d)
3-17 定义用语<dfn>元素
<dfn>元素用于定义用语,数据将以斜体输出。
程序实例ch3_19.html:<dfn>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83064.jpg?sign=1739299140-KpzNeUoG9bKlhaX10EK8SDJKl2i56HSt-0-3ab312cc113dd61f4557af544866d388)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83071.jpg?sign=1739299140-HYoTSHQlwavD0Hj0baoeCUO86nBdij1E-0-7c585c3cb605cfb0ef970e4cd6de2b15)
3-18 内容新增与删除<ins>和<del>元素
<ins>元素表示新增加的资料,将以加下画线的方式表示。
<del>元素表示要删除的元素,将以加删除线的方式处理。
程序实例ch3_20.html:<ins>和<del>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83133.jpg?sign=1739299140-9usj1TUcpqD3KPpb9wUo9OQRv19PMudP-0-820d4cca433288fc0eb9dfae9854b09d)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83140.jpg?sign=1739299140-A6JZjZhITmITm9lGLEMZEzpCEgK1q6qC-0-21c44e855bf11e0cac61eaa0e3d34273)
3-19 隔离双向文字走向<bdi>元素
<bdi>其实是指Bi-Direction Isolation,也就是隔离双向文字走向。
中文或英文在横向书写时,皆是由左到右,但是有些语言,例如希伯来文或阿拉伯文,书写方向是由右到左,即使用编辑程序编辑希伯来文或阿拉伯文时,从输入第2个字起,该字将被自动放在前一个字的左边。如果所编文件是中文或英文交杂着阿拉伯文或希伯来文时,就会有文字方向的错乱,使用<bdi>元素可以避免此状况。
值得注意的是目前IE尚未支持此元素,不过Google Chrome和Opera则支持该元素。
程序实例ch3_21.html:<bdi>元素的应用。这个程序第12行的希伯来文英文字意是Mary。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83169.jpg?sign=1739299140-muWj7eMpqmd7wB5ALIs4rK2P5CCaL46z-0-f9e89f75420498c2bc9d3b6538587517)
执行结果 下图所示为ch3_21.html在支持<bdi>元素的Google Chrome中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119266.jpg?sign=1739299140-1J13JtHHolvxrzDSQeO2O0XaidixJOZ4-0-4d8317d9254f9a8815d2834f5d69b2c9)
执行结果 下图所示为ch3_21.html在不支持<bdi>元素的IE中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119267.jpg?sign=1739299140-Lh3dwYj2MywgteRzOmXrXHcy26drU7Xp-0-93e0de49683b8806f55deb6d2290144b)
3-20 指定文字走向<bdo dir="direction"> … </bdo>
浏览器可以根据网页所用语言判断文字的走向。<bdo>元素可以直接利用dir属性设定文字走向,格式如下:
<bdo dir="direction"> … </bdo>
direction可取下列值:
ltr:由左到右。
rtl:由右到左。
程序实例ch3_22.html:<bdo>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83244.jpg?sign=1739299140-CzVyQItGXT78HFDNYg1yqbRPn0nUUyNj-0-2bedc92ea16cf314f86429756d7e593a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83251.jpg?sign=1739299140-mPURZq2a37uEMUW3VuaS8iVwCZ88NiaO-0-6d1e4bb024743521884ea16223f5687a)
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>元素的应用。本程序会为“明志科大”加上注音,同时也为“明志”加上英文拼音。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83280.jpg?sign=1739299140-jHCJkGwqfnnL5bOKcyoEXabfmGbHHQeF-0-97fac0da8b7ba99d43885e65c663de13)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_119270.jpg?sign=1739299140-G1QidXXhgAXmgvVskEfTB0K2YKIqIX2y-0-33443ea7fd5b5a6cc0f9f42686108861)
上图是浏览器支持注音的状况,如果遇上浏览器不支持时,可考虑使用下面的程序实例实现。下例处理的情况是当浏览器不支持注音功能时,列出括号内的内容。
程序实例ch3_24.html:加上<rp>元素,重新设计ch3_23.html。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P41_83324.jpg?sign=1739299140-b7aqBbIXfaDIX6IdGngOG2D1FZT50FGV-0-cd0a4d17ed44422e51910a9a3a0f2d9d)
由于目前主要浏览器均已支持<ruby>和<rt>元素组成的标示注音或拼音功能,所以这个程序的执行结果与ch3_23.html相同。