<ruby>标签基本结构必须包含<rb>（或隐式文本）与<rt>，可选<rp>作降级括号；Chrome 5+、Firefox 34+、Safari 5+、Edge 12+原生支持，IE8及更早不支持。
ruby标签的基本结构和浏览器支持情况
ruby 是 HTML5 引入的语义化标签，专为东亚文字（如中文、日文）的发音注释设计。它本身不渲染样式，但现代浏览器（Chrome 5、Firefox 34、Safari 5、Edge 12+）都原生支持，无需 polyfill。IE8 及更早版本完全不识别，会把 ruby 当作未知元素丢弃内容——如果必须兼容 IE8，得用 span 模拟并加 CSS 定位，但语义和可访问性就丢了。
基本写法是：ruby 包裹被注释字，rt 放拼音，rp 是兜底括号（仅当浏览器不支持 ruby 时显示）：
<ruby>汉<rt>hàn</rt><rp>(</rp><rp>)</rp></ruby>
rp 必须成对出现，且只在不支持 ruby 的旧浏览器里可见；支持时 rp 自动隐藏。
多字多音与连续注释的写法差异
一个 ruby 标签只能对应一个被注释字（或词），不能跨字共享拼音。比如“重庆”要分别注音，不能写成：
<ruby>重庆<rt>qìng chóng</rt></ruby> ❌
正确方式是每个字独立包裹：
立即学习“前端免费学习笔记（深入）”；
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>
若注音对象是词（如“苹果”作为整体读音），可合并写，但需确保语义合理：
<ruby>苹果<rt>píng guǒ</rt></ruby>
注意：rt 中的空格会被浏览器当作普通空白处理，建议用 或 CSS white-space: nowrap 控制排版。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
样式控制：默认行为和常见调整点
浏览器对 ruby 的默认样式是「拼音在汉字上方居中、字体较小」，但各浏览器细节有差异：Chrome 默认 font-size: 50%，Firefox 是 60%，Safari 更小。直接写 font-size 在 rt 上可能被重置，稳妥做法是用属性选择器强制：
ruby rt { font-size: 0.6em; line-height: 1; }
垂直对齐容易出问题——如果汉字是行内块或带 vertical-align，rt 可能偏移。最稳方案是给 ruby 加 display: inline-table，再设 rt 为 display: table-header-group，但多数场景只需：
- 避免在
ruby外层套span并设vertical-align - 用
ruby { line-height: 1.2; }统一基线 - 移动端需测试 iOS Safari 对
rt字体缩放是否触发过小
可访问性与 screen reader 的实际表现
主流屏幕阅读器（NVDA、VoiceOver、JAWS）对 ruby 的支持不一致：VoiceOver 会读出 rt 内容（如“汉，hàn”），NVDA 默认跳过 rt，除非开启「详细模式」。这不是 bug，而是因为 WAI-ARIA 规范未强制要求读 rt。
如果拼音对理解至关重要（比如面向汉语初学者），别只依赖 ruby。可补充 aria-label：
<ruby aria-label="hàn">汉<rt>hàn</rt></ruby>
但注意：aria-label 会完全替代原内容朗读，所以仅当「只读拼音、不读汉字」才适用。更通用的做法是用 aria-describedby 指向页面底部的拼音说明区域。
真正难处理的是多音字自动选音——HTML 不提供上下文判断能力，所有拼音必须人工指定。工具链里做自动注音（如结巴分词 + pypinyin）可以辅助生成，但校对仍不可省。
