现代浏览器中ruby注音必须显式包含rb元素，仅用ruby和rt会导致注音失效；rb与rt须一一对应并严格嵌套；rp必须置于rt内部且仅含纯括号；多字注音需逐字拆分；rtc属性不存在。
现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）中，ruby 标签不写 rb 就根本不会渲染注音——它不是可选包装，而是硬性结构组件。
为什么只写 ruby 和 rt 会失效
很多开发者照着老教程写 <ruby>汉<rt>hàn</rt></ruby>，结果在新版 Safari 或 Chrome 里只看到“汉hàn”平铺显示。这不是样式问题，是浏览器直接忽略 rt 的语义解析。
-
rb必须显式存在，且是ruby的直接子元素；没有它，rt就失去绑定目标 -
rb和rt必须严格一一对应：一个rb对应一个rt，顺序不能颠倒 - 空格、数字、英文字符也得包裹进
rb，否则 DOM 节点数量错位，整段注音链断裂
rp 不是装饰，是降级兜底的开关
rp 的唯一作用，是在不支持 ruby 的环境（如 IE11、旧版 Outlook、部分邮件客户端）里显示括号包裹的拼音，例如“汉(hàn)”。但它必须嵌套在 rt 内部，且内容只能是纯括号。
- 正确：
<rt><rp>(</rp>hàn<rp>)</rp></rt> - 错误：
<rp>(</rp><rt>hàn</rt><rp>)</rp>（rp在rt外，被完全忽略） - 错误：
<rt><rp>( </rp>hàn</rt>（rp含空格，部分 UA 不触发 fallback）
多字注音必须逐字拆开，不能合并
写 <ruby><rb>汉字</rb><rt>hàn zì</rt></ruby> 看似省事，但实际埋下三个隐患：屏幕阅读器无法分别播报“汉”和“字”；CSS 很难精准控制每个拼音的缩放与对齐；换行时 rt 容易溢出或挤压相邻文字。
- 推荐写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby> - 地名/人名要按读音拆：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，避免误读为 zhòng qìng - 多音字需人工上下文判断，不能靠 JS 自动匹配——
ruby不解析拼音语义
rtc 属性根本不存在，别用
你在某篇博客或代码片段里看到的 rtc，大概率是拼写错误或混淆了已废弃的旧草案。MDN、WHATWG HTML Living Standard、Can I Use 全无此条目；Chrome/Firefox/Safari 均不识别该属性，加了也无效。
-
rtc不是rt的变体，也不是实验性属性，更不是 polyfill 私有扩展 - 所谓“复杂注音布局”，用标准
rb+rt组合 + CSS 就够：比如ruby { ruby-position: under; }（Chrome 122+、Safari 17.4+ 支持） - 动态生成时最容易踩的坑是结构断裂——用模板字符串拼接
ruby，稍有不慎就漏掉rb或错位嵌套
最易被忽略的是：rb 的强制性、非汉字字符的包裹义务、以及 rp 的嵌套位置约束——这三处一旦出错，注音就彻底消失，而不是“效果不好”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
