ruby标签专为中文教学中汉字拼音标注而生，语义正确、支持屏幕阅读器；标准结构为中(zhōng)，多字须逐字包裹，不可合并。

ruby 标签在中文教学中能做什么

它专为标注文字读音或释义而生，对中文教学最直接的价值是：给汉字加拼音（ruby + rt），且语义正确、可访问性好、支持屏幕阅读器朗读。不是用 span 堆样式，也不是靠 JS 模拟——原生标签就自带结构化语义。

怎么写一个带拼音的汉字（标准结构）

必须严格遵循嵌套规则，否则渲染异常或被辅助技术忽略：

• <ruby></ruby> 是容器，包裹被注释字和注释内容
• <rb></rb> 包裹被注释的汉字（HTML5 中可省略，但显式写出更清晰、兼容旧浏览器）
• <rt></rt> 必须存在，包裹拼音（如 zhōng），且只能出现在 <ruby></ruby> 内
• <rp></rp> 是可选的括号 fallback，用于不支持 ruby 的老浏览器（如 IE）显示括号包裹拼音

示例（推荐写法）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<ruby><rb>中</rb><rp>(</rp><rt>zhōng</rt><rp>)</rp></ruby>

常见错误：为什么拼音没显示或错位

实际开发中最常踩的坑不是语法，而是 CSS 干预和 DOM 结构破坏：

• 给 ruby 或 rt 设置 display: block 或 float —— 会彻底破坏 ruby 的行内布局逻辑
• 把多个汉字和多个拼音混在一个 <ruby></ruby> 里却不分 <rb></rb>，例如 <ruby>中国<rt>zhōng guó</rt></ruby> → 拼音可能整体漂到末尾
• 用 font-size 直接缩放 rt，导致基线偏移；应优先用 line-height 和 vertical-align 微调
• 在 Vue/React 中动态生成时，漏掉 <rb></rb> 或拼错标签名（如写成 <rt></rt>），大小写敏感会导致失效

进阶：多音字、词组注音与样式微调

中文教学系统常需处理「一词多音」或「整词注音」，这时不能硬塞所有拼音进一个 <rt></rt>：

• 多音字建议拆成独立 <ruby></ruby> 单元，配合交互（如 hover 或 click 切换），避免语义混乱
• 词组注音（如“中华人民共和国”）应逐字标注，而非整词配一个拼音串；否则语音合成会读错节奏
• 若需统一控制拼音字体大小，用 CSS 属性选择器更安全：ruby rt { font-size: 0.6em; }，而非全局设置 small 标签
• 移动端要注意 rt 在小屏上可能被截断，加 ruby { line-height: 1.8; } 预留垂直空间

真正难的不是写对标签，而是让拼音位置稳定、语义无歧义、在各种屏幕和朗读引擎下都保持可理解——这需要测试真实设备上的 VoiceOver、TalkBack 和 NVDA 行为，而不是只看 Chrome 渲染效果。

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