ruby标签必须包含rt子元素才生效，单独使用无效；rt必须是ruby的直接子元素且紧贴对应基字，多字需逐字包裹并显式使用rb和rp以确保兼容性与无障碍支持。
ruby 标签必须配 rt 才能生效，单独用无效
写 <ruby>汉</ruby> 或 <ruby></ruby> 不会显示任何注音，浏览器只把它当普通内联容器。真正触发注音渲染的是 <rt></rt> —— 它是唯一被识别为“注音内容”的子元素。没有 <rt></rt>，<ruby></ruby> 就等于没写。
常见错误包括：<ruby>汉</ruby><rt>hàn</rt>（<rt></rt> 脱离 <ruby></ruby>）、<ruby>汉<rt>hàn</rt></ruby>（看似对，但缺 <rb></rb>，现代 Chrome/Firefox/Safari 已不兼容这种写法）。
- 必须保证
<rt></rt>是<ruby></ruby>的直接子元素，且紧贴在对应基字之后（不能有空格、换行或其它标签隔开） -
<rb></rb>在 HTML5 中虽可省略，但实际项目中建议显式写出——否则 Safari 16.4+ 和部分 Android WebView 会错位或合并注音 - 不要指望浏览器自动“猜”哪个字对应哪个拼音；结构断裂 = 渲染失败
多字注音必须逐字拆开，不能共用一个 rt
写 <ruby>汉字<rt>hàn zì</rt></ruby> 表面能出效果，但风险极高：拼音可能被压缩、断行错位，屏幕阅读器无法分别播报“汉”和“字”，CSS 控制也极难精准对齐。
正确做法是每个字独立包裹：<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>。这样语义清晰、排版可控、无障碍支持完整。
- 地名如“重庆”必须拆：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则容易误读为zhòng qìng - 多音字如“长”，需按上下文手动指定：
<ruby><rb>长</rb><rt>cháng</rt></ruby>度vs生<ruby><rb>长</rb><rt>zhǎng</rt></ruby> - 连续多个
<ruby></ruby>在 iOS Safari 上可能出现微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解
rp 不是装饰，而是降级兼容的关键开关
<rp></rp> 的作用不是美化，是在不支持 <ruby></ruby> 的环境（如 IE11、旧版 Outlook、部分屏幕阅读器）里提供括号包裹的 fallback 文本。没有它，降级后就是“汉hàn”连在一起，完全不可读。
标准写法是：<ruby><rb>你</rb><rt>nǐ</rt><rp>(</rp><rp>)</rp></ruby>。现代浏览器会隐藏 <rp></rp>，只渲染 <rt></rt>；老环境则显示“你(nǐ)”。
-
<rp></rp>必须成对出现，且内容只能是纯括号字符（(、)、[、]），其他内容会被忽略 - 别把
<rp></rp>套在<rt></rt>外面又漏掉一对，例如<rp>(</rp><rt>nǐ</rt>❌ - 如果项目明确不支持 IE 或老旧 UA，可省略
<rp></rp>，但需确认 CMS、邮件客户端等下游环境是否真能绕过
样式控制有限，别硬调位置
浏览器对 <rt></rt> 的渲染是语义驱动的，不是盒模型驱动的。position: absolute、top、transform 这类操作会破坏可访问性、响应式行为和屏幕阅读器识别，且在换行时极易错位。
安全可控的 CSS 干预只有三类：font-size（设为 0.6em 或固定像素值）、letter-spacing（微调拼音间距）、line-height（父容器设足够值防截断）。
- 避免用
font-size: 70%这种相对值——不同浏览器对<rt></rt>的基准字号计算不一致，易导致偏移或截断 -
ruby-align: center可强制水平居中（默认是 left，部分旧 Safari 需显式声明） - 移动端小屏尤其要注意父容器
min-height和overflow: visible，否则<rt></rt>可能被裁剪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
