ruby 必须与 rt、rb 成对嵌套使用，缺一不可；正确结构为<ruby><rb>字</rb><rt>音</rt><rp>(</rp><rp>)</rp></ruby>，rp 保障降级兼容，CSS 仅能调节字体大小与行高。
ruby + rt 必须成对出现，单独写 ruby 或 rt 都不生效
浏览器只识别完整的语义结构：ruby 是容器，rb 是基字（被注音汉字），rt 是注音内容。缺一不可。写成 <ruby>汉</ruby> 或 <rt>hàn</rt>汉，多数浏览器会忽略注音、降级显示，甚至完全不渲染拼音。
常见错误现象：
-
<ruby>你好<rt>nǐ hǎo</rt></ruby>—— 表面看有ruby和rt，但没用rb明确包裹每个汉字，部分浏览器（如旧版 Safari）可能错位或合并注音 -
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>—— 多个rt直接连在文字后，缺乏对应rb，语义断裂，排版易错乱
多字注音必须用 rb 显式分隔，不能靠顺序“猜”对应关系
HTML 的 ruby 不是“按顺序匹配”，而是依赖显式嵌套结构。一个汉字配一个 rb，一个拼音配一个 rt，且 rt 必须紧贴在对应 rb 后面。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<ruby><rb>你</rb><rt>nǐ</rt><rb>好</rb><rt>hǎo</rt></ruby>
这样写才能确保「你」上方显示「nǐ」、「好」上方显示「hǎo」。如果省略 rb，仅靠 <ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>，某些浏览器会把两个 rt 当作整体注在「你好」上方，变成「nǐhǎo」叠在一起。
使用场景提醒：
- 教育类网页、儿童识字页面，需逐字精准对应
- 古籍/文言文注音，常含多音字或特殊读音，结构松散会导致语义丢失
- 自动化生成拼音 HTML 时，必须为每个汉字生成独立
rb+rt对，不能批量包裹
rp 不是可有可无的“装饰”，它是降级兼容的关键开关
rp 标签的作用不是美化，而是在不支持 ruby 的浏览器（比如 IE11 及更早版本、部分屏幕阅读器）中提供括号包裹的 fallback 文本。没有它，那些环境里拼音可能直接堆在汉字后面，变成「你好(nǐ hǎo)」这种不可读形式。
标准写法必须包含 rp：
<ruby><rb>你</rb><rt>nǐ</rt><rp>(</rp><rp>)</rp></ruby>
注意：rp 必须成对出现（左括号 + 右括号），且放在 rt 内外均可，但推荐紧邻 rt 放置。现代浏览器会隐藏 rp，只在降级时显示；不加 rp，降级效果就只剩裸拼音，可访问性大幅下降。
CSS 控制有限，别指望用 font-size 或 line-height 精准调位置
浏览器对 ruby 的渲染是语义驱动的，不是盒模型驱动的。rt 默认出现在 rb 上方（横排）或右侧（竖排），但这个偏移量由 UA 样式控制，无法用常规 CSS 调整上下距离或对齐方式。强行加 position: relative 或 transform 可能破坏语义，导致屏幕阅读器误读或打印样式错乱。
能安全调整的只有：
-
ruby容器的font-size：会影响基字和拼音的整体缩放比例 -
rt的font-size：建议设为基字的 50%~60%，例如font-size: 0.55em -
ruby的line-height：避免多行 ruby 堆叠过密，但不要设为1，否则拼音可能被裁切
真正需要精细控制（比如拼音带声调对齐、竖排右对齐），得用 SVG 或 JS 动态定位——那就已经脱离原生 ruby 的设计目标了。
