ruby标签必须配rt才生效，单独使用无效；多字需逐字拆分并各自包裹ruby与rt；rb可省略但建议显式使用以保障对齐；rp用于老浏览器降级，须成对嵌套于rt内且仅含纯括号；位置控制应使用ruby-position和ruby-align而非通用css。
ruby 标签本身没有「基本属性」——它不接受 align、class（虽可加但非语义属性）、style（可用但非标准行为）等传统控制型属性，真正起作用的是其内部结构与浏览器对语义的解析逻辑。
ruby 必须搭配 rt 才有效果
单独写 <ruby>汉字</ruby> 不会显示任何注音；rt 是唯一被浏览器识别为「注音内容」的子元素。漏掉 rt，就等于没写注音。
-
rt必须紧跟在被注音文字之后（不能换行、不能隔空格、不能被其他标签包裹） - 多字注音必须拆成多个
ruby：✅<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>；❌<ruby>汉字<rt>hàn zì</rt></ruby> -
rb可省略，直接把文字写在ruby开始标签后更兼容（IE 和旧 Android WebView 不支持rb）
rp 不是装饰，而是降级 fallback 的关键
rp 仅在不支持 ruby 的老环境（如 IE ≤ 10、Outlook Desktop）中生效，它的作用是包裹括号，让拼音/假名在降级时仍可读，而不是“锦上添花”。
-
rp必须严格嵌套在rt内，且只含纯括号字符：<rt><rp>(</rp>hàn<rp>)</rp></rt> - 如果写成
<rp>(hàn)</rp>（括号和文字混在rp里），多数浏览器会忽略整个rp - 现代项目中可不加
rp，但若需支持邮件客户端或内网 IE 环境，就必须配对使用
CSS 控制注音位置应优先用 ruby-position
用 margin-top 或 vertical-align 拉高 rt 属于“模拟”，容易在不同字号、字体、缩放比例下偏移失准。
- 正确方式：
ruby { ruby-position: over; }（横排默认值，显式声明更稳）或ruby { ruby-position: under; }（用于日文训读等场景） -
ruby-align: center可让拼音相对于汉字水平居中（默认是start，即左对齐） - 避免给
rt设position: absolute或visibility: hidden——不支持ruby的环境会直接丢弃文字
真正容易被忽略的点是：ruby 渲染高度会影响整行 line-height，尤其在响应式容器中窄屏时，rt 可能溢出或挤压相邻文字；这不是样式没写对，而是 inline 元素固有行为——得靠 ruby { display: ruby; } 强制重置渲染上下文，或用 font-size: 0 父容器 + 子元素重设字号来微调间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
