html网页制作学习:[6]ruby拼音显示标注

 时间:2024-10-27 02:52:36

在我们编写html网页中如果我们想要在文字上面显示拼音怎么办呢?同样我们不用担心,html元素中有ruby元素,是专门用来解决如何给文字注上拼音,就是文字头上的字。

html网页制作学习:[6]ruby拼音显示标注

工具/原料

DW或其它网页编辑软件

ruby,rt,rp元素分别介绍

1、ruby元素用来显示包含文字的注音。ruby原本是印刷的语言,指放于表意文字上方或右边的拼音或批注,广泛应用于日文和中文,因为中文标注多为注音符号,所以称为注音标注或都注音标示。

html网页制作学习:[6]ruby拼音显示标注

2、rt是来用 显示要加上注音标注的文字 ,也就是用来显示 标注的注意符号,rt元素为ruby元素的子元素,只能布置于ruby元素的标签内容中,而rt元素的标签内容则可布置ruby元素之外的任何内联元素

html网页制作学习:[6]ruby拼音显示标注

3、rp元素是用来显示无法对应标注时所使用的符号,通常是括号(),在不支持标注的浏览器中,标注则当作 一般文字恝依在绌来对待。若浏览器支持标注则不会显示rp元素所包含的括号。rp元素也为ruby元素的子元素,只能放置于ruby元素的标签内容中,而在应用时一定要在rt元素的前后放上成对的括号。

html网页制作学习:[6]ruby拼音显示标注

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拼音显示标注

2、当然这个元素在不同浏览器的兼容不一样,比如我在IE下测试就不好看了。

html网页制作学习:[6]ruby拼音显示标注
  • css中如何指定文字在图片中的位置?
  • css如何单独设置上边框的宽度
  • Dreamweaver中制作spry表单文件域
  • 图解运行和调试ASP.NET Core Web 应用程序
  • css如何设置文字的水平方向浮动
  • 热门搜索
    上海大众怎么样 我微笑着走向生活 吃鸡进不去怎么办 烦了怎么办 如何下载qq sd卡是什么 excel乱码怎么办 如何设置网络打印机 退休生活 面基是什么意思啊