现代浏览器中ruby注音必须显式包含rb标签，缺rb则rt被当纯文本平铺显示；rb须逐字包裹所有字符（含空格、数字、英文等），与rt严格一一对应，否则注音链断裂。
现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）中，ruby 标签必须显式包含 rb 才能渲染注音；仅用 ruby + rt 会被当纯文本平铺显示，拼音根本不会上浮。
为什么写了 ruby 和 rt 却没拼音？
核心是缺了 rb。它不再是可选标签，而是现代渲染引擎的硬性结构组件：
-
<ruby>汉<rt>hàn</rt></ruby>→ 浏览器降级为“汉hàn”，rt内容 inline 渲染，无上标、无缩放 - 正确写法必须是
<ruby><rb>汉</rb><rt>hàn</rt></ruby> -
rb必须包裹每个被注音字符：空格、数字、英文、emoji、全角标点都得原样塞进去，否则rb和rt数量错位，整段注音链断裂
ruby 在混合文本中怎么处理非汉字？
所有字符都得参与结构对齐，不能跳过或合并：
- “A1苹果”要拆成：
<ruby><rb>A</rb><rt>A</rt></ruby><ruby><rb>1</rb><rt>1</rt></ruby><ruby><rb>苹</rb><rt>píng</rt></ruby><ruby><rb>果</rb><rt>guǒ</rt></ruby> - 若拼音为空（如标点），仍需保留
<rt></rt>或填占位符<rt></rt>，否则数量不匹配 - 服务端生成时别用字符串拼接
v-html或dangerouslySetInnerHTML，易因&、等字符破坏结构；应封装为组件，props 只传纯文本值
多字共用一个 ruby 容器是否可行？
可以，但仅限于严格一一对应的 rb+rt 对，且不能跨字共享 rt：
- ✅ 正确：
<ruby><rb>北</rb><rt>běi</rt><rb>京</rb><rt>jīng</rt></ruby> - ❌ 错误：
<ruby>北京<rt>běi jīng</rt></ruby>（基文为两个字符，rt无法对齐） - ⚠️ 注意：
rb和rt必须同级、直接子元素，中间不能插span、换行或空格，否则 Safari/旧 WebView 会中断解析
rp 的位置和内容到底有多严格？
rp 不是装饰，是 fallback 机制，浏览器只在识别不到 ruby 时才启用它，且有硬约束：
- 必须嵌在
rt内部，且只能出现在开头或结尾：<rt><rp>(</rp>hàn<rp>)</rp></rt> - 内容只能是纯括号字符：
( ) [ ] { }，多一个空格、字母或 HTML 实体都会导致 fallback 失效 - Chrome 会渲染出括号，Safari 则隐藏；生产环境建议用 CSS 强制隐藏：
rp { display: none; }，避免干扰视觉
最容易被忽略的是：rb 已成为现代渲染的强制前提，而所有字符——无论是否汉字——都必须纳入 rb/rt 的逐个映射链中；漏掉一个空格或数字，整段注音就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
