ruby标签专用于中文注音、日文假名等语义化标注，必须与rt配对使用且rt为ruby直接子元素，结构错误则退化为普通文本；现代浏览器已原生支持，无需rp兜底；样式需用ruby-position、ruby-align等专用属性控制。
ruby 标签不是 Ruby 编程语言的标签，也不是用来写脚本的——它专用于中文注音、日文假名等「文字+发音/解释」的语义化标注，浏览器原生支持，但用错场景或结构不完整时会直接失效或退化为普通文本。
ruby 标签必须和 rt 配对使用，否则无效
单独写 <ruby>汉字</ruby> 不会产生任何注音效果。浏览器需要明确知道「哪段是字，哪段是音」，所以 rt（ruby text）必须紧跟在被注音的文字之后。常见错误是把 rt 放在 ruby 外面，或者用 span 替代 rt。
正确结构只有这一种基本形式：
<ruby>汉<rt>hàn</rt></ruby>
多个字可连续写：
立即学习“前端免费学习笔记（深入）”；
<ruby>汉语<rt>yǔ</rt><rt>hàn</rt></ruby>
-
rt必须是ruby的直接子元素，不能嵌套在span或div里 - 一个
rt对应前一个非rt的文本节点（即“上一个字”），顺序不能颠倒 - 不支持跨字注音（比如两个字共用一个拼音），需手动拆分
用 rp 兜底兼容老浏览器，但现代项目可省略
rp 是为不支持 ruby 的浏览器准备的括号包裹层，例如 IE11 及更早版本。它的作用是：当浏览器不认识 ruby 时，自动隐藏 rt，只显示 rp 里的内容（通常是圆括号）。
典型写法：
<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
但注意：
- 现代 Chrome/Firefox/Safari/Edge 均已完整支持
ruby，rp实际不会渲染（CSS 默认display: none） - 如果项目不需兼容 IE，加
rp属于冗余代码，增加维护成本 - 某些 CMS 或富文本编辑器会自动过滤
rp，导致结构断裂
样式控制靠 CSS，但限制多，别硬套通用布局规则
ruby 是内联级元素，天生不响应 display: block 或 float。想调整注音位置，只能用 ruby-position 和 ruby-align 这两个专用属性：
-
ruby-position: over | under控制注音在字上方还是下方（默认over） -
ruby-align: start | center | space-between控制多个注音单元的对齐方式 -
font-size对rt无效，需单独设rt { font-size: 0.6em; } - 不要给
ruby设line-height，它会干扰行高计算，造成上下错位
示例：
ruby { ruby-position: over; }
rt { font-size: 0.55em; letter-spacing: 0.05em; }
实际项目中，优先考虑语义而非视觉效果
很多人试图用 ruby 实现「悬浮提示」「弹出解释」或「多层叠加注释」，这是误用。它只适用于「字与音/义的强绑定关系」，比如小学识字课本、古籍注疏、日语学习材料。
容易被忽略的关键点：
- 屏幕阅读器会把
ruby内容连读（如「汉，hàn」），若注音错误或缺失，会影响无障碍体验 - 搜索引擎会识别
ruby结构，但不会索引rt内容作为关键词——它只是辅助信息 - 服务端渲染时若动态拼接
ruby，务必确保 HTML 结构闭合，否则解析失败后整段文本可能丢失注音
