HTML的<ruby>标签仅支持静态单读音标注，无法自动切换多音字；需JS+ARIA实现交互式读音切换，并注意拼音格式、兼容性及语义规范。
ruby 标签本身不支持多音字自动切换
HTML 的 <ruby> 是静态标注结构，只能为一段文本绑定一个固定的注音（比如普通话拼音），无法像电子词典那样点击切换“行”字的 xíng 和 háng。它解决的是「单语境下的一对一注音」，不是多读音交互。
常见错误是以为套个 <ruby><rb>行</rb><rt>xíng/háng</rt></ruby> 就能实现切换——实际渲染出来只是把 xíng/háng 当作一个整体注音显示，语义混乱，也不符合可访问性规范。
多音字需靠 JS + ARIA 手动控制读音切换
真实场景中要支持用户选择读音，得用 JavaScript 管理状态，并配合 aria-label 或动态替换 <rt> 内容。核心思路是：保留原始文字不变，让注音区域可交互。
- 用
<button>包裹<ruby>，每个按钮对应一种读音 - 点击时通过 JS 更新
<rt>的textContent，同时设置aria-label供屏幕阅读器读出当前读音 - 避免直接修改
<rb>内容，否则破坏语义和 SEO - 注意键盘焦点管理：按钮需可 tab 到达，回车/空格触发切换
<ruby id="polyphonic-ruby">
<rb>行</rb>
<rt aria-live="polite">xíng</rt>
</ruby>
<button onclick="switchPron('xíng')">行走</button>
<button onclick="switchPron('háng')">银行</button>
拼音排版细节影响可读性
即使只标一种读音，<rt> 里的拼音也不能简单写成 xing。中文注音有明确格式要求：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 声调必须标在韵母上，用 Unicode 字符（如
xíng，不是xing2或xing^2） - ü 要写成
ǚ（如nǚ），不能用nu或nv - 轻声用小圆点
·（如ma·），但多数浏览器对·渲染位置不一致，稳妥起见可省略或用空格 -
<rt>默认字体较小、行高紧凑，若需更好可读性，建议加 CSS：rt { font-size: 0.7em; letter-spacing: 0.05em; }
兼容性与语义陷阱要提前检查
<ruby> 在 Chrome/Firefox/Safari 中支持良好，但 IE 完全不支持，Edge 18 及更早版本也有渲染 bug（比如 <rt> 错位）。更重要的是语义层面：
- 不要把
<ruby>用在非汉字场景（比如给英文单词标音），这违背 HTML5 规范本意 - 搜索引擎目前基本忽略
<rt>内容，别指望靠它提升关键词排名 - 屏幕阅读器对
<ruby>的支持参差不齐——NVDA 会读<rb>和<rt>，但 VoiceOver 有时跳过<rt>，所以必须补aria-label - 移动端 Safari 对嵌套
<ruby>（比如一个字里再套 ruby）支持极差，尽量扁平化
多音字本质是语言歧义问题，HTML 标签只是呈现层。真正健壮的方案得结合上下文判断（比如“银行”出现时默认标 háng），而不是堆砌交互控件。这点容易被忽略，但恰恰决定用户体验是否自然。
