标签是ruby注音结构中不可省略的语义锚点，必须显式写出并与严格相邻；每个基字需独立配对，内仅容纯文本或内联元素，禁用块级元素、空格及换行。
rb标签不是可选的，是必须显式写出的
很多人写 <ruby>汉<rt>hàn</rt></ruby>，以为省掉 <rb></rb> 是简写，结果 Firefox 和 Safari 直接忽略 <rt></rt>，只显示“汉hàn”连在一起。Chrome 虽可能渲染，但语义已断裂——屏幕阅读器读不出“这是‘汉’的拼音”，而是把“汉”和“hàn”当两个独立词。
真正有效的最小结构只能是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。其中 <rb></rb> 不是装饰性容器，它承担语义锚点作用：告诉浏览器“这段基文字是‘汉’，下面那个 <rt></rt> 是它的注音”。
-
<rb></rb>内必须是纯文本节点，或仅含内联格式（如<strong>重</strong>可接受） - 不能嵌套块级元素（
<div>、<code><p></p>）、不能含空格或换行符 - 多字时每个字都要单独配
<rb></rb>+<rt></rt>，不能合并在一个<rb></rb>里
rb与rt必须严格紧邻，中间不能有任何字符
看似无害的换行、空格、零宽字符（如 ），都会让浏览器判定结构断裂。例如：
<ruby><rb>重</rb><rt>chóng</rt></ruby>
这种写法在 Chrome 120+ 中可能勉强渲染，但在 Safari 17+ 或 VoiceOver 下会跳过整个注音块——因为规范要求 <rb></rb> 和 <rt></rt> 必须是相邻兄弟节点，中间不能插入任何文本节点。
- 正确写法：所有标签必须写在同一行，或用 HTML 注释隔开（
<rb>重</rb><!-- --><rt>chóng</rt>） - 不要用
- 构建工具（如 Vue / React）若自动加换行，需配置模板压缩或使用
v-pre避免插值干扰
rb不支持嵌套，也不接受样式覆盖
有人试图给 <rb></rb> 加 font-size 或 color 来突出基字，结果发现样式无效或触发布局错乱。这是因为 <rb></rb> 是 ruby 布局模型中的“基线锚点”，浏览器会强制将其作为不可分割的语义单元处理。
-
<rb></rb>上设display、margin、padding会破坏自动对齐逻辑 - 想调基字大小？直接改父级
<ruby></ruby>的font-size，<rb></rb>会继承 - 需要强调某个字？用
<strong></strong>包裹其内容（<rb><strong>重</strong></rb>），而非给<rb></rb>加类
rb数量必须与rt一一对应，且顺序不可颠倒
常见错误是把多个汉字塞进一个 <rb></rb>，再配一个 <rt></rt>，比如：<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>。这会导致声调位置错乱（“qìng”的第四声标在“庆”上，但视觉上可能偏右）、换行时“重”和“chóng”脱钩、“庆”和“qìng”错配。
- 中文场景下，按字粒度拆分最稳妥：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 英文/数字混排也要同样处理：
<ruby><rb>第</rb><rt>dì</rt></ruby><ruby><rb>123</rb><rt>yī èr sān</rt></ruby> - 不能颠倒顺序：
<rt>hàn</rt><rb>汉</rb>是无效结构，浏览器不识别
实际应用中最容易被忽略的，是 <rb></rb> 的“不可见但不可缺”特性——它不占视觉空间，却决定整个注音能否被正确解析、朗读、换行和缩放。一旦漏写、错位或包裹不当，问题不会立刻报错，而是静默降级为平铺文本，等上线后被读屏用户或移动端用户发现才暴露。
