必须嵌套才能显示拼音，且须紧贴基字；多字需逐字包裹，地名多音字须按语境标注；是降级必备括号；样式应优先用ruby-position等原生属性。
单独写 <ruby>汉</ruby> 不会显示拼音，必须配 <rt></rt> 才生效——这是最常被忽略的前提。
ruby 必须嵌套 rt，且 rt 要紧贴基字
<rt></rt> 不是可选装饰，而是浏览器识别注音的唯一信号。漏掉它，整个 <ruby></ruby> 块会被当作普通内联容器处理，拼音彻底不渲染。
常见错误写法包括：
-
<ruby>汉字</ruby><rt>hàn zì</rt>（<rt></rt>脱离父级） -
<ruby>汉 <rt>hàn</rt></ruby>（中间有空格，Safari 会错位） -
<ruby><p>汉</p> <rt>hàn</rt></ruby>（<p></p>是块级标签，破坏紧贴要求）
正确结构只有一种最小合法单元：<ruby>汉<rt>hàn</rt></ruby>。现代浏览器虽允许省略 <rb></rb>，但显式写出 <rb></rb> 更稳妥：<ruby><rb>汉</rb><rt>hàn</rt></ruby>。
多字注音必须逐字拆开，不能共用 rt
把“汉字”两个字塞进一个 <ruby></ruby> 再配一个 <rt></rt>，表面能出效果，实际埋下三个隐患：拼音在 Safari 中易横向错位、屏幕阅读器无法分别播报、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 - “长”在“长度”中读
cháng，在“生长”中读zhǎng，需按上下文手动指定
rp 不是摆设，是旧环境 fallback 的开关
<rp></rp> 的作用不是加括号好看，而是在不支持 <ruby></ruby> 的环境（如 Outlook 桌面版、老旧邮件客户端、部分安卓 WebView）里让拼音至少可读。没有它，降级后就是“汉hàn”连在一起，语义断裂。
标准写法必须满足三点：
-
<rp></rp>必须成对，且严格嵌套在<rt></rt>内部：<rt><rp>(</rp>hàn<rp>)</rp></rt> -
<rp></rp>内容只能是纯括号字符，不能含空格、字母或中文标点 - 顺序不能颠倒：左括号必须在前，右括号在后
Chrome 会渲染括号，Safari 则自动隐藏；若项目明确不兼容 IE 或 Android 4.x，可用 CSS 强制隐藏：rp { display: none; }，但别误以为它可有可无。
样式控制要避开 font-size 百分比，优先用 ruby-position
用 font-size: 70% 控制 <rt></rt> 大小极易失效——不同浏览器对 <rt></rt> 的默认字号计算逻辑不一致，轻则偏移，重则截断。
推荐组合方案：
- 给
<rt></rt>设固定像素字号：rt { font-size: 12px; } - 用
line-height: 1防止上下留白撑开行高 - 显式声明位置：
ruby { ruby-position: over; }（避免竖排时跑到左边） - 水平居中：
rt { ruby-align: center; }
别用 vertical-align: super 或 margin-top 模拟上标——这些是 hack，字体缩放、换行、响应式场景下必然崩坏。
真正难的不是写对标签，而是每个字都得人工核对拼音、声调、轻声与变调规则；<ruby></ruby> 不解析语义，只负责呈现，错一个音，整句朗读就错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
