现代浏览器渲染拼音必须显式使用<rb>标签包裹每个被注音字符；仅用<ruby>和<rt>会导致降级为平铺显示，多字需逐字拆分并独立包裹，非汉字字符也须纳入<rb>。
直接用 <ruby> + <rb> + <rt> 三件套，缺一不可；现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）已强制要求显式 <rb>，漏掉就当纯文本渲染。
为什么写了 <ruby> 和 <rt> 却不显示拼音
核心原因是没写 <rb>。只写 <ruby>汉<rt>hàn</rt></ruby> 在当前主流浏览器中会被降级为“汉hàn”平铺显示，不是上标拼音。
-
<rb>必须包裹每个被注音的汉字，不能省略，也不能用空格或换行隔开 - 正确结构是：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 多字必须逐字拆：「北京」要写成
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby>，不能合在一个<ruby>里共用一个<rt> - 父容器若设了
line-height: 1或overflow: hidden，<rt>很容易被裁掉
pypinyin 生成的 HTML 容易错位？检查这三个点
用 lazy_pinyin() 逐字调用没问题，但常见翻车点不在拼音逻辑，而在 HTML 结构拼接。
- 禁用
errors='ignore'：遇到英文字母或数字时会跳过，导致<rb>和<rt>数量不一致 - 非汉字字符（如 emoji、全角标点）也要原样包进
<rb>，不能只处理汉字块——否则结构断裂 - 别手动字符串拼接
<ruby>...</ruby>，用enumerate()对齐索引更稳：for i, char in enumerate(text): html += f"<ruby><rb>{char}</rb><rt>{pinyin[i]}</rt></ruby>"
要不要加 <rp>？现代项目可以省，但得知道它怎么用
<rp> 不是装饰，是 fallback 机制：老浏览器（IE11、旧安卓 WebView）不识别 <ruby> 时，会把 <rt> 当普通文本，而 <rp> 里的括号能让它显示成 “汉(hàn)” 这种可读格式。
立即学习“前端免费学习笔记（深入）”；
- 如果目标环境明确是 Chrome/Firefox/Safari 最新版，
<rp>可省，但结构仍要合法：<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 需要兼容旧环境时，
<rp>必须严格嵌套在<rt>内，且只含括号：<rt><rp>(</rp>hàn<rp>)</rp></rt> -
<rp>不能出现在<rb>外或<rt>外，否则被忽略
最易被忽略的是 <rb> 的强制性——它不是可选语法糖，而是现代浏览器渲染拼音的硬性前提；另外，所有非汉字字符（包括空格、数字、英文）都得参与结构包裹，否则整段注音链就断了。
