ruby是语义容器，必须包裹rb（被注音字）和rt（注音内容）；rt提供发音信息，须与rb一一对应紧邻；rp仅用于老浏览器降级，成对置于rt内外显示括号。
什么是 ruby、rt、rp？它们不是独立标签
HTML 中没有 Rubp、Rt、Rp 这样的标签——大小写错误且拼写错误。实际可用的是 ruby（容器）、rt（注音内容）、rp（括号 fallback，仅用于兼容老浏览器）。浏览器只识别小写、标准拼写的元素名。
常见错误现象：写成 <rt></rt> 或 <rp></rp> 但放在非 ruby 内部，会导致语义丢失、样式失效或被忽略。
-
ruby必须是父容器，包裹一个或多个rb（被注音文字）和对应rt（注音） -
rb标签虽可省略（浏览器会自动推断），但显式写出更可靠，尤其当文本含空格、换行或内联元素时 -
rp只在rt前后各放一个，用作括号 fallback：老浏览器不支持 ruby 时，rp内容（通常是（或））才显示
标准写法：带 rb 的完整结构
东亚注音（如汉语拼音、日语假名）需要明确绑定字与音，不能只靠顺序猜测。显式使用 rb 可避免因换行、空格、CSS display 改变导致的错位。
<ruby><rb>汉</rb><rt>hàn</rt><rb>字</rb><rt>zì</rt></ruby>
注意：rb 和 rt 是并列子元素，不是嵌套关系；rt 不要包在 rb 里，否则语义错误，屏幕阅读器可能读错。
- 每个
rb应为连续字符（如“汉字”不能拆成两个rb再合注一个rt，除非你真想给每个字单独标音） - 若需跨字注音（如“中华人民共和国”整体标“Zhōnghuá Rénmín Gònghéguó”），仍应一一对应：一个
rb对一个rt，否则渲染不可控 - CSS 中
ruby默认为display: ruby，但部分旧版 Safari 需加ruby-align: center控制对齐
rp 的真实作用：不是装饰，是降级保障
rp 在现代浏览器中默认隐藏（display: none），只有当浏览器完全不支持 ruby 时，才会显示其内容——所以它必须紧邻 rt，且成对出现：
<ruby><rb>東</rb><rp>（</rp><rt>dōng</rt><rp>）</rp></ruby>
常见误区：把 rp 当作“括号样式控制”，试图用它实现圆括号视觉效果——这是错的。现代浏览器下 rp 不可见，括号必须靠 CSS 或直接写入 rt 内容里（如 <rt>（dōng）</rt>）。
- 如果你只关心现代浏览器（Chrome/Firefox/Safari ≥ 15/Edge ≥ 79），
rp可省略，不影响功能 - 若需支持 IE 或旧 Safari（≤ 14），保留
rp能让注音至少以“（dōng）”形式线性显示，而非完全丢失 -
rp内容必须是纯符号或空格，不要塞文字，否则降级时会冗余
容易被忽略的细节：空格、换行、CSS 干预
HTML 源码中的换行和空格会被浏览器压缩，但在 ruby 内部可能导致 rb 和 rt 错位——尤其是用 Flex/Grid 布局或设置了 white-space: pre 时。
- 避免在
rb和rt之间换行或加空格，写成一行最稳妥：<rb>语</rb><rt>yǔ</rt> - 不要给
ruby设font-size或line-height，这些会影响rt相对于rb的垂直定位；应通过ruby的ruby-position（值为over或under）和ruby-align控制 - 移动端 Safari 对
ruby的 line-height 计算有偏差，若发现注音贴底或悬空，尝试给rb加vertical-align: text-top
注音不是纯视觉装饰，而是语义化标记。写错标签名、漏掉 rb、滥用 rp，都会让辅助技术无法正确朗读，也影响未来 CSS ruby 布局演进的支持度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
