【HTML】<ruby>

作者: 德育处主任 | 来源:发表于2019-05-19 21:22 被阅读2次
微信订阅号:Rabbit_svip

根据w3c的定义

<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
<ruby> 以及 <rt> 标签一同使用:ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

简单来说, ruby 标签就是可以给中文加个拼音的。

<body>
    <p>
        这是一段<ruby>中文<rp>(</rp><rt>zhongwen</rt><rp>)</rp></ruby>
    </p>
</body>
微信订阅号:Rabbit_svip

如果不支持 <ruby> 的浏览器,会以下图的方式显示出来。

微信订阅号:Rabbit_svip

也可以给 <ruby><rp><rt> 标签添加样式。

<style>
    ruby {
        color: coral;
        cursor: default;    
    }
    rt {
        color: darkturquoise;
        display: none;
    }
    ruby:hover rt {
        display: block;
    }

</style>



<body>    
    <p>
        这是一段<ruby>中文<rp>(</rp><rt>zhongwen</rt><rp>)</rp></ruby>
    </p>
</body>
微信订阅号:Rabbit_svip

相关文章