使用<ruby><rt>标签组合可实现汉字注音，但必须严格配对、位置正确且单字单包裹；多音字需手动区分；CSS需重置font-size和line-height；拼音须人工校对并符合实际读音。
直接用 <ruby> 包汉字、<rt> 放拼音，就能在现代浏览器里显示注音——但结构错一个标签，拼音就变成普通文字堆在后面。
必须写全 <ruby> + <rt> 这对标签
浏览器只把 <rt> 当作注音内容，没它就等于没注音。漏掉、放错位置或套在外部都会失效。
-
<ruby>汉</ruby>→ 拼音不显示，<ruby>变成普通容器 -
<ruby>汉<rt>hàn</rt></ruby>→ 正确，拼音出现在“汉”上方 -
<ruby><rt>hàn</rt>汉</ruby>→ 错位，多数浏览器忽略<rt> - 想兼容老浏览器（如旧安卓 WebView），加
<rp>(</rp><rt>hàn</rt><rp>)</rp>，现代浏览器会隐藏括号
多字必须拆成多个 <ruby> 单独包裹
一个 <ruby> 只能对应一个被注音单位；强行合并会导致拼音无法对齐基字，Safari 尤其敏感。
- ✅ 正确：
<ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby> - ❌ 错误：
<ruby>北京<rt>běi jīng</rt></ruby>（“北京”被当整体，“běi jīng”无法分字定位） - 多音字场景下，同一字不同读音必须分开写，比如“长”在“长度”和“长大”中读音不同，就得手动区分：
<ruby>长<rt>cháng</rt></ruby><ruby>度<rt>dù</rt></ruby>vs<ruby>长<rt>zhǎng</rt></ruby><ruby>大<rt>dà</rt></ruby>
CSS 要重置 <rt> 的 font-size 和 line-height
默认样式在各浏览器中差异大：Chrome 缩到 60%，Safari 可能缩到 50% 且垂直偏移异常，Firefox 则依赖继承。不干预就容易被截断或挤出视区。
立即学习“前端免费学习笔记（深入）”；
- 必加样式：
ruby rt { font-size: 0.6em; line-height: 1.2; } - 避免用
vertical-align: super—— 它按行高算偏移，不是相对基字 - 父容器建议设
line-height: 1.8，防止注音撑高整行导致换行错位 - 不要给
<ruby>加display: block或float，会切断语义定位
拼音内容本身要人工校对，不能依赖自动拼接
<ruby> 不解析语义，也不处理轻声、变调、儿化音。所有拼音都得按口语实际读法手写或由可靠库生成后填入。
- “我们”标
rt里写wǒ men，不是wǒ mén（“们”轻声） - “一会儿”是
yí huì ér，不是yī huì r（“一”变调、“儿”单独音节） - 拼音用半角小写字母+Unicode 声调符（如
hàn），别用数字标调（如han4），后者需额外字体支持 - 混排文本（如“第1章:Python”）中，非汉字部分不加
<ruby>，原样保留，否则<rb>/<rt>数量会错位
最容易被忽略的是：注音是否真正可访问。屏幕阅读器大多跳过 <rt>，如果教学或无障碍是刚需，得额外加 aria-label 或用 JS 库（如 pinyin-pro）生成带语义增强的结构。
