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