标签不加无效，必须写成汉hàn；须为直接子元素且紧贴基字；多字须逐字独立包裹；需加css控制字号行高；成对用于旧浏览器降级。
ruby标签不加rt就等于没写
直接写 <ruby>汉</ruby> 不会显示任何拼音，浏览器会忽略整个 <ruby></ruby> 块。真正触发注音渲染的是 <rt></rt>，它必须是 <ruby></ruby> 的**直接子元素**，且不能隔层、不能有空格或换行干扰。
- 错误写法：
<ruby>汉</ruby><rt>hàn</rt>（<rt></rt>脱离容器） - 更隐蔽的错误：
<ruby>汉 <rt>hàn</rt></ruby>（汉字后带空格，部分 Safari 会错位） - 最简合法结构：
<ruby>汉<rt>hàn</rt></ruby>—— 这个能跑，但不推荐用于生产
多字必须逐字拆开，别偷懒套一层
把“重庆”写成 <ruby>重庆<rt>chóng qìng</rt></ruby> 表面出效果，实际风险极高：Safari 可能压扁拼音、Firefox 容易断行脱节、屏幕阅读器无法分别播报“重”和“庆”。
- 正确做法是每个汉字独立包裹：
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby> - 地名、多音字、轻声词都按此逻辑处理，比如“长”在“长度”中是
<ruby>长<rt>cháng</rt></ruby>，在“生长”中是<ruby>长<rt>zhǎng</rt></ruby> - 避免用
<rb></rb>包多个字，例如<rb>重庆</rb><rt>chóng qìng</rt>—— 语义错位，排版不可控
不加CSS，多数浏览器会把拼音压在字上
只写结构不设样式，Chrome 可能勉强可见，Firefox 和旧版 Edge 很可能让 <rt></rt> 贴着基字、被裁掉，甚至完全重叠。这不是 bug，而是浏览器对 <rt></rt> 默认字号（50%）和 baseline 处理不一致导致的。
- 必加基础样式：
ruby { line-height: 1.8; }（防挤压） +rt { font-size: 0.6em; line-height: 1; }（控大小与垂直居中） - 禁用
position: absolute或visibility: hidden—— 降级时拼音直接消失，且破坏屏幕阅读器识别 - 优先用标准属性：
rt { ruby-position: over; }（默认值，可靠）比margin-top: -0.4em更稳，缩放/换字体也不偏移
rp标签不是装饰，是降级保底的关键
IE11、Outlook 桌面版、老旧安卓 WebView 完全不解析 <ruby></ruby>，此时 <rt></rt> 会被当普通文本流渲染，“汉hàn”连在一起根本没法读。<rp></rp> 就是为这种场景设计的 fallback 开关。
- 标准写法：
<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>—— 现代浏览器隐藏<rp></rp>，只显拼音；老环境显示“汉(hàn)” -
<rp></rp>必须成对，内容只能是纯括号字符（(、)、[、]），多一个空格或字母都会让 fallback 失效 - 若项目明确不支持 IE 或邮件客户端，可省略
<rp></rp>，但需确认 CMS、导出 PDF 工具等下游环节是否真能绕过
<ruby>汉<rt>hàn</rt></ruby> 中汉字和 <rt></rt> 之间有个看不见的 ，Safari 就可能错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
