HTML中使用ruby标签添加音标或者注释

最新推荐文章于 2025-03-29 19:45:42 发布

Hansel.Wn

最新推荐文章于 2025-03-29 19:45:42 发布

阅读量716

点赞数 2

分类专栏： HTML 文章标签： ruby 前端

本文链接：https://blog.csdn.net/Dominic_W/article/details/125255248

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML中的Ruby标签，用于在网页上显示字符的注音或解释。Ruby由ruby、rp和rt标签组成，rp用于在不支持ruby的浏览器中提供括号，rt则定义字符的发音。示例展示了如何为中文和英文单词添加注音，以及在不同方向上的显示效果。通过CSS可以调整音标的字体大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ruby语法说明：

ruby ：用它将需要注释或注音标的文字内容包围住，一般与rp、rt标签一起使用。
rp ：在 ruby 中使用，防备那些不支持ruby标记的浏览器，主要用来放置括弧。对于支持这个标记的浏览器，rp标记的CSS样式是{display:none;}。
rt ：定义字符的解释或发音，这个标记要跟在需要注释的文本后边。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby标签</title>
</head>

<body>
    <ruby>
        我<rp>（</rp>
        <rt>I</rt>
        <rp>）</rp>

        爱<rp>（</rp>
        <rt>Love</rt>
        <rp>）</rp>

        你<rp>（</rp>
        <rt>You</rt>
        <rp>）</rp>
    </ruby>

    <ruby>
        <rp>(</rp>饕餮<rt>taotie</rt><rp>)</rp>
    </ruby>
    <ruby>汉字 <rt>han zi</rt></ruby>
</body>

</html>