HTML原生多音字注音用ruby标签，需rb包汉字、rt包拼音且成对出现；多字须分ruby包裹；兼容IE需title或JS降级；iOS Safari注意line-height。
用 ruby 标签实现基础多音字注音
HTML 原生支持多音字标注，核心就是 ruby 元素。它不是 JS 库或 CSS 技巧，而是语义化标签，浏览器原生渲染为小号拼音（或日文假名），且对屏幕阅读器友好。
基本结构是：ruby 包裹汉字，rb 放汉字，rt 放拼音——注意 rb 和 rt 必须成对出现，且顺序不能颠倒：
<ruby> <rb>长</rb> <rt>zhǎng</rt> </ruby>
常见错误是把拼音直接写在 ruby 里（如 <ruby>长<rt>zhǎng</rt></ruby>），这会导致“长”字被忽略；或者漏写 rb，让浏览器无法关联字与音。
多个多音字连续出现时的结构处理
连续多个字需要分别注音时，不能共用一个 ruby 标签，否则拼音会堆叠或错位。每个字（或词）应独立包裹：
立即学习“前端免费学习笔记（深入）”；
<ruby><rb>行</rb><rt>xíng</rt></ruby> <ruby><rb>不</rb><rt>bù</rt></ruby> <ruby><rb>可</rb><rt>kě</rt></ruby>
如果强行合并：<ruby><rb>行不可</rb><rt>xíng bù kě</rt></ruby>，多数浏览器会把拼音整体居中对齐到“行不可”三字下方，失去逐字对应关系。
另外，ruby 不支持嵌套，也不能放在 span 或 strong 内部再加样式——需靠外部 class 控制字体大小或颜色。
兼容性与 fallback 方案
现代浏览器（Chrome 5、Firefox 38、Safari 5、Edge 12+）都支持 ruby，但老版本 IE 完全不识别，会直接忽略标签，只显示汉字——这对多音字页面是致命问题。
必须提供降级方案：
- 用
title属性补充拼音：<span title="zhǎng">长</span>，鼠标悬停可见 - 在
ruby外层加span并设置data-pinyin="zhǎng"，用 JS 检测ruby是否生效，未生效时动态插入括号拼音（如“长(zhǎng)”） - 避免依赖 CSS 的
ruby-position等新属性，它们在 Safari 中支持不稳定
特别注意：iOS Safari 对 ruby 的行高控制较弱，若父容器 line-height 过小，rt 可能被截断，建议显式设置 ruby { line-height: 1.4; }。
动态注入多音字注音的 JS 注意点
如果用 JS 批量添加注音（比如从 JSON 配置生成），关键不是拼 DOM 字符串，而是确保节点结构合法：
- 必须创建
ruby、rb、rt三个元素，不能只用innerHTML = '<ruby>...</ruby>'后追加——部分浏览器解析时会自动闭合，破坏嵌套 - 不要用
document.write()，它会清空整个页面 - 注音数据里含空格或连字符（如 “bù kě” 或 “yīng-yǔ”）要原样保留，
rt内容不参与 HTML 转义 - 若原文含 HTML 标签（如
<em>重</em>点），先提取纯文本再注音，否则rb里塞进标签会导致结构混乱
最稳妥的方式是遍历文本节点，对匹配到的关键词（如“长”“行”“好”）逐个替换为 ruby 结构，而不是整段替换。
