![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=1738866424-MTeq7Pk1K6gJRJ7y4lzWjh5DDjhHDT7O-0-17134ebeb681191fb7a89e1ae719ae09)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82735.jpg?sign=1738866424-BWSEJvgLLiJsQTPYGQXzdOW0bIUaSGlm-0-8f3dc2bc656925f2d921f7af15ddd52e)
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=1738866424-vPu1fUGQpuR9DaIdQvEDBzKJLyQmv7iR-0-6a4e47d02fb7df1a907cf31499cdc392)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_119255.jpg?sign=1738866424-ltmeQVVecZIXQ0EmhSIIF88kvVOUkX0M-0-eecabc68d6068bd096aadeedd33aa11e)
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=1738866424-FmhNpa14aF12smbIR5JpaUI7HOwppC1s-0-7ac272be2ba3d808f2d454334cc8c0b0)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119258.jpg?sign=1738866424-LwlY1kVuq8N7OfKuxSV02IinlOFVxxqd-0-6bb3f28c3a9fd9bfcbbe1ca1385f6748)
3-13 加上底纹<mark>元素
将资料加上底纹可以让读者更容易关注,所以一些需做特别解说的部分,最好加上底纹。
程序实例ch3_14.html:<mark>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82871.jpg?sign=1738866424-NOaIvScPF3Xr44Ei3B3rAV7fndwhggrR-0-653785e37506e47a3bd046cd6013f06a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119259.jpg?sign=1738866424-XWRaBCkRGjnEuFcDNhyLFZQ44hczjUaN-0-85dec34ed6a0099c4b8565db59572361)
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=1738866424-1os58G45m8ZH3cYoDutrhVZjBa2sC8hA-0-34d6a5f20d9af7adf04a88bbea0082a6)
执行结果 读者可以将下列执行结果与ch3_10.html的执行结果做比较,可看到字号明显变小了。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82913.jpg?sign=1738866424-bLiko2Zpvx1IcF5QfR5t44qj3zDNAKov-0-d33b06f9fd282e47232263bf61a564b4)
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=1738866424-mN2IYRv7TvYaXrE4mewMGxQGVgElTeMw-0-009e38289b8b4225c008a90b72d7deaf)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119260.jpg?sign=1738866424-oXgoDifVKagkcxETTQNgdNCaBdiUUg9l-0-1cc6c137f26e31fc42fc107df0ce3907)
程序实例ch3_17.html:<code>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82993.jpg?sign=1738866424-7rnncAbvPCypSgeHa9gt8jceur42hXJj-0-2e7ccd8b93862725431b7cfd8eaa50bc)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119261.jpg?sign=1738866424-ZRAG8duJWiATEIlDV55Y4jgqiAYzCiU6-0-9a5b99816de2b4cc9d64a7b163ce32b5)
3-16 定义缩写<abbr>元素
<abbr>元素主要用于定义一个缩写。
程序实例ch3_18.html:<abbr>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83028.jpg?sign=1738866424-NlnQuigmHm9mkv1tI1pUc4IpmakdfAJM-0-8f93920a414c525e280b3742f4e542a3)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119262.jpg?sign=1738866424-mlLG07u8lfkZ0WDC5LYHVsghwgaOtwPq-0-3c677cfb50b097d6fd27a00a48a1ccb8)
3-17 定义用语<dfn>元素
<dfn>元素用于定义用语,数据将以斜体输出。
程序实例ch3_19.html:<dfn>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83064.jpg?sign=1738866424-0Av7Mt2MCTd28fy1vfkbikdBwlkqXhbz-0-bf4e12828a2f3024a8ec949d2721427f)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83071.jpg?sign=1738866424-sT6qGQm7bGdzvNVo3HWux7L3zfHokiY6-0-e9196930ccafc91eef4cebb9615abf12)
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=1738866424-tvFYsKrCLJ6gpYbTIailCzfVmJbQnAOi-0-af0f52750666c0567e451980aa66ebb0)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83140.jpg?sign=1738866424-PoaEoTd0Cpdq9SkMO8yySG9S46Vtm1XU-0-94b7c237774115486606907d18fe45c4)
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=1738866424-ZVSYJWj7jFLMsdZVHAeNuWSoHzlYxoGp-0-6b6ed9ed6af998bfcc83c0e82b741e64)
执行结果 下图所示为ch3_21.html在支持<bdi>元素的Google Chrome中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119266.jpg?sign=1738866424-JCxHatn9Z12B36GIavIXbaftWqscZ222-0-54e89086027cf562fe052a9a1b31b116)
执行结果 下图所示为ch3_21.html在不支持<bdi>元素的IE中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119267.jpg?sign=1738866424-kn6Xnwm7ysOq4wf3uvOLKLtfcB4FPy4Y-0-59612ece7d5f4140c0521dafe398b92b)
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=1738866424-VTEKaarWWIDPGq6xA69k96yQIvWzWI7Z-0-41b2f1db6148ea681afe9cb20772485c)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83251.jpg?sign=1738866424-5RlS43sLZLhx76YOyWby5dIp8HsXcJQy-0-7eac93f49e786ccde4fc80f3103288f5)
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=1738866424-xf5GEYfDK0oFs5xoelovYCkimeSh4a3w-0-e4f6221bd74c3bbc48a6af2f9b566744)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_119270.jpg?sign=1738866424-UnPbGtZNdbIJPGHOXkQ0MBp2npzMRJ5V-0-c1b1f639e6b7234128fde70a5cd4442a)
上图是浏览器支持注音的状况,如果遇上浏览器不支持时,可考虑使用下面的程序实例实现。下例处理的情况是当浏览器不支持注音功能时,列出括号内的内容。
程序实例ch3_24.html:加上<rp>元素,重新设计ch3_23.html。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P41_83324.jpg?sign=1738866424-IDn6SJM6bRHM9h3ky7guhgY1uIi6E9Xo-0-f01bb91d10f87926b27630cf28d14926)
由于目前主要浏览器均已支持<ruby>和<rt>元素组成的标示注音或拼音功能,所以这个程序的执行结果与ch3_23.html相同。