ruby标签必须包含rt子元素才能显示注音，单独写<ruby>漢</ruby>无效；正确结构为<ruby>漢<rt>ㄏㄢˋ</rt></ruby>，多字须逐字独立包裹，rp用于旧浏览器降级且须成对紧邻rt。
ruby 标签必须包含 rt 才能显示注音
写 <ruby>漢</ruby> 看起来结构完整，但浏览器完全不渲染任何注音——rt 不是可选项，而是语义必需的子元素。漏掉它，ruby 就退化为普通 span。常见错误包括把拼音直接塞进 ruby 开始标签后、用 span 模拟 rt、或把 rt 放在 ruby 外面。正确最小单元是：<ruby>漢<rt>ㄏㄢˋ</rt></ruby>。
繁体字注音要逐字包裹 ruby，不能跨字共用 rt
像「臺灣大學」这种词，必须拆成四个独立 ruby 单元：<ruby>臺<rt>ㄊㄞ</rt></ruby><ruby>灣<rt>ㄨㄢ</rt></ruby><ruby>大<rt>ㄉㄚˋ</rt></ruby><ruby>學<rt>ㄒㄩㄝˊ</rt></ruby>。试图用一个 ruby 包住全部四字再配一个 rt（如 <ruby>臺灣大學<rt>ㄊㄞ ㄨㄢ ㄉㄚˋ ㄒㄩㄝˊ</rt></ruby>）会导致多数浏览器只对最后一个字（「學」）应用注音，其余被忽略。HTML 规范不支持多对一映射，DOM 顺序决定绑定关系。
rp 不是装饰，是旧环境降级的关键开关
rp 的作用非常具体：在不支持 ruby 的浏览器（如 IE11、旧版 Android WebView、某些邮件客户端）中，让拼音至少以括号形式可读。没有它，那些环境会直接丢弃 rt，只剩裸汉字，或把拼音堆在后面变成「漢hàn」这种混乱格式。标准写法必须成对且紧邻 rt：<ruby>漢<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>。括号可用 ( )、【】 或 〔〕，但前后必须一致；内容只能是纯括号字符，其他文字会被忽略。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
CSS 微调 rt 时容易破坏默认对齐逻辑
rt 默认已是小号、上标、居中，但不同浏览器差异明显：Safari 可能不缩放、Chrome 可能垂直偏移、Firefox 对 line-height 更敏感。最稳妥的干预方式是：ruby rt { font-size: 0.65em; white-space: nowrap; }。避免以下操作：
- 给
ruby设line-height—— 容易撑开整行，导致段落错位 - 用
vertical-align: super—— 它基于行高而非基字定位，缩放后极易偏移 - 加
position: relative或margin-top—— 不同字体基线差异大，移动端失效风险高 - 设
display: block或inline-flex—— 彻底破坏 ruby 内建对齐机制
立即学习“前端免费学习笔记（深入）”；
