标签必须配合和使用，缺失会导致拼音错位或不渲染；多字需逐字包裹，须成对提供降级括号，动态渲染应封装组件避免xss。
ruby 标签不能单独用，写 <ruby>汉</ruby> 就没拼音效果；必须配 <rb></rb> 和 <rt></rt> 才能被浏览器识别为注音结构。
为什么 <ruby>汉<rt>hàn</rt></ruby> 在 Safari 里不显示或错位
因为缺失 <rb></rb>，基字语义丢失，<rt></rt> 失去锚点。现代 Safari（17.4+）、Chrome（115+）已不再兼容这种写法，会降级为普通内联文本，导致拼音贴在字右侧、被截断，甚至完全不渲染。
-
<rb></rb>必须显式包裹被注音汉字，不能省略，也不能用纯文本替代 -
<rt></rt>必须是<ruby></ruby>的直接子元素，且紧贴对应<rb></rb>后面（中间不能有空格、换行或其它标签） - 正确结构只有一种：
<ruby><rb>汉</rb><rt>hàn</rt></ruby>
多字注音必须逐字拆开，别偷懒合在一个 <rt></rt> 里
写 <ruby>汉字<rt>hàn zì</rt></ruby> 表面能出效果，但风险极高：屏幕阅读器无法分别播报“汉”和“字”，CSS 控制难对齐，iOS Safari 容易换行错位，打印时拼音可能被压缩或断开。
- 每个字独立一层：
<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>
加 <rp></rp> 不是为了好看，是防止老环境变成“汉hàn”连写
<rp></rp> 是给不支持 <ruby></ruby> 的环境（如 IE11、旧版 Outlook、部分屏幕阅读器）提供括号 fallback 的开关。没有它，降级后就是平铺的“汉hàn”，完全不可读。
- 标准写法：
<ruby><rb>你</rb><rt>nǐ</rt><rp>(</rp><rp>)</rp></ruby> -
<rp></rp>必须成对出现，内容只能是纯括号字符（(、)、[、]），其它内容会被忽略 - 不要写成
<rp>(</rp><rt>nǐ</rt>—— 缺少右括号，老环境可能只显示“你(”
CSS 调整要克制，别用 position: absolute 或 font-size: 70%
直接设 rt { font-size: 70% } 在不同浏览器中计算逻辑不一致，容易导致偏移或截断；用 margin-top: -0.5em 模拟上移，在缩放/换字体时极易失准。
- 推荐固定像素字号：
rt { font-size: 12px; line-height: 1; } - 显式声明位置：
ruby { ruby-position: over; }（现代 Chrome 122+、Safari 17.4+ 已支持） - 水平居中：
rt { ruby-align: center; } - 禁用
position: absolute或visibility: hidden—— 降级后拼音直接消失，且破坏屏幕阅读器识别
真正麻烦的不是写法，而是动态生成时结构断裂：Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 直接拼字符串，一旦汉字含 & 或 ，DOM 就会损坏，甚至引入 XSS。封装成组件才是唯一稳妥路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
