ruby标签基本结构不必须包含rp，但强烈建议添加以提供降级兼容；必须严格遵循基字注音顺序，rb与rt一一对应且不可颠倒，多音字需分字独立标注。
ruby 标签的基本结构是否必须包含 rp？
不必须，但强烈建议加上 <rp></rp>。现代浏览器（Chrome/Firefox/Safari/Edge）都能正确渲染 <ruby><rb>汉</rb><rt>hàn</rt></ruby>，但没有 <rp></rp> 时，旧版 Safari 或某些读屏软件可能把括号里的拼音直接暴露出来，影响可读性。加 <rp></rp> 是为了在不支持 ruby 的环境里提供降级显示（比如用括号包裹拼音），它本身是空标签，只起包裹作用。
推荐写法：
<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
rb 和 rt 的语义与顺序能不能颠倒？
不能颠倒，<rb></rb> 必须在 <rt></rt> 前面，且一一对应。HTML 规范要求 <rb></rb> 是基文（base text），<rt></rt> 是注音（ruby text），浏览器按 DOM 顺序匹配：第一个 <rb></rb> 对应第一个 <rt></rt>，第二个对第二个……如果顺序错乱或数量不等，结果不可预测——比如拼音会错位、漏标，甚至整段被忽略。
常见错误：
- 把
<rt></rt>写在<rb></rb>前面 → 拼音贴到前一个字上 - 多个汉字共用一个
<rt></rt>（如<rb>中</rb><rb>国</rb><rt>zhōng guó</rt>）→ 多数浏览器只给最后一个字标音 - 混用
<rb></rb>和普通文本（如<ruby>中<rb>国</rb><rt>guó</rt></ruby>）→ “中” 不会被标注
多音字或词组标注时怎么分字处理？
每个字单独套一层 <ruby></ruby>，不要试图用一个 <ruby></ruby> 包含多个 <rb></rb> 和一个 <rt></rt>。中文拼音标注本质是字级的，词级拼写（如 “zhōng guó”）只是视觉连写，语义上仍是两个独立音节。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
正确做法：
<ruby><rb>中</rb><rp>(</rp><rt>zhōng</rt><rp>)</rp></ruby><ruby><rb>国</rb><rp>(</rp><rt>guó</rt><rp>)</rp></ruby>
这样能确保每个字的拼音位置精准，也方便后续用 CSS 单独控制某字的注音样式（比如高亮多音字）。如果强行合并，CSS 无法精确选择单个 <rb></rb> 对应的 <rt></rt>，而且语音合成工具（TTS）可能读错音节边界。
移动端和屏幕阅读器对 ruby 的支持怎么样？
主流安卓/iOS 浏览器基本支持渲染，但行为有差异：iOS Safari 默认把 <rt></rt> 显示为上标小字（符合预期），Android Chrome 则更依赖字体和行高设置，有时拼音会挤在一起或偏移。更重要的是，多数屏幕阅读器（如 VoiceOver、TalkBack）默认跳过 <rt></rt> 内容——它们认为这是装饰性信息，除非你显式加 aria-label 或用 role="annotation"。
提升可访问性的最小改动：
- 给
<ruby></ruby>加aria-label="中（zhōng）国（guó）" - 避免仅靠 ruby 实现关键语义（比如考试题干中的读音提示，需同步在正文中写出拼音）
- 测试时真机打开 VoiceOver，听它是否读出拼音；若不读，说明依赖 ruby 的辅助功能尚未生效
实际用的时候，最常被忽略的是 <rb></rb> 和 <rt></rt> 的严格配对，以及以为加了 <ruby></ruby> 就自动适配所有设备——它只是个语义容器，样式和可访问性得靠额外手段补足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
