![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=1739297939-eaQZqfCWw7HPcTGD625BALIEivZIuLP5-0-aa4e27c7efdf4678b9364a5acb473027)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82735.jpg?sign=1739297939-ErBKNtJFOBRK9c03G1292cI26Fyo6WL3-0-fc2f31857e40eadc83559f5d6cb3ebe3)
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=1739297939-7e0Ig7pM8gQ8FR4KfU1IvRedaMztuOLw-0-e8cbacc4995bf785f6ad0877afe07c4c)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_119255.jpg?sign=1739297939-LyxEwW3MjUeuWwVmC2Per28pCDCyG9s0-0-a58e37d1759c9d9d4dab1ef5a383cc16)
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=1739297939-WxRoKgjv6qJVT8iJyM4LTBL6ojBqi8C4-0-e5094643877562a8dc5fac962961c496)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119258.jpg?sign=1739297939-2hvElLS2d3HJBwLlPEr1RK0FuDes1eth-0-d04d8dfa2978e79b20fec2af28773054)
3-13 加上底纹<mark>元素
将资料加上底纹可以让读者更容易关注,所以一些需做特别解说的部分,最好加上底纹。
程序实例ch3_14.html:<mark>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82871.jpg?sign=1739297939-IqVp2eck2f8eCjOX8JDxS87XQ3aod7lI-0-742a87693cfc69ca947d926f9bb6f241)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119259.jpg?sign=1739297939-UUW8ISzCzV4IjOGOQATLtjusgxeJ884r-0-63d6998621a40517b94ed5992fd3dd2d)
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=1739297939-RGuZvKYrH2oVpDc2pGR0B5rmLJJhgu3u-0-cd3c387ede938d2c38629cd2444e33b3)
执行结果 读者可以将下列执行结果与ch3_10.html的执行结果做比较,可看到字号明显变小了。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82913.jpg?sign=1739297939-e8LpXG27tIgJdJ0bCxZdqx1PIhiHhsBW-0-b212b46da518e44198745b75a6e3e1ed)
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=1739297939-nUYF5VR0tl3J6kcYcHTpuhTUT9oidkfW-0-ea7fbf934ccc42c6c13e0a209181e584)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119260.jpg?sign=1739297939-8OlseYjgKLETEC8L4ulNRhY7GZakyF4G-0-8f679b08495a3680632c2e5120c20780)
程序实例ch3_17.html:<code>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82993.jpg?sign=1739297939-f5jZQixlW3NhM03Dx8UuAf658TZi6j6A-0-dcd44f407c6f07f45da62f783c62f369)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119261.jpg?sign=1739297939-pUgxLP4SXqr5SlpllnV2tALsqAL8Ij1p-0-7623af26575dabe4b0b75cfe3f8f2d2a)
3-16 定义缩写<abbr>元素
<abbr>元素主要用于定义一个缩写。
程序实例ch3_18.html:<abbr>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83028.jpg?sign=1739297939-lsmpy0lsIUKD8KMfV90NciXN83Kn9COy-0-de76d3cf472c5b8687eca55bf651e650)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119262.jpg?sign=1739297939-gBzcnSizlQBV6LmmZ9QOWraxQ5DNlYNT-0-7772a27bd6e8dd24cd9eb461887a436d)
3-17 定义用语<dfn>元素
<dfn>元素用于定义用语,数据将以斜体输出。
程序实例ch3_19.html:<dfn>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83064.jpg?sign=1739297939-vsMpAjFFoikZrM70o9ytvl90QbX8cfz4-0-e185324a0f98b5a1a2caf8480c86a9c2)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83071.jpg?sign=1739297939-jLA79UwJNbCTcgODLtK8iaBF51FrykfC-0-0534b8092a4ac86ff6e6e9206b572f2f)
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=1739297939-OSNLMAKMhEYbriYcmrpHITNtTKeGBfMN-0-e87b39d729fe528358ff800653277cca)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83140.jpg?sign=1739297939-X70gadGeG3qlcBVnIN7vZITH9CByFuTr-0-e76e03534d86b2b84a66cd0d0866b10d)
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=1739297939-lx6NkJffQntVtLb2jSBoJmCfSlVwCNT8-0-ab24138c088bdc54501f1307b8c6ce0f)
执行结果 下图所示为ch3_21.html在支持<bdi>元素的Google Chrome中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119266.jpg?sign=1739297939-M8oh1yQFpoKHYXbF2Wq40x5kUAWYD7im-0-40b99acf4526ae4bc015cdb1d227b602)
执行结果 下图所示为ch3_21.html在不支持<bdi>元素的IE中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119267.jpg?sign=1739297939-DRPvvILRvKCrmtCThdlb8etbkDzTHPjQ-0-08cc10fa31c899a43032ffdbb2572d7a)
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=1739297939-INQGDmo7wWWr22ve4XmiAMAV7LxnZyDD-0-1598b258d73ca59a984cafe6ebf08160)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83251.jpg?sign=1739297939-93kk8IgE6cchcDkmrsBvf1cqWYBGlBSx-0-29da0405101167584d2ae23dd9efeafa)
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=1739297939-yJliALYLBMDISIM1C7u7msNcMdMz9uJ4-0-62b4ed6d8043ec81c72f3969d7e3483a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_119270.jpg?sign=1739297939-HbGXByCY4KqS7588yu7VjZrLD8cBFncE-0-8153cde44f5645b90165592da6b90138)
上图是浏览器支持注音的状况,如果遇上浏览器不支持时,可考虑使用下面的程序实例实现。下例处理的情况是当浏览器不支持注音功能时,列出括号内的内容。
程序实例ch3_24.html:加上<rp>元素,重新设计ch3_23.html。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P41_83324.jpg?sign=1739297939-ATo73z9QBVlugm85PMRdn15g0VM9K6DK-0-358217b282299bd59e928efb817fbe2a)
由于目前主要浏览器均已支持<ruby>和<rt>元素组成的标示注音或拼音功能,所以这个程序的执行结果与ch3_23.html相同。