必须显式使用包裹每个被注音字并配对，缺一不可；需css设置font-size、line-height等样式，且页面须声明lang="zh-cn"，否则现代浏览器不渲染拼音。
直接写 <ruby>汉<rt>hàn</rt></ruby> 是无效的，浏览器不会显示拼音——缺 rb、没 CSS、没语义对齐，三者任一缺失都会导致错位或不渲染。
必须成对使用 rb 和 rt
HTML5 规范要求每个基字必须显式包裹在 rb 中，再紧跟对应 rt；单独用 rt 或把多个字塞进一个 rb 都会降级为普通文本流。
-
<ruby><rb>重</rb><rt>chóng</rt></ruby>✅ 正确：单字一对一 -
<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>✅ 正确：双音节词逐字拆分 -
<ruby>苹果<rt>píng guǒ</rt></ruby>❌ 错误：拼音整体浮在两字上方，无法对齐 -
<ruby><rt>hàn</rt></ruby>❌ 错误：缺rb，多数浏览器忽略rt
CSS 不是可选，而是生效前提
浏览器默认不给 rt 垂直偏移和缩放，不设样式 = 拼音和汉字一样大、叠在一起、甚至被截断。
- 必须为
rt设font-size: 0.5em（或具体值如12px），否则尺寸失控 - 父容器需设
line-height: 1.8，避免行高过小导致拼音被上一行挤压截断 - 加
ruby-align: center，部分旧浏览器（如 Safari 16.3 及更早）不声明就默认左对齐 - 整组
ruby加white-space: nowrap，防止换行撕裂字-音对应关系
多音字、标点与 JS 动态生成的坑
手动写还容易控制，但用 JS 自动生成时，以下三点几乎必踩：
- 标点符号（，。！？）不能进
rb，否则屏幕阅读器会朗读“逗号”二字，破坏语义顺序 - 拼音库返回的声调格式要校验：
"ni3 hao3"必须转成"nǐ hǎo"，否则显示为无调拼音 - 用户输入含
\n或空格时，rb内容可能为空，导致 DOM 结构断裂，rt悬空失效
最易被忽略的是：哪怕结构完全合法、CSS 全部写对，如果页面没声明 lang="zh-CN"，部分浏览器（尤其是 Safari）仍可能禁用东亚排版引擎，让 ruby 表现异常——这不是 bug，是特性开关没打开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
