现代浏览器必须显式写出rb标签，否则ruby+rt被当纯文本渲染；rb是硬性结构组件，需逐字包裹汉字及空格、数字、英文等所有字符，且rp须严格嵌套在rt内作降级兼容。
现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）必须显式写出 rb 标签，否则 ruby + rt 会被当纯文本渲染，拼音完全不显示。
为什么写了 ruby 和 rt 却没拼音？
核心原因是漏了 rb。浏览器已将 rb 视为硬性结构组件，不是可选标签。
-
<ruby>汉<rt>hàn</rt></ruby>→ 渲染为“汉hàn”，rt内容直接 inline 显示 - 正确写法必须是：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 多字必须逐字拆开：
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby>，不能共用一个rt -
rb必须包裹每个被注音字符：空格、数字、英文、emoji、全角标点都得原样放进rb，否则数量错位，整段注音链断裂
rp 是不是可有可无的装饰？
rp 不是装饰，是降级兼容的关键开关——它只在不支持 ruby 的环境（如 IE11、旧安卓 WebView）中生效，让屏幕阅读器或老浏览器显示“汉(hàn)”而不是“汉hàn”。
- 必须严格嵌套在
rt内：<rt><rp>(</rp>hàn<rp>)</rp></rt> -
rp内容只能是纯括号字符（(、)、[、]），含空格或字母会被忽略 - 禁止写成：
<rp>(</rp><rt>hàn</rt><rp>)</rp>——rp在rt外，被浏览器忽略 - 若项目明确不支持 IE 或老旧 UA，可省略
rp，但需确认 CMS、邮件客户端等下游是否真能绕过
多音字、地名、非汉字字符怎么处理？
ruby 不会自动识别语境，所有音都靠人工指定；非汉字字符也必须参与结构包裹，否则语义断裂。
- “重庆”必须拆开：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则易误读为zhòng qìng - “长”字按上下文手动指定：
<ruby><rb>长</rb><rt>cháng</rt></ruby>vs<ruby><rb>长</rb><rt>zhǎng</rt></ruby> - 英文或数字也要占位：
<ruby><rb>A</rb><rt></rt></ruby><ruby><rb>1</rb><rt>yī</rt></ruby>，哪怕拼音为空，也得补<rt></rt>或占位符 - 混排阿拉伯文/日文时，必须加
bdi隔离方向，lang="zh-Hans"指定语音规则，否则 TTS 可能读错
最易被忽略的是 rb 的强制性——它不是语法糖，而是现代浏览器渲染拼音的硬性前提；另外，所有非汉字字符都得参与结构包裹，否则整段注音链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
