只写 ruby 标签无效，必须配 rt 子元素；rt 必须是 ruby 的直接子节点，且每个基字需独立 ruby 包裹，多字共用 rt 违反语义规范。
ruby 标签本身不渲染任何内容，没 rt 就等于没写——浏览器直接忽略整块，文字照常显示但注音彻底消失。
为什么只写 ruby 没用，必须配 rt
rt 是 ruby 的必需子元素，不是可选装饰。W3C 明确规定：缺失 rt 时，整个 ruby 块语义失效，浏览器跳过解析。
- 错误写法：
<ruby>汉</ruby>→ 页面显示“汉”，无拼音，且 DOM 中该ruby节点可能被丢弃或降级为普通文本 -
rt必须是ruby的**直接子节点**，不能隔层，例如<ruby><span><rt>hàn</rt></span></ruby>无效 - 一个
ruby可含多个基字 + 多个对应rt，如<ruby>中<rt>zhōng</rt>国<rt>guó</rt></ruby>，但每个rt必须紧贴其修饰的字之后（不能跨行、不能被空格或换行符隔开）
rp 标签只能嵌在 rt 里，且内容只能是括号字符
rp 的唯一作用是为不支持 ruby 的旧浏览器提供 fallback 括号包裹，它不是样式标签，也不参与语义表达。
- ✅ 正确位置与内容：
<rt><rp>(</rp>hàn<rp>)</rp></rt>——rp必须在rt内部，且仅含(、)、[、]等纯括号字符 - ❌ 错误示例：
<rp>(</rp><rt>hàn</rt>)——rp在rt外，被完全忽略；<rt><rp>( </rp>hàn</rt>—— 含空格，部分安卓 WebView 不触发 fallback - Chrome 会把
rp渲染成可见括号，Safari 则默认隐藏；生产环境建议统一加 CSS：rp { display: none; }，避免视觉干扰
多字注音不能共用 rt，必须逐字独立 ruby 包裹
把“汉字”写成 <ruby>汉字<rt>hàn zì</rt></ruby> 看似省事，实则破坏语义、触发渲染错位、影响屏幕阅读器准确播报。
- Safari 对空格和换行更敏感，容易把 “hàn zì” 整体对齐到“汉”字上方，而非分别对应
- 语义上，“汉”和“字”是两个独立字符，各自有唯一读音，共用
rt违反 W3C 对 ruby 的原子性要求 - 正确写法是拆开：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>；服务端渲染时若某字拼音为空，应跳过整个<rt>...</rt>，而非输出空<rt></rt>（否则屏幕阅读器可能读作“空白注音”）
最易被忽略的是：浏览器容错渲染不等于结构合法。ruby 的嵌套规则不是“看起来能显示就行”，而是直接影响可访问性、SEO 解析和跨平台一致性——尤其当注音用于教育类页面或无障碍场景时，rt 缺失或位置偏移会让整段内容失去传达价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
