HTML原生元素支持多音字注音，需严格遵循包汉字、标拼音（如（xíng））的结构，依赖人工据语境定音，配合aria-label可增强无障碍体验。

用 和 标注多音字读音

HTML 原生支持汉字注音，核心是 元素：它专为东亚文字的发音或释义标注设计，语义清晰、屏幕阅读器可识别、无需 JS 就能渲染。多音字场景下， 的结构必须严格——一个被注音的字（）对应一个注音（），不能省略 或混用顺序。

常见错误是直接把拼音写在汉字后面（如“行（xíng）”），这既无语义、也不利于无障碍访问；还有人误用 或 CSS 伪元素模拟注音，结果缩放时错位、打印丢失、语音朗读跳过拼音。

• 必须包裹被注音的单个汉字，不能是词或空格
• 内容建议用中文全角括号+拼音（如 （xíng）），避免斜杠分隔（xíng/háng）——后者会被朗读为“xíng slash háng”
• 若同一字在条目中多次出现且读音不同，每次都要独立套 ，不能复用

处理多音字歧义：靠上下文而非自动识别

HTML 本身不判断读音， 只负责“这里标的是这个音”，最终读音由词典编辑者根据条目语境人工确定。比如“行”在“银行”中读 （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+）都支持 基础渲染，但默认样式较简陋：拼音常偏小、位置偏高。可通过 CSS 调整，但必须保留语义结构。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用 ruby { font-size: 0.8em; } 统一控制注音大小，别只调 —— 否则响应式缩放时失衡
• 避免用 position: relative 移动 ，会破坏可访问性；优先用 ruby-align 和 ruby-position
• IE8 及更早版本不支持，但词典类站点通常已不需兼容；若必须支持，可用 行（háng） + CSS 模拟，但放弃语义

和 ARIA 配合提升无障碍体验

仅用 已能满足基础朗读需求，但对视障用户，明确说明“这是读音”能减少歧义。可在 上加 aria-label，值为“读音：xíng”：

<ruby><rb>行</rb><rt aria-label="读音：xíng">（xíng）</rt></ruby>

注意：aria-label 是补充，不是替代；不能放在 根元素上（会覆盖整个 ruby 内容的朗读），也不能用 title 属性（鼠标悬停才触发，对键盘/语音用户无效）。

• 拼音若含特殊符号（如 ü），用 Unicode 字符 ü，别写成 u: 或 v —— 屏幕阅读器会正确朗读
• 避免在 里塞 HTML 标签（如 ），会导致朗读中断或报错
• 批量生成时，确保拼音数据源准确（推荐用《现代汉语词典》API 或 opencc + pypinyin 校验）

实际做词典条目时，最易被忽略的是变调和轻声处理——人工校对环节常默认按原调标注，导致语音输出失真。另外，多人协作时容易把 和 顺序写反，浏览器虽能容错渲染，但校验工具（如 axe）会报语义错误。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！