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