ruby必须配rt，否则浏览器忽略整个ruby块；rt必须直接嵌套在ruby内且不可被span包裹；rp只能在rt内开头或结尾，内容仅限纯括号字符；span仅可用于包裹整个ruby块做样式隔离；空rt标签必须跳过以避免无障碍和渲染问题。
ruby必须配rt，否则span包不住注音
只写<ruby>汉</ruby>，哪怕外面套<span></span>也完全没用——浏览器会直接忽略整个<ruby></ruby>块，注音彻底消失。因为<rt></rt>是强制子元素，不是可选装饰，<span></span>再怎么包裹都救不回来。
常见错误是把<span></span>当“万能容器”往里塞：<ruby><span>汉</span></ruby>，结果拼音还是不显示。真正有效的结构只能是：<ruby>汉<rt>hàn</rt></ruby>，<rt></rt>必须紧贴基字、直接嵌套在<ruby></ruby>内，不能隔层，也不能被<span></span>包裹。
rp标签只能在rt内部，且内容只能是括号字符
<rp></rp>不是随便加个括号就行的装饰标签，它有硬性约束：只能出现在<rt></rt>的开头或结尾，且里面只能是(、)、[、]这类纯括号字符，多一个空格、字母或换行都会导致 fallback 失效。
正确写法：<rt><rp>(</rp>hàn<rp>)</rp></rt>；错误写法包括：<rp>(</rp><rt>hàn</rt><rp>)</rp>（<rp></rp>在<rt></rt>外，被忽略）、<rt><rp>( </rp>hàn</rt>（含空格，部分浏览器不触发 fallback）。
Chrome 会把<rp></rp>渲染成可见括号，Safari 则隐藏它——所以别指望靠<rp></rp>控制样式，它的唯一作用就是兜底降级。
span可以用来包裹整个ruby块做样式隔离
当你需要统一控制一组注音的字体大小、颜色或对齐方式时，<span></span>才真正有用：把它放在<ruby></ruby>外部，作为样式容器。
例如给整段注音设固定字号并清除空格干扰：<span class="ruby-group"><ruby>中<rt>zhōng</rt>国<rt>guó</rt></ruby></span>
对应 CSS：.ruby-group { font-size: 14px; } .ruby-group ruby { letter-spacing: 0; }
注意两点：
- 不要给<span></span>设display: block或inline-block，否则可能破坏行内流布局
- 若需微调<rt></rt>位置，直接用rt选择器，比如rt { line-height: 1.2; }，别试图用<span></span>去“撑开”它
服务端渲染时rt为空要跳过，别留空标签
后端生成 HTML 时，如果某个字没有对应拼音，应直接跳过整个<rt></rt>，而不是输出<rt></rt>。空<rt></rt>会被屏幕阅读器读作“空白注音”，影响无障碍体验，且部分浏览器会因此忽略整组<ruby></ruby>。
实操建议：
- 模板引擎里用条件判断，如 {% if pinyin %}<rt>{{ pinyin }}</rt>{% endif %}
- 前端 JS 动态插入时，先校验字符串长度：if (pinyin.trim()) el.innerHTML += `<rt>${pinyin}</rt>`
- 多字注音场景下，逐字判断，避免因某一个字缺拼音导致整行失效
最易被忽略的是：ruby 的语义层级不可被 span 打断，而 rp 的括号字符必须“干净”到像素级——空格、编码、换行，任何一个细节出错，fallback 就会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
