ruby标签必须配rt才生效，因浏览器仅将rt识别为注音标识；无rt时ruby退化为普通span，拼音不渲染且无语义。
ruby 标签必须配 rt 才能生效，不写 rt 就等于没写注音——浏览器既不渲染拼音，也不向屏幕阅读器暴露语义。
为什么 ruby 单独写无效？
浏览器只把 rt 当作“注音内容”的唯一标识。没有 rt，ruby 就退化为普通 span，文字照常显示，但拼音彻底消失。
-
<ruby>汉</ruby>→ 完全无效，连 fallback 都没有 -
<ruby>汉<rt>hàn</rt></ruby>→ 最小合法单元，可工作 -
<ruby>汉</ruby><rt>hàn</rt>→rt脱离ruby，被忽略或平铺在文字后
多字注音必须逐字拆开，不能共用 rt
中文注音是字级行为，不是词级。一个 rt 无法可靠对应多个基字，浏览器会错位、截断或只给最后一个字标音。
- ❌ 错误：
<ruby>汉字<rt>hàn zì</rt></ruby> - ✅ 正确：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - 繁体同理：
<ruby>臺<rt>ㄊㄞ</rt></ruby><ruby>灣<rt>ㄨㄢ</rt></ruby> - 地名/多音字也需人工判断：
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>
rp 不是可选装饰，是降级兼容的开关
rp 的作用非常具体：让 IE8–、Android 4.3 WebView、Outlook 等不支持 ruby 的环境，至少能显示「汉(hàn)」这种可读格式。没有它，降级后就是「汉hàn」连在一起，语义断裂。
-
rp必须成对，且严格嵌套在rt内部：<rt><rp>(</rp>hàn<rp>)</rp></rt> - 括号只能是纯字符（
(、)、【、】），中间不能有空格或字母 - 现代浏览器自动隐藏
rp；老浏览器渲染括号 + 拼音内容 - 若项目明确不兼容 IE 或旧安卓 WebView，可省略
rp，但别误以为它是“样式辅助”
拼音输入和 CSS 控制的硬约束
拼音不是自由文本。浏览器依赖纯 ASCII 字符流排版，混入全角空格、中文标点、大写字母或未转义引号，会导致偏移、截断甚至整个 rt 被忽略。
- 拼音必须用半角小写字母 + Unicode 声调（如
zhōng），避免数字标调（zhong1）——后者需额外 CSS 对齐，移动端字体支持不稳定 - 禁用中文逗号、顿号、空格分隔多音节；每个字的拼音独立包裹，不拼接
-
rt字号推荐用固定像素值（如rt { font-size: 12px; }），不用百分比（70%）——不同浏览器计算逻辑不一致 - 优先用标准属性
ruby-position: over控制位置，别靠margin-top模拟，否则换行/缩放时极易错位
真正容易被忽略的是：连续多个 ruby 在 iOS Safari 上可能出现微小间距异常，且服务端若输出空 <rt></rt>，部分屏幕阅读器会读出“空白注音”。这些细节不出现在教程里，但上线后立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
