HTML自定义属性（如data-pinyin）可结构化存储多音字读音，需配合CSS、JS或ARIA实现提示与切换，但不自动触发语音合成，语境判断须人工标注或外部NLP预处理。
HTML 自定义属性本身不直接支持多音字语音合成或自动标注，但可以作为结构化数据载体，配合 CSS、JavaScript 或 ARIA 实现可控的多音字提示与读音切换。关键在于把“字形—读音—语境”三者解耦存储，而不是依赖浏览器默认行为。
data-pinyin 属性用于静态读音标注
最常见做法是用 data-pinyin 存储标准拼音（带声调），供 JS 或 CSS 读取展示。注意：它只是元数据，不会自动触发语音朗读。
示例：
<p>这个<span data-pinyin="cháng">长</span>度比那个<span data-pinyin="zhǎng">长</span>得多了。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
使用场景：
- 配合 CSS 的
::after伪元素显示上标拼音（需加content: attr(data-pinyin)） - 被屏幕阅读器忽略（除非额外加
aria-label） - 不能处理轻声、变调等动态规则，需人工预设
dataset.pinyin 配合 JavaScript 动态切换读音
当同一汉字在不同上下文需不同读音时，用 dataset API 比 getAttribute 更方便，且支持驼峰式访问。
示例（点击切换读音）：
<span data-pinyin="xíng" data-pinyin-alt="háng">行</span>
JS 中可这样操作：
const el = document.querySelector('span');
el.addEventListener('click', () => {
const current = el.dataset.pinyin;
const alt = el.dataset.pinyinAlt;
el.dataset.pinyin = alt;
el.dataset.pinyinAlt = current;
});
注意事项：
-
data-pinyin-alt会被自动映射为dataset.pinyinAlt，连字符转驼峰 - 不要用
data-pinyin-1这类含数字的命名——dataset不支持数字开头的键名 - 切换后需同步更新 DOM 文本或 aria-label，否则辅助技术无法感知变化
结合 aria-label 实现可访问的语音提示
仅靠 data-pinyin 无法让屏幕阅读器朗读读音，必须显式绑定到 aria-label 或 aria-roledescription。
安全写法：
<span data-pinyin="qiǎng" aria-label="强，读作 qiǎng">强</span>
或者用 JS 动态注入：
el.setAttribute('aria-label', `强，读作 ${el.dataset.pinyin}`);
关键限制：
-
aria-label会完全覆盖元素的可访问名称，原文字内容将被忽略 - 若需保留原文字 + 补充读音，改用
aria-describedby指向一个隐藏的<span id="hint"></span> - 部分老旧屏幕阅读器对中文拼音支持有限，建议测试 NVDA + Firefox 和 VoiceOver + Safari
CSS 选择器按 data-pinyin 精确控制样式
可以用属性选择器区分不同读音的同一字，比如给「重」字的不同读音加不同颜色或下划线样式：
[data-pinyin="zhòng"] { text-decoration: underline wavy red; }
[data-pinyin="chóng"] { text-decoration: underline wavy blue; }
实用技巧：
- 避免写
[data-pinyin]这种宽泛选择器——它会匹配所有带该属性的元素，干扰其他逻辑 - 如果拼音含声调符号（如 “shǔ”），CSS 选择器中必须原样写出，不能用 HTML 实体
- 不建议用
data-pinyin存储注音符号（ㄅㄆㄇ）或 IPA，因兼容性和字体支持不稳定
真正难的是语境判断——HTML 自定义属性只存结果，不参与推理。比如「银行」的「行」读 háng，但「行走」读 xíng，这种歧义必须由开发者在写 HTML 时人工标注，或由外部 NLP 模块预处理后注入 data-pinyin。别指望浏览器自动猜对。
