HTML 原生 ruby 标签专用于拼音标注，语义清晰且无障碍友好；正确用法为每个汉字配独立 ruby 元素，含 rb（汉字）和 rt（带声调 Unicode 拼音），避免多字共用或结构错误。
用 ruby 标签做拼音标注最直接
HTML 原生支持拼音标注，不用 JS 或 CSS 模拟——ruby 就是为此设计的。它语义清晰、屏幕阅读器可识别、打印时也保留结构。
基本结构是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>，其中 rb 是基字（汉字），rt 是注音（拼音）。现代浏览器都支持，包括 Chrome、Firefox、Safari 和 Edge。
常见错误：把拼音写在 rb 里，或漏掉 rb 直接套 ruby + rt——这样会失去语义，部分读屏软件无法正确朗读。
多字连标时注意 rb 和 rt 的粒度匹配
一个 ruby 元素通常对应一个汉字加一个拼音。多个字要分别包裹，不能写成：<ruby><rb>你好</rb><rt>nǐ hǎo</rt></ruby>——这会让拼音整体浮在两个字上方，排版错位且语义混乱。
立即学习“前端免费学习笔记（深入）”；
正确做法是每个字独立成组：
<ruby><rb>你</rb><rt>nǐ</rt></ruby><ruby><rb>好</rb><rt>hǎo</rt></ruby>
如果用 JavaScript 批量处理，记得按 Unicode 字符拆分字符串（Array.from('你好')），而不是用 .split('')，避免 emoji 或组合字符出错。
ruby 在不同浏览器里的默认样式不一致
Chrome 默认把 rt 显示为小号字体、居上对齐；Safari 则更紧凑，Edge 有时会略偏右。如果不加样式，移动端可能挤在一起或换行异常。
建议加几行基础重置：
ruby { ruby-position: over; }
rt { font-size: 75%; line-height: 1; }
注意：ruby-position 在 Firefox 中需启用 layout.css.ruby.enabled（默认已开启），旧版 IE 完全不支持，但 IE 已淘汰，无需兼容。
别用 display: inline-block 强制包裹 ruby——这会破坏内联流式布局，导致换行异常或拼音脱离汉字。
需要声调符号但输入法不方便？用 Unicode 拼音字符更稳妥
别依赖 JS 动态加声调（比如把 “ni3” 转成 “nǐ”），容易出编码或正则边界问题。直接输入带声调的 Unicode 拼音字符最稳，例如：nǐ、hǎo、zhōng。
这些字符在 HTML 中无需转义，UTF-8 编码下可直接写。编辑器保存为 UTF-8 格式即可（VS Code 默认就是）。
容易忽略的一点：拼音里的轻声“de”“le”“zhe”等，不要写成“de”“le”“zhe”，而应使用带轻声符号的变体（如 de˙），但实际项目中多数场景省略轻声符号也可接受——关键是保持团队内部统一，别混用“de”和“de˙”。
如果从数据库或 API 获取拼音，确认接口返回的是已带声调的字符串，而非数字标调格式（如 “ni3”），否则前端还得额外解析，增加出错点。
