必须用包裹基字、提供读音，二者一一对应且顺序不可颠倒；多字须逐字独立嵌套，不能共用；漏或结构错乱将导致注音不渲染或错位。
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降级兜底）
兼容性兜底写法（可选）：
<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 处理偶有跳读），真有高无障碍要求，得实测目标设备+读屏组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
