ruby标签必须与rt成对使用，单独写汉无效；正确结构为汉hàn，rt须紧邻被注音文字，多字不可合并注音，拼音需手动添加空格与声调，现代浏览器原生支持但需css微调样式。
ruby 标签必须成对包裹 rt，不能单独用
直接写 <ruby>汉<rt>hàn</rt></ruby> 才能生效；只写 <ruby>汉</ruby> 或漏掉 <rt></rt> 标签，浏览器完全不渲染拼音。有些编辑器或 CMS 会自动过滤 <rt></rt>，导致注音消失，需要检查输出源码确认标签是否完整。
rt 必须紧跟在被注音文字之后，顺序不能错
<ruby>汉字<rt>hàn zì</rt></ruby> 是对的；但写成 <ruby><rt>hàn zì</rt>汉字</ruby> 就无效——浏览器只把紧邻 <rt></rt> 前面的文本节点当作被注音内容。多字时也一样：<ruby>中华人民共和国<rt>zhōng huá rén mín gòng hé guó</rt></ruby>，不能拆开或插入其他标签。
拼音空格和声调要手动加，浏览器不自动转换
HTML 不解析拼音语义，<rt></rt> 里填什么就显示什么：
- 要空格分隔：写 <rt>shàng hǎi</rt>，别写 <rt>shànghǎi</rt>（否则排版挤在一起）；
- 要带声调：用 Unicode 字符，如 <rt>hàn</rt>，不是 <rt>han4</rt>；
- 多音字需人工判断，比如「行」在「银行」里读 <rt>yín háng</rt>，不能靠 JS 自动标。
兼容性没问题，但默认样式简陋，移动端容易换行错位
<ruby></ruby> 在所有现代浏览器（Chrome/Firefox/Safari/Edge）都原生支持，IE9+ 也支持；但默认样式是「拼音紧贴汉字上方、字号小、无间距」，实际项目中常遇到：
- 苹果手机 Safari 中，长拼音可能折行，导致 <rt></rt> 和对应汉字错位；
- 需加 CSS 控制：比如 ruby { line-height: 1.2; } rt { font-size: .7em; letter-spacing: .05em; }；
- 不要用 display: block 改 <rt></rt>，会破坏 ruby 的布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
