标签专为东亚文字注音设计，与ruby编程语言无关；必须严格采用字音结构，逐字包裹、一一对应，配合保障旧浏览器兼容性。
ruby 标签不是用来放 Ruby 语言代码的
很多人第一次看到 <ruby></ruby> 就下意识觉得和编程语言 Ruby 有关，其实完全无关——它是 HTML5 专为东亚文字注音（比如汉字上标假名、拼音）设计的语义化标签。用错场景或套错结构，浏览器会直接忽略渲染，或者只显示裸文本。
核心结构必须是：<ruby><rb>汉字</rb><rt>发音</rt></ruby>，其中 <rb></rb> 包裹基础文字（base text），<rt></rt> 包裹注音（ruby text）。漏掉 <rb></rb> 或把拼音直接塞进 <ruby></ruby> 里，多数浏览器不认。
中文拼音要加空格、声调，但别用 font 标签硬调位置
想让拼音对齐每个汉字，不能靠 <font size="-1"></font> 或 CSS 的 position: relative 往上拉——这样在不同字号、行高、缩放比例下极易错位，且无障碍阅读器无法识别发音关系。
正确做法是严格按字粒度拆分：<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>。注意：
- 每个
<rb></rb>对应一个汉字，每个<rt></rt>对应一个拼音（含声调） - 不要写成
<rb>苹果</rb><rt>píng guǒ</rt>—— 浏览器无法自动对齐两个字和两个拼音 - 英文单词注音同理：单音节词可整体包，多音节建议按音节切（如
in-ter-nal），但需配合<rp></rp>降级兼容
IE 和旧版 Safari 不支持 ruby，得用 rp 做兜底
没加 <rp></rp> 的 <ruby></ruby> 在 IE11 或 Safari 12 以下会直接显示全部内容（比如“苹果(píng)(guǒ)”），非常难看。解决方法是在每个 <rt></rt> 前后加 <rp>(</rp> 和 <rp>)</rp>，这样不支持的浏览器就只显示括号里的拼音，支持的则隐藏括号、正常渲染注音。
完整示例：
<ruby><rb>苹</rb><rp>(</rp><rt>píng</rt><rp>)</rp><rb>果</rb><rp>(</rp><rt>guǒ</rt><rp>)</rp></ruby>
<rp></rp> 本身没有语义，纯为兼容而存在，现代浏览器会自动隐藏它。
长句或混合排版时，ruby 容易被 line-height 和 font-size 拉变形
如果父容器设置了 line-height: 1.2 或 font-size: 18px，而 <rt></rt> 的字体又没显式设小（比如 font-size: 0.6em），注音可能压到上一行文字，或和基线错开。这不是 bug，是 CSS 行内元素默认对齐规则导致的。
稳妥做法：
- 给
<rt></rt>加font-size: 0.6em和line-height: 1（避免额外行高挤压） - 避免在
<ruby></ruby>外层用vertical-align: middle类样式，它会干扰<rt></rt>的默认定位 - 如果整段都是注音需求，别逐字手写
<ruby></ruby>—— 写个简单脚本预处理（比如用正则把「苹果[píng][guǒ]」转成对应 HTML），手动维护太容易漏标签
真正麻烦的从来不是语法，而是当一段带 ruby 的文本要适配响应式字号、深色模式、屏幕阅读器播报顺序时，那些看不见的对齐偏移和语义断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
