![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=1739299689-XThGDkCPSBAngLIHZ3URTiJb3FTGD4lh-0-bb0daa26ce05ed0d130788b8f7de48a9)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_82735.jpg?sign=1739299689-uHrgSfAJIPuk074bEAlfVzHYwC9j2Vsy-0-f8f491355dcfcb5062b808c63ab7eebe)
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=1739299689-g0yocUt6cu2vNEpKy1XvpHApntMZscM1-0-1b2d9b52d3d7a3c5073e854902912b75)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P36_119255.jpg?sign=1739299689-49p2qUES18LyCf6VK2fgyDvKAp49HpGD-0-6cd1af7fe1ef607a15f8dc8fcae6be58)
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=1739299689-QUXy8ENw92udRodcpWJNPJz5tbWs4uRp-0-19ae83db142479ba6184a492320e4837)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119258.jpg?sign=1739299689-3V5Iytpet2eEu1xN9cognP3ehDkbenMF-0-28f47a40c7c63d57ff416d5e5c25d803)
3-13 加上底纹<mark>元素
将资料加上底纹可以让读者更容易关注,所以一些需做特别解说的部分,最好加上底纹。
程序实例ch3_14.html:<mark>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82871.jpg?sign=1739299689-ViRfl4O3wNmmlzZPEzORy3fbyqhAJZl6-0-e8856293fd297112198652df85a0fd8a)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_119259.jpg?sign=1739299689-tBs1B4ZFfiWdMIwDp7ut9YjZkF7rJyj5-0-8b4ee15e10b91d6421ad5cc1d9806845)
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=1739299689-l2ZvcR2GfxuCjSlluWrfUluMBa3EIG7a-0-cc94984121f541b59be385e212707431)
执行结果 读者可以将下列执行结果与ch3_10.html的执行结果做比较,可看到字号明显变小了。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P37_82913.jpg?sign=1739299689-gjYN6wIrOnzLDv4K5EhYi3Ywqa6wGisn-0-8e439ce029335df59f9c74fa8b370192)
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=1739299689-52baj0rHbrB90JioBsA0glBb4pOeILbu-0-224018167a5637a4e277671d2144ac0f)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119260.jpg?sign=1739299689-JpcfGdsjamSLLTBZZpcQ3R9G40L0qbjh-0-9b318e771499095301ca1cba5291c398)
程序实例ch3_17.html:<code>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_82993.jpg?sign=1739299689-XgdqeNDF4Q2NQXIebTqlwr41UdFCqW2S-0-ee3299ee6a2b7d6092efa1abb4b94848)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119261.jpg?sign=1739299689-wpYxYWoJJJz91WzV46L0X7hNBj6Xd7Ww-0-cf0c7aa83fa8f28a4ac8c969764466dc)
3-16 定义缩写<abbr>元素
<abbr>元素主要用于定义一个缩写。
程序实例ch3_18.html:<abbr>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83028.jpg?sign=1739299689-MfuX9Jrh7o1pcK6hFhWWP5WvlllA9ALD-0-2d9caeff34a883ef8ed4031a8d27f1b4)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_119262.jpg?sign=1739299689-buytMfpeEFjY25iXbyjAPQUCzNxVSssj-0-ca0a4bc148422b51355bd131d1278e9b)
3-17 定义用语<dfn>元素
<dfn>元素用于定义用语,数据将以斜体输出。
程序实例ch3_19.html:<dfn>元素的应用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83064.jpg?sign=1739299689-KzAEwR07zU5KVOz6spkWkvEyzzQxabil-0-5014287d09a421a6edd081a44e67eab4)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P38_83071.jpg?sign=1739299689-nCse2bKKHLkpOWspiBt5zEHzVJspVMpj-0-d3213b04f48da9d27e024c40ceb97ae6)
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=1739299689-itPSCAQ6J3uEX82uYP1XP0hUiqQdd2GQ-0-925643d9ebbf41a26f20d5f623364e3d)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_83140.jpg?sign=1739299689-OeHwlZrrY6nUq2sxipyVCNNj5m7qi7wy-0-91098ade48e4321b5095a871c3268158)
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=1739299689-oXzYKEAAj3xlGpZB39YBwGQAKHunnJ6l-0-5add15940c9179c9628909b583c98b55)
执行结果 下图所示为ch3_21.html在支持<bdi>元素的Google Chrome中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119266.jpg?sign=1739299689-rq91Oyo6UxRstvJbO9BVKVRlvHOltRoc-0-dbfedfdadaf6ef0ab38325945404729e)
执行结果 下图所示为ch3_21.html在不支持<bdi>元素的IE中的执行结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P39_119267.jpg?sign=1739299689-tHNJo8qyngTMyXZwzWzO3g0EpY78vkEe-0-d0de68e89f760913f673b35bbd99c2e9)
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=1739299689-lWnBVSK5eNoE58OSNk7YJCEtUAxOZX7m-0-0e9782b743a10e2db681717566954d38)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_83251.jpg?sign=1739299689-t7Rx3uS5QxF1nseo2bhOSWn00psGhB0w-0-186d89127c98916a4d2fa04553f9accc)
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=1739299689-RggcktqJXAH8fs8odqy04zmA0FIwg32n-0-972cb483e0592d04135e7d82b8558c06)
执行结果
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P40_119270.jpg?sign=1739299689-K6L3sDTx6GTuq3MWifrzL2qb6coEDCKa-0-f5260f19203cd0589987daaaea64e7e3)
上图是浏览器支持注音的状况,如果遇上浏览器不支持时,可考虑使用下面的程序实例实现。下例处理的情况是当浏览器不支持注音功能时,列出括号内的内容。
程序实例ch3_24.html:加上<rp>元素,重新设计ch3_23.html。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P41_83324.jpg?sign=1739299689-C3gBtvKlCe5KIg1NKXl8XPJhW274QSm7-0-fd71a19817184f7adb0e421cce6faac9)
由于目前主要浏览器均已支持<ruby>和<rt>元素组成的标示注音或拼音功能,所以这个程序的执行结果与ch3_23.html相同。