不能用<span>或手动堆拼音，因其换行错位、无障碍支持为零、复制语义断裂、移动端偏移严重；<ruby>必须显式使用<rb>包裹每个汉字并一一对应<rt>，推荐写法为<ruby><rb>汉</rb><rt>hàn</rt><rb>字</rb><rt>zì</rt></ruby>。
HTML 里没有原生的“拼音标注”标签，<ruby> 是唯一标准方案，但浏览器支持和排版细节容易翻车。
为什么不能用 <span> 或 <sup> 手动堆拼音
有人用 <span> 套两层、再用 CSS 定位把拼音“贴”在汉字上方，看起来像那么回事——但实际问题一堆：
- 换行时拼音和汉字极易错位，尤其在响应式页面或不同字号下
- 屏幕阅读器完全无法识别这是注音，无障碍支持为零
- 复制文本时拼音常被一起复制，或干脆丢掉，语义断裂
- 移动端缩放后，CSS 定位偏移更明显，维护成本高
<ruby> 的正确写法和必要结构
<ruby> 必须严格遵循“汉字 + <rt>”配对，且不能省略 <rb>（显式包裹基字）或依赖隐式解析——老版本 Safari 和部分安卓 WebView 对隐式 <rb> 支持不稳定。
推荐写法（兼容性最稳）：
立即学习“前端免费学习笔记（深入）”；
<ruby> <rb>汉</rb><rt>hàn</rt> <rb>字</rb><rt>zì</rt> </ruby>
注意：
-
<rb>和<rt>必须一一对应，不能跨字合并（比如<rb>汉字</rb><rt>hàn zì</rt>在某些浏览器里会把拼音全挤在第一个字上） -
<rt>内不要加空格或标点，否则会影响对齐；声调符号（如 à）可直接写，无需 HTML 实体 - 整段文字建议用
<rb>显式包裹每个字，避免浏览器自动拆分带来的不确定性
Chrome/Firefox 正常，但 Safari 和微信内置浏览器常出什么问题
Safari（尤其是 iOS 15–16）和微信 Android 版 WebView 对 <ruby> 的行内高度计算有偏差，常导致拼音离汉字太远或重叠。解决方法不是改 HTML，而是加一行 CSS：
ruby { line-height: 1.2; }
rt { line-height: 1; }
关键点：
- 不要给
<ruby>设font-size，它会连带影响<rt>大小；应单独控制rt的font-size（通常设为基字的 0.5–0.6 倍） - 微信 iOS 版对
<rb>的盒模型解析异常，如果发现拼音左偏，加ruby { text-align: center; }可缓解 - Android 微信旧版（X5 内核）不支持
<rb>，必须降级为无<rb>的写法：<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>，并接受语义弱化
真正麻烦的不是写法，是得同时应付三套渲染逻辑：现代浏览器按标准走，Safari 卡在中间，微信 X5 内核干脆只认老式写法。拼音位置稍一不对，用户第一反应就是“这网页做坏了”，而不是“浏览器有问题”。
