ruby是HTML5专为注音注释设计的原生语义标签，必须严格遵循ruby→rt/rp嵌套规则，禁用块级元素与错误顺序，且需按词切分、不可跨词合并，rp为必需降级包裹而非可选装饰。
ruby 标签不是装饰性语法糖，它是 HTML5 中唯一专为「注音、注释类行内语义」设计的原生结构化容器。用错或忽略其嵌套规则，会导致屏幕阅读器跳读、搜索引擎无法识别语义、部分浏览器（尤其是旧版 Safari 和 IE）直接丢弃内容。
ruby 元素必须严格遵循 ruby → rt/rp 的父子关系
浏览器只认标准嵌套：外层 ruby 包裹被注音文本，内部必须是 rt（注音内容），可选 rp（括号 fallback）。不能把 rt 拆到外面，也不能用 span 替代 rt。
-
ruby内容必须是纯文本或内联元素（如span、em），不能含块级标签（p、div等） -
rt必须紧跟在被注音文本之后，顺序错乱（如rt在前、文本在后）将导致渲染异常或静默失败 -
rp必须成对出现：<rp>(</rp>...<rp>)</rp>，否则部分浏览器会忽略整个rt
正确示例：
<ruby>漢字<rp>(</rp><rt>hàn zì</rt><rp>)</rp></ruby>
不加 rp 标签时，IE/旧 Safari 会显示裸露的注音
没有 rp 的 ruby 在支持度较差的浏览器中，rt 内容会直接暴露在行内，破坏排版。这不是样式问题，是解析行为差异。
立即学习“前端免费学习笔记（深入）”；
-
rp不是“可有可无的美化标签”，而是为不支持ruby的浏览器提供降级包裹 - 现代 Chrome/Firefox/Edge 已能自动隐藏
rp，但仅当它紧邻rt且结构合规时才生效 - 若省略
rp，又未通过 CSS 设置rt { display: none; }，iOS Safari 15.6 之前版本仍会显示括号外的拼音
ruby 的语义边界仅限单个词或短语，不可跨词合并
ruby 是原子级语义单元，每个注音对象应独立包裹。强行让一个 ruby 覆盖多个汉字+多个注音，会破坏可访问性与翻译工具识别逻辑。
- 错误写法：
<ruby>中华人民共和国<rt>zhōng huá rén mín gòng hé guó</rt></ruby>（整句注音，语义模糊） - 推荐写法：按词切分，如
<ruby>中华<rt>zhōng huá</rt></ruby><ruby>人民<rt>rén mín</rt></ruby>… - 若需保持视觉连续，用 CSS 控制
ruby之间 margin，而非合并结构
真正容易被忽略的是：ruby 的无障碍支持依赖于 UA（浏览器）对 ARIA 属性的主动忽略——你不能给 ruby 加 aria-label，也不能在 rt 里塞 title。它的语义完全由原生标签结构承载，改结构即改含义，没有中间态。
