【HTML】<ruby>

最新推荐文章于 2025-05-16 12:36:15 发布

德育处主任Pro

最新推荐文章于 2025-05-16 12:36:15 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39415598/article/details/93545797

微信订阅号：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>