标签是标注多音字的正确方案，因其专为汉字注音设计，支持无障碍阅读与浏览器原生渲染；和仅具样式功能，无法承载读音信息。
<mark></mark> 不适合标注多音字——它语义是“高亮引起注意”，不是“标读音”。真要批量处理多音字，得靠拼音标注工具，不是 HTML 标签。
为什么不能用 <mark></mark> 或 <b></b> 标多音字
多音字本质是「同一字形对应多个读音」，需要把拼音和汉字对齐显示（比如“长”上标“cháng/zhǎng”）。<mark></mark> 只能加背景色，<b></b> 只能加粗，两者都不带读音信息，也不能控制声调位置。浏览器不会识别它们为拼音，屏幕阅读器读不出，搜索引擎也抓不到发音线索。
常见错误现象：
- 手动在文字后加括号写拼音，如「长（cháng）」——导出 PDF 时换行错位、手机端显示挤在一起
- 用
<sup></sup>上标拼音——声调符号飘在字顶上，不同字体渲染高度不一致 - 把多音字全替换成图片——无法复制、搜索、缩放失真
真正能批量处理多音字的实操路径
必须分两步：先由工具生成带拼音的 HTML（含正确声调、对齐、多音字可选），再嵌入网页。别指望纯手写 HTML 实现“批量”。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
- 桌面端：用
汇帮注音大师导出 HTML 文件，它支持多音字点击切换、五种声调样式（含“拼音在上、汉字在下”的标准排版） - Mac 用户：
拼音标注工具（Mac 版）支持粘贴文本后逐字点选多音字读音，输出可直接复制进 HTML 编辑器 - 开发者场景：若需集成到构建流程，用 Node.js 调用
pinyin-pro库（支持多音字上下文识别），再用模板生成<ruby><rb><rt></rt></rb></ruby>结构
如果硬要在 HTML 里保留多音字选择逻辑，用 ruby + data-* 属性
标准方案是 <ruby></ruby>：它专为汉字注音设计，浏览器原生支持，无障碍友好，且能正确包裹多音字和对应拼音。
示例（一个可交互的多音字）：
<ruby data-pinyin="cháng zhǎng"> 长 <rp>(</rp><rt>cháng</rt><rp>)</rp> </ruby>
说明：
-
<ruby></ruby>是容器，<rt></rt>放拼音，<rp></rp>是降级括号（老浏览器 fallback） -
data-pinyin存所有可能读音，供 JS 后续绑定点击切换事件 - 不要省略
<rp></rp>—— Safari 旧版本不渲染<rt></rt>时，至少括号能提示这是多音字
最后提醒：HTML 本身没有“多音字标注”原生机制，所谓“批量”，本质是借力外部工具生成结构化内容。想靠写几个标签就搞定几十页课件里的多音字，只会越弄越乱——声调位置、字号比例、换行对齐、移动端适配，全是坑。
