ruby标签必须配rt才生效，单独使用无效；多字需逐字包裹rb和rt并紧邻，rp用于旧浏览器括号降级且须成对置于rt内外，拼音须半角小写带声调。

ruby标签必须配对使用和吗？

不是必须，但强烈建议配对。单独用和能实现基本注音，但不加会导致旧版浏览器（如IE11、部分安卓WebView）显示异常：括号或注音直接堆在正文里，甚至整段错位。

原因在于是“fallback fallback”——当浏览器不支持时，它包裹的内容（通常是括号）才显示；支持时则被隐藏。没有，那些括号就变成裸文本，破坏排版。

• ruby 是容器，必须有且仅有一个直接子元素是需要注音的字符（或文本）
• rt 必须紧跟在被注音内容之后，不能隔开空格或换行（否则部分浏览器会断开关联）
• rp 必须成对出现，分别包在rt前后，内容通常为(和)

中文注音怎么写才不出错？

常见错误是把多个字塞进一个里再统一标音，比如<ruby>汉字<rt>Hàn Zì</rt></ruby>——这会让屏幕阅读器误读为一个词，且无法逐字定位。

正确做法是每个字（或语义单元）单独包裹：

立即学习“前端免费学习笔记（深入）”；

<ruby>汉<rp>(</rp><rt>Hàn</rt><rp>)</rp></ruby><ruby>字<rp>(</rp><rt>Zì</rt><rp>)</rp></ruby>

注意：rp里的括号要用半角，不要用全角（或），否则CSS计数器或无障碍工具可能解析失败。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

ruby在移动端显示不全或重叠怎么办？

这是最常被忽略的问题：默认情况下，rt文字会紧贴基线向上挤，尤其在小字号或高密度屏幕上，容易与上一行文字重叠，或被截断。

解决靠CSS微调，不用改HTML结构：

• 给ruby加line-height: 1.8（比默认1.2–1.4更宽松）
• 用ruby { ruby-position: over; }确保注音始终在上方（避免部分Android浏览器默认放在下方）
• 限制rt字号：rt { font-size: 0.6em; }，防止注音过大撑开行高

别碰vertical-align——对rt设这个属性在多数浏览器里无效，纯属白忙。

ruby能用于英文或术语解释吗？

可以，但语义不同。HTML规范明确说ruby适用于“东亚字符的发音或注释”，用于英文缩写解释（如“HTML: HyperText Markup Language”）属于滥用，应改用abbr + title或details/summary。

如果硬要用（比如做教学演示），需注意两点：

• 屏幕阅读器不会自动朗读rt内容，必须额外加aria-label，例如：<ruby aria-label="HyperText Markup Language">HTML<rp>(</rp><rt>HTM L</rt><rp>)</rp></ruby>
• 不能嵌套ruby，即“HTML里的ruby”这种结构不合法，会触发HTML验证警告

真正需要术语解释时，<abbr title="HyperText Markup Language">HTML</abbr>才是标准解法。