rb 标签是触发 html 拼音注音渲染的必要开关，ruby 和 rt 必须配合 rb 构成完整结构，否则浏览器仅作普通文本渲染；多字注音须一字一 rb+rt，样式需显式重置以避免错位裁剪。
ruby 和 rt 不是独立可用的标签，必须配合 rb 构成完整注音结构，否则浏览器不识别为拼音排版。
为什么 ruby 里直接写汉字 + rt 不显示拼音
这不是浏览器 bug，而是 HTML 规范强制要求：被注音的汉字必须显式包裹在 rb 标签内。没有 rb，ruby 就只是个普通容器，rt 内容会被当作普通文本平铺渲染。
-
ruby汉rthàn/rt/ruby→ Firefox/Edge 中拼音紧贴汉字后，无上标效果 -
rubyrb汉/rbrthàn/rt/ruby→ 所有现代浏览器均正确上标显示 - Chrome/Safari 会“宽容”地把
ruby内非rt的文本自动当rb处理，但不能依赖——一换浏览器就失效
多字注音必须一字一 rb+rt 组合
哪怕语义连贯（如“苹果”），也不能用一个 rb 包两个字、一个 rt 写两个拼音。否则缩放、换行、字体替换时极易错位脱钩。
- 安全写法：
rubyrb苹/rbrtpíng/rt/rubyrubyrb果/rbrtguǒ/rt/ruby - 风险写法：
rubyrb苹果/rbrtpíng guǒ/rt/ruby→ “píng guǒ”可能整体浮起，无法对齐单字 - 混排数字/英文时，只给汉字套
rb：rubyrb第/rbrtdì/rt/ruby123rubyrb页/rbrtyè/rt/ruby
样式控制关键：别信浏览器默认 rt 缩放
不同浏览器对 rt 的默认 font-size（Firefox 50%，Safari 50%～60%）和 line-height 不一致，尤其父容器设了 line-height: 1 时，rt 常被顶部裁剪。
- 必须显式重置：
ruby{line-height: 1.8;font-size: 1em; } -
rt{font-size: 0.6em;line-height: 1.2; } —— 避免依赖不可靠的百分比缩放 - 防换行断裂：
ruby{white-space: nowrap; }，但仅加在含ruby的内联片段上，别污染整段 - 移动端 Safari 只支持
ruby-position: over（上方），under无效，无需额外 hack
动态生成时最容易漏掉的结构校验点
用 Python 的 pypinyin 或 JS 的 pinyin-pro 生成 HTML 很快，但只要拼音数组和汉字字符串长度不等，或漏套一层 rb，整段注音就退化为纯文本。
- 生成前先校验：
len(chars) == len(pinyins)，否则中断并报错 - 每个字必须对应一个
ruby块，不能拼接成一个大ruby后再塞所有rb+rt - 注意全角空格、标点、emoji：它们不该进
rb，也不该触发拼音生成
最常被忽略的是 rb 的存在性——它不是可选包装，而是触发注音渲染的开关。少了它，ruby 和 rt 就只是三个普通标签名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
