标签的作用是为不支持的旧浏览器提供降级显示，其包裹的括号内容仅在浏览器无法渲染注音时可见；它必须成对置于前后，如“（”和“）”，且不支持Ruby的浏览器会将其作为普通内联元素渲染。

Ruby 注音在中文、日文等东亚语言中常用于标注读音，HTML5 提供了 、 和 标签来语义化地实现这一功能。其中 的核心作用就是为不支持 的旧浏览器提供降级显示——它包裹的括号内容仅在浏览器无法渲染注音时才可见。

理解 rp 标签的降级逻辑

本身不显示任何样式，它的存在意义完全由浏览器解析行为决定：支持 Ruby 的浏览器会隐藏 内容；不支持的浏览器则将其作为普通内联元素渲染（通常显示为括号）。因此， 必须成对出现在 前后，常见模式是 （注音）。

正确书写 ruby 结构以触发降级

标准写法需严格遵循嵌套规则，否则降级可能失效：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 是最外层容器，包裹被注音文字和注音内容
• （可选但推荐）显式包裹基础文字，提升语义清晰度（如省略，浏览器默认将 的首个文本节点视为基字）
• 必须紧随 或基字之后，用于放置注音
• 必须直接包裹在 的前后，且内容一般为全角括号（如“（”“）”），确保在降级时视觉合理

实际代码示例与效果对比

以下代码在支持 Ruby 的浏览器中显示为“汉”上标“hàn”，无括号；在 IE8 或早期 Android 浏览器中则显示为“汉（hàn）”：

  汉
  （
  hàn
  ）

兼容性注意事项与增强建议

尽管 是标准降级机制，但仍有细节影响实际表现：

• 部分老旧浏览器（如 IE9 及更早）完全忽略 相关标签，此时 内容会原样显示，需确保括号不破坏可读性
• 移动端 WebView 兼容性不一，建议在关键场景用 CSS 配合 @supports (display: ruby) 做渐进增强
• 避免在 中放复杂内容（如空格、换行、HTML 标签），仅用简单符号保证降级稳定

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！