ruby标签专为中文教学中汉字拼音标注而生，语义正确、支持屏幕阅读器；标准结构为<ruby><rb>中</rb><rp>(</rp><rt>zhōng</rt><rp>)</rp></ruby>，多字须逐字包裹，不可合并。
ruby 标签在中文教学中能做什么
它专为标注文字读音或释义而生，对中文教学最直接的价值是：给汉字加拼音（ruby + rt），且语义正确、可访问性好、支持屏幕阅读器朗读。不是用 span 堆样式，也不是靠 JS 模拟——原生标签就自带结构化语义。
怎么写一个带拼音的汉字（标准结构）
必须严格遵循嵌套规则，否则渲染异常或被辅助技术忽略：
-
<ruby>是容器，包裹被注释字和注释内容 -
<rb>包裹被注释的汉字（HTML5 中可省略，但显式写出更清晰、兼容旧浏览器） -
<rt>必须存在，包裹拼音（如zhōng），且只能出现在<ruby>内 -
<rp>是可选的括号 fallback，用于不支持ruby的老浏览器（如 IE）显示括号包裹拼音
示例（推荐写法）：
<ruby> <rb>中</rb> <rp>(</rp><rt>zhōng</rt><rp>)</rp> </ruby>
常见错误：为什么拼音没显示或错位
实际开发中最常踩的坑不是语法，而是 CSS 干预和 DOM 结构破坏：
立即学习“前端免费学习笔记（深入）”；
- 给
ruby或rt设置display: block或float—— 会彻底破坏 ruby 的行内布局逻辑 - 把多个汉字和多个拼音混在一个
<ruby>里却不分<rb>，例如<ruby>中国<rt>zhōng guó</rt></ruby>→ 拼音可能整体漂到末尾 - 用
font-size直接缩放rt，导致基线偏移；应优先用line-height和vertical-align微调 - 在 Vue/React 中动态生成时，漏掉
<rb>或拼错标签名（如写成<RT>），大小写敏感会导致失效
进阶：多音字、词组注音与样式微调
中文教学系统常需处理「一词多音」或「整词注音」，这时不能硬塞所有拼音进一个 <rt>：
- 多音字建议拆成独立
<ruby>单元，配合交互（如 hover 或 click 切换），避免语义混乱 - 词组注音（如“中华人民共和国”）应逐字标注，而非整词配一个拼音串；否则语音合成会读错节奏
- 若需统一控制拼音字体大小，用 CSS 属性选择器更安全：
ruby rt { font-size: 0.6em; }，而非全局设置small标签 - 移动端要注意
rt在小屏上可能被截断，加ruby { line-height: 1.8; }预留垂直空间
真正难的不是写对标签，而是让拼音位置稳定、语义无歧义、在各种屏幕和朗读引擎下都保持可理解——这需要测试真实设备上的 VoiceOver、TalkBack 和 NVDA 行为，而不是只看 Chrome 渲染效果。
