rb不是可选包装，而是语义锚点：浏览器依赖rb明确标识注音基准单位，缺失则rt失效；必须逐字包裹、一一紧邻，否则导致渲染错位、语音播报丢失及css样式失效。
rb标签不是可选包装，而是语义锚点
浏览器不把rb当装饰用标签——它明确告诉渲染引擎：“这段文本是注音的基准单位”，没有rb，rt就失去依附对象。Chrome 115+、Safari 17.4+、Firefox 128 都会直接忽略孤立的<rt></rt>，或把它当作普通内联文本平铺在行尾。
常见错误现象：
-
<ruby>汉<rt>hàn</rt></ruby>：拼音可能贴在“汉”字右侧、换行错位，甚至完全不显示 -
<ruby><rt>chóng</rt><rt>qìng</rt></ruby>：两个rt无对应rb，浏览器无法判断哪个音配哪个字
正确逻辑只有一种：rb必须显式包裹每个被注音的原子单位（单字、单假名、单谚文），且与rt一一紧邻。不能靠顺序“猜”，也不能靠空格分隔。
多字注音必须逐字拆开rb，不能合并在一个rb里
写成<rb>重庆</rb><rt>chóng qìng</rt>看似省事，实际会导致三类问题：声调挤在一起（chóngqìng）、换行时拼音与字脱节、屏幕阅读器读作“重庆——chóng qìng”而非“重——chóng，庆——qìng”。
实操建议：
- 每个汉字独立套一层
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 避免在
rb中塞空格、顿号、括号；如需语义分隔，用零宽空格 - 英文/数字混排（如“第123页”）也要同样处理：
<ruby><rb>第</rb><rt>dì</rt></ruby><ruby><rb>123</rb><rt>yī èr sān</rt></ruby>
rb不等于“为了规范才加”，它影响CSS渲染和可访问性
rb缺失时，CSS对rt的控制会失效。比如设了rt { font-size: 0.6em; }，但若没rb，Firefox 可能直接跳过该规则；而rb存在后，ruby才能被识别为标准内联布局容器，line-height、vertical-align等属性才真正生效。
更重要的是可访问性：rb让屏幕阅读器知道“这是被注音的基字”，配合rt才能播报“重，读作chóng”。没有rb，语音引擎只能把整段ruby当作普通文本读出，拼音内容彻底丢失。
W3C虽将rb标记为“弃用（obsolete）”，但所有主流浏览器（截至2026年5月）仍强制要求显式书写——这不是历史包袱，而是当前事实标准。
动态生成ruby时rb最容易被漏掉或结构断裂
Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 容易把rb当成普通字符串拼进去，一旦原始数据含&、或 HTML 标签，整个结构就垮了。比如<code>v-html="`<ruby><rb>${text}</rb><rt>${pinyin}</rt></ruby>`"，若text是"<div>重</div>"，DOM 就会提前闭合，rb标签根本不会被解析。
安全做法：
- 封装成组件：
<rubytext char="重" pinyin="chóng"></rubytext>，模板中硬编码<ruby><rb>{{ char }}</rb><rt>{{ pinyin }}</rt></ruby> - 必须字符串注入时，先用
DOMPurify.sanitize()过滤，只保留ruby、rb、rt、rp - React 中确保
rt是ruby的**直接子元素**，不能嵌在span或div里，否则语义丢失且样式失效
rb不是格式细节，它是让拼音真正“贴在字上”、被机器读懂、在窄屏不断行、导出PDF前还能降级显示的底层支点。漏掉它，等于只画了箭靶没画靶心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
