HTML原生元素支持多音字注音，需严格遵循包汉字、标拼音（如（xíng））的结构，依赖人工据语境定音，配合aria-label可增强无障碍体验。
用 <ruby></ruby> 和 <rt></rt> 标注多音字读音
HTML 原生支持汉字注音，核心是 <ruby></ruby> 元素：它专为东亚文字的发音或释义标注设计，语义清晰、屏幕阅读器可识别、无需 JS 就能渲染。多音字场景下，<ruby></ruby> 的结构必须严格——一个被注音的字（<rb></rb>）对应一个注音（<rt></rt>），不能省略 <rb></rb> 或混用顺序。
常见错误是直接把拼音写在汉字后面（如“行（xíng）”），这既无语义、也不利于无障碍访问；还有人误用 <sup></sup> 或 CSS 伪元素模拟注音，结果缩放时错位、打印丢失、语音朗读跳过拼音。
-
<rb></rb>必须包裹被注音的单个汉字，不能是词或空格 -
<rt></rt>内容建议用中文全角括号+拼音（如（xíng）），避免斜杠分隔（xíng/háng）——后者会被朗读为“xíng slash háng” - 若同一字在条目中多次出现且读音不同，每次都要独立套
<ruby></ruby>，不能复用
处理多音字歧义：靠上下文而非自动识别
HTML 本身不判断读音，<ruby></ruby> 只负责“这里标的是这个音”，最终读音由词典编辑者根据条目语境人工确定。比如“行”在“银行”中读 （háng），在“行走”中读 （xíng），必须分别写两组：
<ruby><rb>银</rb><rt>（yín）</rt></ruby><ruby><rb>行</rb><rt>（háng）</rt></ruby> <ruby><rb>行</rb><rt>（xíng）</rt></ruby><ruby><rb>走</rb><rt>（zǒu）</rt></ruby>
不要试图用 class 或 data-* 属性存多个读音再靠 JS 切换——词典条目是静态内容，动态切换反而增加复杂度且破坏语义。
立即学习“前端免费学习笔记（深入）”；
- 遇到“一”“不”等变调字（如“一定”中“一”读 yí），按实际口语发音标注，不是原调
- 轻声字（如“妈妈”的第二个“妈”）标
（ma），不写声调符号 - 繁体字需注意对应繁体拼音（如“裏”读
（lǐ），不是简体“里”的映射）
兼容性与样式微调要点
所有现代浏览器（Chrome 5、Firefox 3.5、Safari 5、Edge 12+）都支持 <ruby></ruby> 基础渲染，但默认样式较简陋：拼音常偏小、位置偏高。可通过 CSS 调整，但必须保留语义结构。
- 用
ruby { font-size: 0.8em; }统一控制注音大小，别只调<rt></rt>—— 否则响应式缩放时失衡 - 避免用
position: relative移动<rt></rt>，会破坏可访问性；优先用ruby-align和ruby-position - IE8 及更早版本不支持，但词典类站点通常已不需兼容；若必须支持，可用
<span class="ruby">行<span class="rt">（háng）</span></span>+ CSS 模拟，但放弃语义
和 ARIA 配合提升无障碍体验
仅用 <ruby></ruby> 已能满足基础朗读需求，但对视障用户，明确说明“这是读音”能减少歧义。可在 <rt></rt> 上加 aria-label，值为“读音：xíng”：
<ruby><rb>行</rb><rt aria-label="读音：xíng">（xíng）</rt></ruby>
注意：aria-label 是补充，不是替代；不能放在 <ruby></ruby> 根元素上（会覆盖整个 ruby 内容的朗读），也不能用 title 属性（鼠标悬停才触发，对键盘/语音用户无效）。
- 拼音若含特殊符号（如 ü），用 Unicode 字符
ü，别写成u:或v—— 屏幕阅读器会正确朗读 - 避免在
<rt></rt>里塞 HTML 标签（如<strong></strong>），会导致朗读中断或报错 - 批量生成时，确保拼音数据源准确（推荐用《现代汉语词典》API 或 opencc + pypinyin 校验）
实际做词典条目时，最易被忽略的是变调和轻声处理——人工校对环节常默认按原调标注，导致语音输出失真。另外，多人协作时容易把 <rb></rb> 和 <rt></rt> 顺序写反，浏览器虽能容错渲染，但校验工具（如 axe）会报语义错误。
