标签的作用是为不支持的旧浏览器提供降级显示，其包裹的括号内容仅在浏览器无法渲染注音时可见；它必须成对置于前后，如“（”和“）”，且不支持Ruby的浏览器会将其作为普通内联元素渲染。
Ruby 注音在中文、日文等东亚语言中常用于标注读音，HTML5 提供了 <ruby></ruby>、<rt></rt> 和 <rp></rp> 标签来语义化地实现这一功能。其中 <rp></rp> 的核心作用就是为不支持 <ruby></ruby> 的旧浏览器提供降级显示——它包裹的括号内容仅在浏览器无法渲染注音时才可见。
理解 rp 标签的降级逻辑
<rp></rp> 本身不显示任何样式，它的存在意义完全由浏览器解析行为决定：支持 Ruby 的浏览器会隐藏 <rp></rp> 内容；不支持的浏览器则将其作为普通内联元素渲染（通常显示为括号）。因此，<rp></rp> 必须成对出现在 <rt></rt> 前后，常见模式是 <rp>（</rp><rt>注音</rt><rp>）</rp>。
正确书写 ruby 结构以触发降级
标准写法需严格遵循嵌套规则，否则降级可能失效：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<ruby></ruby>是最外层容器，包裹被注音文字和注音内容 -
<rb></rb>（可选但推荐）显式包裹基础文字，提升语义清晰度（如省略，浏览器默认将<ruby></ruby>的首个文本节点视为基字） -
<rt></rt>必须紧随<rb></rb>或基字之后，用于放置注音 -
<rp></rp>必须直接包裹在<rt></rt>的前后，且内容一般为全角括号（如“（”“）”），确保在降级时视觉合理
实际代码示例与效果对比
以下代码在支持 Ruby 的浏览器中显示为“汉”上标“hàn”，无括号；在 IE8 或早期 Android 浏览器中则显示为“汉（hàn）”：
立即学习“前端免费学习笔记（深入）”；
兼容性注意事项与增强建议
尽管 <rp></rp> 是标准降级机制，但仍有细节影响实际表现：
- 部分老旧浏览器（如 IE9 及更早）完全忽略
<ruby></ruby>相关标签，此时<rp></rp>内容会原样显示，需确保括号不破坏可读性 - 移动端 WebView 兼容性不一，建议在关键场景用 CSS 配合
@supports (display: ruby)做渐进增强 - 避免在
<rp></rp>中放复杂内容（如空格、换行、HTML 标签），仅用简单符号保证降级稳定
