![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=1738864063-pk9kz9wdiVlbtH0vnjnES5X6n7W0Igjm-0-63f1e31a6af86369f69bb44e511a9af0)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82735.jpg?sign=1738864063-5GUNhk9WVzhmPSg2DgZt9tvuFVW22Tsy-0-84058688fc8f45fae09f146965caff91)
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=1738864063-EyVrY6j3pjtlRUuRDkB7YlGwf4qPOQ0N-0-ad5636a450592c7a457e8fc7e41d292f)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_119255.jpg?sign=1738864063-p7p36QCeXOM1Z1v5D3VSyIVeVtVqfMYr-0-fbbb2989b459911a9f5476f0d487ed31)
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=1738864063-AECQjb47FLclz5HIuXyS5dsqZ8DoCDAZ-0-e04a13de81d585d29253fc9214e94023)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119258.jpg?sign=1738864063-GTVVV2wKAtCvwKLX0WOADkRiivEMKGYR-0-a1447ad13b43531b216de1e096f3743c)
3-13 加上底纹<mark>元素
将资料加上底纹可以让读者更容易关注,所以一些需做特别解说的部分,最好加上底纹。
程序实例ch3_14.html:<mark>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82871.jpg?sign=1738864063-U7q15JUFZGVNRvAR07sxhdNSf4uZA5Z6-0-0c26afdb8eb7959b76fe16aa21894dad)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119259.jpg?sign=1738864063-zO08RNNdH75gqWfHHJy6arDdnjb8FuPf-0-3a40f39c7b8f3e1197ddd4f29c03f2f7)
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=1738864063-DjJPMXytmSz8LyBRZN12IJR3fqiYd61Q-0-e3b186fc2e35ce61d87cdf7055f171f6)
执行结果 读者可以将下列执行结果与ch3_10.html的执行结果做比较,可看到字号明显变小了。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82913.jpg?sign=1738864063-D2UHjIOezVG8MqwckLcBZkx2RPnpzb66-0-10371885e3b1155caebba5a8ce89fa1a)
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=1738864063-ssBDCcdsWnfLcEc7oAzspZWWgbMbogdy-0-010520fb85f77d6b56ee37703404e49a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119260.jpg?sign=1738864063-NpkkmMoaEbTphkpKi4WstsP01WpVTa7t-0-639d71a332cd2eab2f801ddb6ced584a)
程序实例ch3_17.html:<code>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82993.jpg?sign=1738864063-ReGy2mH3f4VQQKXdbljLlT0HKaBo1f2L-0-98d402976b8ae832479b6cb2b666d597)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119261.jpg?sign=1738864063-GUWLgUTsiknUDwtbBSvJ4J7D79EkX53M-0-18301dd9f38d3af486d7480c95681bc5)
3-16 定义缩写<abbr>元素
<abbr>元素主要用于定义一个缩写。
程序实例ch3_18.html:<abbr>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83028.jpg?sign=1738864063-Rhv3pDKrNjrxdiJKOA5Q5yuAVEkL2kUs-0-4db72977703471c89975048dacb14d11)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119262.jpg?sign=1738864063-HsedQwoGJDtdRfqB9OLXHdl7JILIwatd-0-e5c467df0ee27581804c08a0d5350838)
3-17 定义用语<dfn>元素
<dfn>元素用于定义用语,数据将以斜体输出。
程序实例ch3_19.html:<dfn>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83064.jpg?sign=1738864063-rgX8ikj2U2A6FpkCfRHvgj3P8J9WkfpW-0-d949b7f7c7ed57b2ea5900e8b51104fb)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83071.jpg?sign=1738864063-nsRxUvVLpyT5euLLfICfu8KqPMZjOINB-0-9f496890fb7ce134546f4e322cc75af7)
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=1738864063-2t8vfdqsRxiGkjJ1hWqvCZtuUjh3Cpvb-0-115bba2e0331f130c244eb6d6e256d71)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83140.jpg?sign=1738864063-1bZ5plyf45kx3Z5MncU2lE5trD29f6uu-0-788d150f1e56afba3847e33704702ffd)
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=1738864063-QbO8NuvkjsuCxHC4a4oh4wH9ewFuM7EL-0-35599c3c2c0e6118b9597ca7eaf9e427)
执行结果 下图所示为ch3_21.html在支持<bdi>元素的Google Chrome中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119266.jpg?sign=1738864063-ahkg5XNgfTCJMIRO7JbYCpCUH7PZN6FV-0-1f4d985dbda3a23d0443045338a95761)
执行结果 下图所示为ch3_21.html在不支持<bdi>元素的IE中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119267.jpg?sign=1738864063-YNXQdd9YfpS3jPc9VxrfeizxVBNgIbg3-0-b8ff078b4cfc46c39a1285647731de7c)
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=1738864063-peOCl3EWaCyzXz6OytaemExtA99LqRMI-0-01f1b3075f4fdb9b5dde49ab68d53f8d)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83251.jpg?sign=1738864063-gMrYVmsyjEkeCkLBC07ZQpWTvqOt8VdB-0-133ee391841a69c9e0424462ef5e1e2a)
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=1738864063-mskXVkfnrPaIhCCKQc5HDyL8R4Olb5IY-0-6bac73751786e71ba45d528e070a5a7a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_119270.jpg?sign=1738864063-kie4ceD3gQMuwJntARfyjVSrVphJk9gF-0-79288f98fa65b1ce9922def777817aeb)
上图是浏览器支持注音的状况,如果遇上浏览器不支持时,可考虑使用下面的程序实例实现。下例处理的情况是当浏览器不支持注音功能时,列出括号内的内容。
程序实例ch3_24.html:加上<rp>元素,重新设计ch3_23.html。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P41_83324.jpg?sign=1738864063-81smI69G41NPcyh5ZBxFd7IIBOgGgbuD-0-4f4f2cbd65877288624a06426bfde012)
由于目前主要浏览器均已支持<ruby>和<rt>元素组成的标示注音或拼音功能,所以这个程序的执行结果与ch3_23.html相同。