HTML标注多音字须人工判读语义并填唯一准确读音，优先用，禁用自动转换、title或CSS模拟，须带声调且结构闭合。
HTML 中标注现代汉语多音字，核心不是“加个拼音就行”，而是要兼顾语义准确性、可访问性（a11y）和浏览器/屏幕阅读器的实际解析逻辑。直接用 套 是最稳妥的起点，但必须配合上下文判断读音，不能靠自动转换。
多音字必须人工判读，ruby 不会猜读音
浏览器不会根据词义自动选择“行”读 xíng 还是 háng，“长”读 cháng 还是 zhǎng。行长 这种写法错误——它把两个读音并列堆进 ，屏幕阅读器可能连读或乱序播报，对视障用户反而造成干扰。
正确做法是：先确认该处实际语义，再填唯一准确读音。例如：
- “银行行长”中“行”指机构，读
háng；“他行不行”中“行”表能力，读xíng - “长短”中“长”是形容词，读
cháng；“长大”中“长”是动词，读zhǎng - 若原文本身存在歧义（如古诗“远上寒山石径斜”），应按《普通话异读词审音表》最新规范取舍，不保留“xiá”等旧读
ruby 标注要闭合、嵌套清晰，禁用空格或换行破坏结构
内部结构脆弱，任意空白符（包括换行、缩进）都可能导致渲染错位或语音播报截断。下面这些写法都有风险：
<ruby> 行<rt>xíng</rt></ruby>
应严格写成单行、无多余空格：
<ruby>行<rt>xíng</rt></ruby>
多字词需逐字或整词标注，推荐整词（更符合语义单位）：
- ✅
银行 - ✅
行为 - ❌
银行（拆开后声调易错位，且“银”无多音，不必要标注）
避免用 title 或 CSS 伪元素模拟拼音
有人用 title="xíng" 或 ::after { content: "xíng"; } 显示拼音，这两种方式都不可取：
-
title仅在悬停时触发，对触摸设备、键盘导航、屏幕阅读器基本无效 - CSS 生成的内容默认不被屏幕阅读器朗读，且无法控制语速、声调停顿
- 拼音缺失声调符号（如 “xing” 而非 “xíng”）会导致语义混淆，“重”读 chóng 和 zhòng 完全不同
真正需要兼容旧浏览器或轻量场景时，可退而求其次用带 aria-label 的 ，但必须手动补全声调：行为。不过这仍是折中方案，ruby 仍是首选。
最常被忽略的一点：拼音标注不是装饰，它承担语义传达责任。一个“发”字在“发现”里读 fā，在“发廊”里读 fà，标错就等于改写原意。别依赖工具自动生成，每个 都得经人眼核对词典或《现代汉语词典》第7版、《普通话异读词审音表（2016年修订）》。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
