标签是HTML原生支持中文注音的最靠谱方案，需严格按结构书写，拼音用小写无调，注意浏览器兼容性与CSS渲染细节。
用 <ruby></ruby> 标签给多音字加拼音最靠谱
HTML 原生支持中文注音，<ruby></ruby> 就是专为这个设计的，不是靠 CSS 模拟或 JS 插件。它能保证语义正确、屏幕阅读器可读、打印时也保留标注，而且主流浏览器（Chrome/Firefox/Safari/Edge）都支持。
关键不是“能不能加”，而是怎么写才不被浏览器忽略——很多人写了 <ruby></ruby> 却没生效，其实是结构错了。
-
<ruby></ruby>必须包裹<rb></rb>（被注音文字）和<rt></rt>（读音），顺序不能颠倒 - 多音字要逐字处理，不能把整句台词塞进一个
<ruby></ruby> - 拼音用小写、不带声调符号更稳妥（比如
hua而非huā），避免某些字体缺失导致渲染异常
示例：台词“他行（xíng）不行（háng）？”要拆成：
<p>他<ruby><rb>行</rb><rt>xíng</rt></ruby>不<ruby><rb>行</rb><rt>háng</rt></ruby>？</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
遇到 ruby 不显示？先查这三件事
常见现象是代码写了，但拼音没显示出来，大概率是以下某个环节出问题：
- 父容器设置了
font-size: 0或line-height过小，导致<rt></rt>被挤没——加一句ruby { line-height: 1.2; }通常就能救回来 - 用了简写标签如
<rb></rb>，HTML5 不允许自闭合<rb></rb>，必须写成<rb></rb> - 在 Vue/React 等框架里直接写
<ruby></ruby>，但模板编译器把它当普通标签过滤了——改用v-html或dangerouslySetInnerHTML渲染字符串
多音字标注别硬套词典读音，得看上下文
戏剧台词的读音不是查《现代汉语词典》就完事的。比如“数”字：
- “数一数二”里的第一个“数”读
shǔ（动词），第二个读shù（名词） - 但演员可能按方言或表演节奏读成
shuò（如“数见不鲜”），这时就得按实际演出标注，而不是“标准音” - 如果同一角色反复念同一个多音字，但每次语境不同（比如“发”在“出发”和“发面”中），建议用 class 区分：
<ruby class="verb-fa">...</ruby>，方便后期统一调整 CSS 样式
移动端 Safari 对 ruby 的兼容细节容易翻车
iOS 15+ 支持完整 <ruby></ruby>，但老版本（尤其是 iOS 14 及更早）会把 <rt></rt> 当普通文本叠在字上，甚至错位。临时解法只有两个：
- 加媒体查询降级：用
@supports not (ruby-position: over)检测，不支持时改用span+position: relative模拟（仅限纯展示场景） - 如果项目必须兼容 iOS 13，干脆放弃
<ruby></ruby>，改用 ARIA 属性：<span aria-label="xíng">行</span>，至少让 VoiceOver 能读出来
真正麻烦的是排版对齐——<rt></rt> 在 Safari 上默认偏右，加 ruby { text-align: center; } 也没用，得单独写 rt { text-align: center; } 才生效。
