必须用<rb>包裹基字、<rt>提供读音，二者一一对应且顺序不可颠倒；多字须逐字独立嵌套，不能共用<rt>；漏<rb>或结构错乱将导致注音不渲染或错位。

ruby 标签里怎么加拼音或假名

直接用 ruby + rt 就行，不需要额外 JS 或 CSS——这是 HTML5 原生支持的语义化标注方式，浏览器（Chrome/Firefox/Safari/Edge）都认。

常见错误是把 rt 写成独立标签、漏掉 rb，或者用 span 套嵌“模拟” ruby 效果（这会导致屏幕阅读器无法识别读音，也破坏语义）。

• rb 包住基础文字（汉字/词），rt 包住辅助音符（拼音/平假名/片假名）
• 必须成对出现，且 rt 紧跟在 rb 后面（顺序错乱可能被浏览器忽略）
• 如果一个 ruby 里有多个字，可以多个 rb + 一个 rt（整体注音），也可以每个字配一对 rb/rt（逐字注音）

<ruby>
  <rb>漢</rb><rt>かん</rt>
  <rb>字</rb><rt>じ</rt>
</ruby>
<ruby>
  <rb>苹果</rb>
  <rt>píng guǒ</rt>
</ruby>

为什么 rt 不显示？检查这三点

最常遇到的是写了但没渲染出小字——不是 bug，大概率是以下原因：

• 浏览器默认样式可能被重置（比如全局 rt { display: none; }），加一句 rt { display: ruby-text; } 就恢复
• ruby 元素被父容器设了 font-size: 0 或 line-height 过小，导致 rt 被压缩不可见
• 用了不支持 ruby 的旧浏览器（IE 完全不支持，iOS Safari 14.5+ 才完整支持 rb/rt；之前版本需用 rp 降级兜底）

兼容性兜底写法（可选）：

立即学习“前端免费学习笔记（深入）”；

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<ruby>
  <rb>漢字</rb>
  <rp>（</rp><rt>かんじ</rt><rp>）</rp>
</ruby>

rp 里的括号只在不支持 ruby 的浏览器中显示，现代浏览器会隐藏它。

ruby 和 aria-label 能不能一起用

能，而且推荐——ruby 解决视觉标注，aria-label 补足语音读取逻辑。特别是多音字或需要强调读音时：

<ruby aria-label="xíng">
  <rb>行</rb>
  <rt>xíng</rt>
</ruby>

注意：aria-label 会完全替代元素文本内容被朗读，所以值要填准确读音（不是释义）。别写成 aria-label="行走"，那会误导听障用户。

复杂点在于：有些屏幕阅读器对 ruby 的支持仍不一致（NVDA 较好，VoiceOver 对嵌套 rb 处理偶有跳读），真有高无障碍要求，得实测目标设备+读屏组合。