是，ruby标签的基本结构必须包含rt，否则无注音效果；rt是注音内容的唯一载体，需紧跟被注音文字，rb为现代浏览器必需的显式基字包裹，rp仅用于老浏览器括号降级。
ruby 标签的基本结构是否必须包含 rt？
不是必须，但没 <rt></rt> 就没注音效果。浏览器只把 <ruby></ruby> 当普通容器，<rt></rt> 才是注音内容的载体，<rp></rp> 仅作括号兼容 fallback（老 IE 或不支持 ruby 的 UA 里显示括号）。实际渲染时，<rt></rt> 内容会自动缩放、上标定位，前提是它紧跟在被注音文本之后。
常见错误是写成：<ruby>漢字<rt>かんじ</rt></ruby> —— 这没问题；但若漏掉 <rt></rt>，或把 <rt></rt> 放错位置（比如套在 <rb></rb> 外面），注音就完全不显示。
-
<rb></rb>是可选标签，现代用法中常省略，直接把被注音文字写在<ruby></ruby>开始标签后 - 多个字对应多个注音时，需一一配对：
<ruby>東京<rt>とうきょう</rt></ruby>，不能合并写成<rt>とうきょう</rt>覆盖两个字 - Chrome/Firefox/Safari 均原生支持，无需 polyfill；但 iOS Safari 对
<rp></rp>渲染较弱，括号可能不出现
如何处理多音字或分字注音？
ruby 不支持“一个 <rt></rt> 对应多个 <rb></rb>”或跨字注音。每个注音单元必须显式拆开，否则浏览器无法对齐。例如“长”字在“长大”中读 zhǎng，在“长度”中读 cháng，就得分别包裹：
<ruby>长<rt>zhǎng</rt></ruby>大 <ruby>长<rt>cháng</rt></ruby>度
更麻烦的是“一衣带水”这种成语，若想给每个字单独注音，必须逐字包裹：
<ruby>一<rt>yī</rt></ruby><ruby>衣<rt>yī</rt></ruby><ruby>带<rt>dài</rt></ruby><ruby>水<rt>shuǐ</rt></ruby>
- 不要试图用 CSS 给
<ruby></ruby>加display: inline-flex来强行对齐——会破坏语义和屏幕阅读器识别 - 若注音内容含空格或标点（如“東・京”），
<rt></rt>内保持相同分隔，否则视觉错位 - 简体中文常用拼音，日文用平假名/片假名，韩文用谚文；不同语言混排时，确保字体支持对应字符集（如 Noto Sans CJK）
ruby 在响应式布局中为何会换行错位？
根本原因是 <ruby></ruby> 默认为 inline 元素，其内部注音高度会影响行高。当容器宽度不足时，浏览器优先保证被注音文字不断行，导致 <rt></rt> 溢出或挤占相邻文字空间。
解决方法不是改 display，而是控制注音密度和行高：
- 给
<ruby></ruby>设置line-height: 1，避免<rt></rt>拉高整行 - 用
ruby { font-size: 0.6em; }缩小注音字号（注意：不能设太小，iOS Safari 下低于 12px 可能模糊） - 禁用
<rt></rt>的换行：rt { white-space: nowrap; } - 极端窄屏下，可配合媒体查询隐藏注音：
@media (max-width: 480px) { rt { display: none; } }
aria-label 能否替代 ruby 实现无障碍注音？
不能。aria-label 会完全覆盖原文字，屏幕阅读器只读 label 内容，用户既听不到原字也听不到注音。正确做法是保留 <ruby></ruby> 结构，并补充 aria-roledescription="ruby text" 辅助理解（部分读屏软件识别该 role）。
真正有效的辅助方案是双层标注：
<ruby aria-roledescription="ruby text">漢字<rt>かんじ</rt></ruby>
- 别用 title 属性模拟注音——鼠标悬停才触发，且移动端无效
- 避免在
<rt></rt>里塞 HTML（如<strong></strong>），会导致解析失败或样式崩坏 - 服务端生成注音时，务必校验 UTF-8 编码，特别是日文长音符号「ー」或浊点「゛」，编码错误会导致
<rt></rt>显示为
最易被忽略的是字体回退链：如果系统缺日文字体，<rt></rt> 里的假名可能渲染成方块，而主文字正常。得在 CSS 中显式声明 font-family: "Meiryo", "Noto Sans JP", sans-serif; 这类组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
