1. 什么是 <rp> 元素
<rp> 是 HTML 中的 Ruby Fallback Parenthesis 元素，全称为 Ruby Parenthesis 。它专门配合 <ruby> 注音结构使用，用来提供一组降级显示的圆括号。
它的核心作用是：
简单来说，<rp> 解决的是「不支持注音的浏览器如何展示注音文字」的问题。
2. 基本语法
<rp> 是一个行内元素，没有专属属性，也没有结束标签可省略的写法，必须成对使用。
最基础的 Ruby 结构如下：
html
<ruby>
漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp>
</ruby>要点：
- 开始标签
<rp>（</rp>放在<rt>之前。 - 结束标签
<rp>）</rp>放在<rt>之后。 - 括号内容可以是全角
（ ）、半角( )，也可以使用方括号、空格等其他视觉分隔符。
3. 为什么需要 <rp>
浏览器对 Ruby 注音的支持程度并不完全一致。对于支持 <ruby> 和 <rt> 的现代浏览器，会渲染成「上方有小字注音」的效果；而对于不支持的老旧浏览器或某些文本环境，<rt> 的内容可能会直接紧跟在主体文字后面展示。
如果没有 <rp>，可能出现类似下面的阅读混淆：
text
漢字かんじ阅读者很难判断「かんじ」是注音还是正文的一部分。加入 <rp> 后，在不支持 Ruby 的环境中会显示为：
text
漢字（かんじ）而在支持 Ruby 的环境中，括号被隐藏，仍然显示为干净的注音排版：
text
漢字
かんじ4. 完整示例：日语振假名
日语中常使用振假名（furigana）标注汉字的读音，这是 <rp> 最典型的应用场景。
html
<p>
<ruby>
東<rp>（</rp><rt>とう</rt><rp>）</rp>
京<rp>（</rp><rt>きょう</rt><rp>）</rp>
</ruby>
</p>在不支持 Ruby 的浏览器中，这段内容会退化为：
text
東（とう）京（きょう）在现代浏览器中，则会把「とう」「きょう」作为注音显示在对应汉字上方，不会出现括号。
5. 完整示例：中文拼音与注音
<rp> 同样适用于中文拼音标注和注音符号标注。
5.1 拼音标注
html
<ruby>
博客<rp>（</rp><rt>bó kè</rt><rp>）</rp>
</ruby>降级显示为：
text
博客（bó kè）5.2 注音符号标注
html
<ruby>
學習<rp>（</rp><rt>ㄒㄩㄝˊ ㄒㄧˊ</rt><rp>）</rp>
</ruby>降级显示为：
text
學習（ㄒㄩㄝˊ ㄒㄧˊ）6. 相关元素
<rp> 不能单独使用，必须放在 Ruby 结构内。一个完整的 Ruby 结构通常包含以下元素：
| 元素 | 作用 |
|---|---|
<ruby> |
Ruby 注音的容器，包裹整组注音结构 |
<rt> |
Ruby Text，定义实际的注音文字 |
<rp> |
Ruby Parenthesis，降级时显示的括号 |
<rb> |
Ruby Base，明确标注被注音的基础文字 |
<rtc> |
Ruby Text Container，用于组合多组注音 |
6.1 使用 <rb> 的完整结构
html
<ruby>
<rb>漢</rb><rp>（</rp><rt>かん</rt><rp>）</rp>
<rb>字</rb><rp>（</rp><rt>じ</rt><rp>）</rp>
</ruby>当没有显式书写 <rb> 时，浏览器会自动识别 <rt> 前面的文本作为基础文字。显式使用 <rb> 可以让结构更清晰，也便于脚本和样式操作。
6.2 使用 <rtc> 的双注音结构
html
<ruby>
東京
<rtc>
<rp>（</rp><rt>とうきょう</rt><rp>）</rp>
</rtc>
<rtc>
<rp>（</rp><rt>Tokyo</rt><rp>）</rp>
</rtc>
</ruby>这样可以同时为一段文字提供日语读音和英文读音两组注音。
7. 浏览器兼容性
<rp> 元素得到了现代主流浏览器的广泛支持，包括：
- Chrome
- Firefox
- Safari
- Edge
- 移动端 Chrome / Safari
其中 HTML Ruby 相关元素的支持情况总体较好，但不同浏览器在默认排版样式上可能存在细微差异。<rtc> 和 <rb> 等较新的扩展元素支持度略低于 <ruby>、<rt>、<rp> 这组基础元素。
如果网站需要兼容非常老旧或特殊环境的浏览器，建议在关键注音内容中始终保留 <rp> 降级括号。
8. 无障碍与可访问性
<rp> 对屏幕阅读器等辅助技术也有实际意义。
- 支持 Ruby 的辅助技术会读取基础文字和注音内容，并跳过
<rp>中的括号。 - 在降级场景下，括号的存在让明眼用户能区分正文与注音，内容可读性更强。
- 建议不要使用空
<rp></rp>，因为那样在不支持 Ruby 的环境中无法提供视觉分隔。
如果注音只是为了装饰性排版，也可以考虑使用 aria-hidden="true" 隐藏注音层；如果注音对理解内容很重要，则应保留完整的 Ruby 结构。
9. 常见误区
9.1 直接写字而不写括号
html
<!-- 不推荐 -->
<ruby>漢字<rp></rp><rt>かんじ</rt><rp></rp></ruby>虽然写法合法，但降级后没有任何视觉分隔，违背了 <rp> 的设计初衷。
9.2 用 <span> 模拟括号
html
<!-- 不推荐 -->
<ruby>漢字<span>（</span><rt>かんじ</rt><span>）</span></ruby><span> 在支持 Ruby 的浏览器中不会被自动隐藏，会在注音排版中多出一对括号，影响视觉效果。
9.3 认为必须使用 <rp>
如果只面向现代浏览器，并且可以接受不支持 Ruby 环境下的显示效果，<rp> 并非强制要求。但从健壮性角度考虑，使用 <rp> 几乎没有额外成本，建议保留。
9.4 混淆 <rp> 与 <rt>
两者职责不同，不能互相替代。
10. 总结
<rp> 是 Ruby 注音结构中一个重要但容易被忽略的细节元素。它通过一对降级括号，让使用 Ruby 注音的页面在不支持该特性的环境中依然保持可读性。
使用时的核心原则：
- 将
<rp>与<rt>配合使用，括号放在注音内容前后。 - 支持注音的浏览器自动隐藏
<rp>，不支持的环境则显示括号。 - 日语振假名、中文拼音、中文注音等东亚语言场景是它的主要用途。
- 配合
<ruby>、<rb>、<rtc>可以构建更复杂的注音结构。
掌握 <rp> 的用法，是深入理解 HTML Ruby 注音体系和国际化排版的重要一步。