HTML中ruby、rt和rp标签的作用及注音符号添加方法
在网页内容排版中，经常会遇到需要为文字添加注音的场景，比如展示汉字的拼音、日文假名标注等。HTML专门提供了ruby、rt、rp三个标签来支持这类需求，下面分别介绍它们的作用和使用方法。
三个标签的核心作用
1. ruby标签
ruby是容器标签，用于包裹需要添加注音的文本和对应的注音内容，是注音标注的根容器。所有需要注音的文字和对应的注音标记都需要放在ruby标签内部，浏览器会识别这个标签并按照注音排版规则渲染内容。
2. rt标签
rt标签用于定义ruby容器内文字的注音内容，它必须嵌套在ruby标签内部，紧跟在需要注音的文本之后。浏览器默认会将rt标签内的内容显示在对应文字的上方（水平排版时）或右侧（垂直排版时）。
3. rp标签
rp标签是兼容性辅助标签，用于在不支持ruby标签的浏览器中显示备用内容。它通常嵌套在ruby标签内部，包裹在rt标签的两侧，当浏览器不支持ruby注音时，会显示rp内的内容作为分隔提示，避免注音内容和原文字混排影响阅读。
注音符号的添加步骤
添加注音符号的整体结构为：ruby标签内部先放需要注音的原文本，然后可选放置左侧rp标签，接着放rt标签包裹注音内容，最后可选放置右侧rp标签。具体步骤如下：
第一步：创建
ruby根容器，作为整个注音区域的包裹标签。第二步：在
ruby标签内写入需要添加注音的原文本，比如汉字“汉”。第三步：可选添加左侧
rp标签，内容通常为左括号“(”，用于不支持ruby的浏览器中分隔原文本和注音。第四步：添加
rt标签，在标签内部写入对应的注音内容，比如“hàn”。第五步：可选添加右侧
rp标签，内容通常为右括号“)”，和左侧rp配合形成完整的备用显示格式。
完整代码示例
以下是一个为汉字“汉”添加拼音注音的完整示例代码，包含兼容性处理：
<ruby> 汉 <rp>(</rp> <rt>hàn</rt> <rp>)</rp> </ruby>
如果是不需要兼容旧浏览器的场景，也可以省略rp标签，简化代码如下：
<ruby> 汉 <rt>hàn</rt> </ruby>
多文字注音示例
如果需要为多个连续文字添加注音，可以将每个文字和对应的注音分别用ruby标签包裹，或者将多个文字和对应的多个rt注音内容对应放置，以下是为“拼音”两个字添加注音的示例：
<ruby> 拼音 <rp>(</rp> <rt>pīn yīn</rt> <rp>)</rp> </ruby>
注意事项
rt标签必须位于ruby标签内部，不能单独使用。rp标签如果不添加，在不支持ruby的浏览器中，注音内容会直接跟在原文本后面，可能影响阅读体验。注音内容的排版样式（比如字体大小、位置）可以通过CSS自定义，但默认的注音显示效果已经能满足大多数基础场景需求。