是唯一语义正确、可访问合规的拼音注释方案，标准结构为汉字pīn yīn，需带声调、字间空格、按口语习惯标注轻声与变调，现代浏览器原生支持。
用 <ruby></ruby> 标签实现拼音注释，不是用 <sup></sup> 或 CSS 模拟
直接用 <ruby></ruby> 是唯一语义正确、可访问性合规、浏览器原生支持的方案。别试图用 <span></span> 套 <sup></sup> 加 position 定位——屏幕阅读器读不出拼音，缩放时偏移错乱，打印时消失。
标准结构是：<ruby><rb>汉字</rb><rt>拼音</rt></ruby>。其中 <rb></rb>（ruby base）包裹被注释文字，<rt></rt>（ruby text）包裹拼音。现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+）都支持，IE 完全不支持，但 IE 已淘汰。
常见错误现象：<ruby>汉字<rt>pīn yīn</rt></ruby> —— 缺少 <rb></rb>，部分浏览器会忽略 <rt></rt>；或把拼音写成 pīnyīn（没空格），导致声调位置错乱。
- 拼音必须带声调，且每个字后加空格，如
<rt>hēi sè</rt>，不是hēisè - 多音字需按上下文选读音，HTML 不自动判断，得人工核对
- 如果只注一个字，
<rb></rb>和<rt></rt>一一对应；连续多个字共用一个拼音（如专有名词），要把所有字包进同一个<rb></rb>，再配一个<rt></rt>
处理多字连读、轻声、儿化音的写法细节
拼音不是简单查字典拼接。中文朗读规则会影响实际标注形式，而 <ruby></ruby> 只负责呈现，不参与发音逻辑。
例如“我们”读作 wǒ men（“们”轻声），不能标成 wǒ mén；“小孩儿”要标 xiǎo hái ér（“儿”单独成音节，不写“r”）。这些必须手动按口语习惯写，否则语音合成工具或辅助技术会读错。
- 轻声不标调号，但保留原字对应的拼音字母，如“了”标
le，不是liǎo - “一”“不”变调需按实际读音写：
yí wàn（一万）、bù qù（不去） - 儿化音统一用
ér，如“花儿”huā ér，不是huār - 避免在
<rt></rt>里加 HTML 实体或额外空格，只放纯文本拼音
兼容旧浏览器或复杂排版时的降级 fallback 方案
<ruby></ruby> 在不支持的环境（如老旧 Android WebView、部分邮件客户端）里会退化为纯文本：汉字和拼音堆在一起，比如“汉字拼音”。这不是 bug，是规范定义的行为。
若业务强制要求兼容，只能放弃语义化，改用 CSS Grid 模拟布局，但必须同步提供 ARIA 标注：
<span role="text" aria-label="hēi sè">黑色</span>
这种写法牺牲可访问性精度（aria-label 全局覆盖整个词），且无法响应字体大小缩放。所以优先坚持用 <ruby></ruby>，仅在明确监测到不支持环境时，才通过 JS 动态插入 fallback。
- 检测支持性可用
typeof document.createElement('ruby').getBoundingClientRect === 'function'（粗略但够用） - 不要用 Modernizr 等重型库做 ruby 支持检测，增加加载负担
- CSS 中避免给
<ruby></ruby>设置font-size或line-height，不同浏览器默认渲染差异大；如需微调，只用ruby-position: under控制拼音位置（上标/下标）
编辑器里快速输入 ruby 结构的实操技巧
手敲 <ruby><rb></rb><rt></rt></ruby> 效率低还易漏标签。推荐三类方案：
- VS Code 用户装插件 Ruby Annotation Snippets，输入
rb+ Tab 直出完整结构，光标自动定位到<rb></rb>内 - Sublime Text 可自建 snippet，绑定快捷键，内容为：
<ruby><rb>${1:汉字}</rb><rt>${2:pīn yīn}</rt></ruby> - 网页编辑器（如 TinyMCE）需启用
valid_elements白名单，显式加入ruby[|],rb[|],rt[|]，否则保存时会被过滤掉
最麻烦的其实是拼音校对——没有全自动方案。别信“一键转拼音”工具，它们对多音字、轻声、语境变调基本靠猜。上线前至少两人交叉核对一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
