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

厦门德仔

已于 2023-03-26 08:55:58 修改

阅读量611

点赞数

CC 4.0 BY-SA版权

分类专栏： # Css/Html 文章标签： ruby html5

于 2023-02-13 09:09:42 首次发布

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/129003062

Css/Html 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了Ruby语言中的注释方法，以及在HTML中使用ruby、rp和rt标签来实现对文本的注音或解释。rp标签用于在不支持ruby的浏览器中提供括弧，rt则定义字符的发音。示例展示了如何用这些标签给中文诗词添加拼音。

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ruby { font-size: 40px; }
</style>
</head>

<body>
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>shuāi</rt>
</ruby>。
</body>
</html>