HTML原生拼音注音使用<ruby>标签，需用<rb>和<rt>一一对应标注，多音字须分字包裹<ruby>，CSS可调ruby-position与font-size，现代浏览器支持良好但需注意成对闭合及人工校对。
用 <ruby> 标签实现基础拼音注音
HTML 原生支持拼音标注，核心是 <ruby> 元素及其子标签：<rb>（被注字）、<rt>（注音）、<rp>（括号降级兜底）。现代浏览器（Chrome 5、Firefox 35+、Safari 5+、Edge 12+）均支持，无需 JS 或 CSS 就能渲染。
最简写法示例：
<ruby> <rb>汉</rb><rt>hàn</rt> <rb>字</rb><rt>zì</rt> </ruby>
注意：<rb> 和 <rt> 必须一一对应；<rp> 可选，用于老浏览器显示括号（如 (hàn)），但多数场景可省略。
多音字与连续汉字的分组处理
一个 <ruby> 块默认将所有 <rb> 视为整体，若需为每个字单独标音（如“长”在“长度”中读 cháng，在“长大”中读 zhǎng），必须为每个字单独包裹 <ruby>。
立即学习“前端免费学习笔记（深入）”；
错误写法（会把“长度”当一个单位标音）：
<ruby><rb>长</rb><rb>度</rb><rt>cháng dù</rt></ruby>
正确写法（逐字控制）：
<ruby><rb>长</rb><rt>cháng</rt></ruby> <ruby><rb>度</rb><rt>dù</rt></ruby>
- 不能用空格或换行分隔多个
<rb>来实现“字对音”——浏览器不识别语义边界 - 中文排版中常见“一字一音”，建议默认按字粒度写
<ruby>，避免歧义 - 若需标整个词的轻声或变调（如“东西”读
dōngxi），再考虑合并<rb>，但要确认语境无多音冲突
样式微调：控制拼音字体大小与位置
默认情况下，<rt> 会以较小字号显示在基文字上方（或右方，取决于 writing-mode），但不同浏览器渲染略有差异。可通过 CSS 精细控制：
- 用
ruby-position: over强制拼音在上方（避免 Safari 某些版本右置） - 用
font-size: 0.6em缩小拼音字号（<rt>默认继承父级，易过大） - 避免设置
line-height在<ruby>上——可能撑开行高，破坏段落对齐
推荐最小可用样式：
ruby { ruby-position: over; }
rt { font-size: 0.65em; }
兼容性与实际落地注意事项
移动端 iOS Safari 对 <ruby> 支持良好，但 Android WebView（尤其旧版 Chrome）偶有换行错位；服务端渲染时，若内容来自 CMS 或用户输入，需确保 <rb>/<rt> 成对闭合，否则解析失败会丢失注音。
- 不要依赖 JS 动态插入
<ruby>结构——首次渲染时若 DOM 不完整，注音可能不显示 - 拼音字符串建议用半角拉丁字母（如
hàn），避免全角或带声调符号的图片/字体方案，保证可复制、可搜索 - 无障碍方面：
<ruby>本身不提供语音朗读支持，屏幕阅读器通常只读<rb>内容；如需朗读拼音，得额外加aria-label或隐藏文本
真正麻烦的是校对——拼音得人工核对，<ruby> 只负责展示，不负责纠错。
