html网页制作学习:[6]ruby拼音显示标注
在我们编写html网页中如果我们想要在文字上面显示拼音怎么办呢?同样我们不用担心,html元素中有ruby元素,是专门用来解决如何给文字注上拼音,就是文字头上的字。
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/75af02324b18512c4af2df13ad334884cde3495b.jpg)
工具/原料
DW或其它网页编辑软件
ruby,rt,rp元素分别介绍
1、ruby元素用来显示包含文字的注音。ruby原本是印刷的语言,指放于表意文字上方或右边的拼音或批注,广泛应用于日文和中文,因为中文标注多为注音符号,所以称为注音标注或都注音标示。
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/506d92f1d8a726338187ca57c02c56ee7b7f445b.jpg)
2、rt是来用 显示要加上注音标注的文字 ,也就是用来显示 标注的注意符号,rt元素为ruby元素的子元素,只能布置于ruby元素的标签内容中,而rt元素的标签内容则可布置ruby元素之外的任何内联元素
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/4a6d48ee7b7f860eb376e24077f5ee0d3acebe5b.jpg)
3、rp元素是用来显示无法对应标注时所使用的符号,通常是括号(),在不支持标注的浏览器中,标注则当作 一般文字恝依在绌来对待。若浏览器支持标注则不会显示rp元素所包含的括号。rp元素也为ruby元素的子元素,只能放置于ruby元素的标签内容中,而在应用时一定要在rt元素的前后放上成对的括号。
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/7d34fbf4fcf5ee0de9cdad63f96b0ce265e7ba5b.jpg)
ruby,rt,rp代码示例
1、效果展示。<ruby><p>失 去 你 我 不 难 过<rt>si qu ni wo bu nan guo</rt></ruby></p><p><ruby>百 度 经 验 作 者<rp>(</rp><rt>bai du jing yan zuo ze</rt><rp>)</rp></ruby></p>
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726bdae16253bf0f64781423b95b.jpg)
2、当然这个元素在不同浏览器的兼容不一样,比如我在IE下测试就不好看了。
![html网页制作学习:[6]ruby拼音显示标注](https://exp-picture.cdn.bcebos.com/64a62a0f6478142365ba718aaac2bbd6e1d0b25b.jpg)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:94
阅读量:87
阅读量:56
阅读量:62
阅读量:51