ruby标签本身不渲染注音，必须配rt才生效；rt是必需子元素且须紧贴被注字、为直接子元素；多字须逐字独立包裹；rp仅用于旧浏览器括号降级，须成对置于rt内部且内容仅为纯括号。
ruby 标签本身不渲染注音，没 rt 就等于没写注音——浏览器直接忽略整个 ruby 块，文字照常显示，拼音彻底消失。
rt 是 ruby 的必需子元素，不是可选装饰
只写 <ruby>汉</ruby> 完全无效；必须让每个被注字紧跟着一个 rt，且 rt 必须是 ruby 的**直接子元素**：
- ✅ 正确：
<ruby>汉<rt>hàn</rt></ruby> - ❌ 错误：
<ruby><span>汉</span><rt>hàn</rt></ruby>（span隔开了基字和rt） - ❌ 错误：
<ruby>汉</ruby><rt>hàn</rt>（rt脱离ruby父容器） - 服务端生成时若拼音为空，应跳过整个
<rt></rt>，而非输出空标签——否则屏幕阅读器可能读作“空白注音”
rp 只能在 rt 内部，且内容只能是纯括号
rp 不是样式辅助，它的唯一作用是给不支持 ruby 的旧环境（如 IE10、Android 4.3 WebView）提供括号 fallback，比如显示「汉(hàn)」。但它在现代浏览器中必须被隐藏，否则会出问题：
- ✅ 正确位置与内容：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - ❌ 错误：
<rp>(</rp><rt>hàn</rt><rp>)</rp>（rp在rt外，被忽略） - ❌ 错误：
<rt><rp>( </rp>hàn</rt>（含空格，部分浏览器不触发 fallback） - Chrome 会把
rp渲染为可见括号，Safari 则按规范隐藏——同一段 HTML 在两者中视觉完全不同 - 最稳方案：服务端根据 UA 判断是否为 Blink/WebKit 内核，构建时直接移除
rp；次选用 CSS 强制隐藏：ruby rt rp { display: none !important; }
多字注音必须逐字独立包裹，不能共用 rt
写成 <ruby>汉字<rt>hàn zì</rt></ruby> 表面能出效果，但语义错误、排版失控、无障碍失效：
- ✅ 推荐写法：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - 多音字必须手动拆开：
<ruby>长<rt>cháng</rt></ruby>度vs生<ruby>长<rt>zhǎng</rt></ruby> - 地名如“重庆”必须拆：
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>，否则易被误读为 zhòng qìng - 连续多个
ruby在 iOS Safari 上可能出现微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解
rb 标签虽非强制，但显式使用更可靠
HTML5 规范允许省略 rb，但实际项目中建议显式写出：
- Firefox 和新版 Edge 对
rb是硬性要求；Chrome/Safari 宽容，但跨浏览器一致性差 - ✅ 显式写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 漏掉
rb时，Safari 16.4+ 和部分 Android WebView 可能错位或合并注音 - 动态注入注音时，如果某字拼音为空，
rb仍需保留，但整个rt应跳过——结构断裂 = 渲染失败
真正容易被忽略的点是：注音的语义粒度必须精确到字，而不是词；而 rp 的存在不是为了“看起来像括号”，而是为了在特定 UA 下触发 fallback 文本的可读性——它既不能少，也不能乱放，更不能靠 JS 动态删减。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
