HTML中ruby标签在多层嵌套结构下的解析顺序-html教程-PHP中文网

ruby标签禁止嵌套，浏览器会直接丢弃子ruby；必须逐字独立包裹，rt紧贴基字无空格，rp须成对置于rt内且仅含括号字符。

html中ruby标签在多层嵌套结构下的解析顺序

ruby标签不能嵌套ruby标签

浏览器解析 ruby 时，遇到子 ruby 会直接丢弃或静默修正——不是渲染错位，是结构被截断。W3C 明确禁止 ruby 作为其他 ruby 的子元素，Safari、Chrome、Firefox 均按此执行。

常见错误写法：<ruby>汉字<rt>hàn zì</rt><ruby>词<rt>cí</rt></ruby></ruby>。外层 ruby 在遇到内层 ruby 开始标签时就终止解析，后续内容可能被移到 body 开头或忽略。

每个汉字/词必须独立包裹在自己的 ruby 中：<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby><ruby>词<rt>cí</rt></ruby>
rt 必须紧贴其对应文字，中间不能有空格、换行或标签（<ruby>汉 <rt>hàn</rt></ruby> 中的空格会导致 Safari 拼音错位）
rp 标签仅用于旧版浏览器降级显示，必须成对出现在 rt 前后：<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>；漏掉任一 rp 或顺序颠倒（如 rt 在前 rp 在后）都会让降级失效

多字注音必须逐字拆解，不能共用rt

把多个汉字塞进一个 ruby 再配一个 rt，语义上就错了：HTML 要求“每个可注音单位对应一组 ruby/rt”，否则读屏器无法正确播报，搜索引擎也无法识别拼音与字的绑定关系。

错误示例：<ruby>你好世界<rt>nǐ hǎo shì jiè</rt></ruby>。这会让 AT（辅助技术）把整串拼音当作一个语音单元，无法支持逐字跳读或字词级查词。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确结构是严格一对一：<ruby>你<rt>nǐ</rt></ruby><ruby>好<rt>hǎo</rt></ruby><ruby>世<rt>shì</rt></ruby><ruby>界<rt>jiè</rt></ruby>
若需视觉上连排（如避免拼音间断），用 CSS 控制 ruby 的 display: inline 和 rt 的 line-height，不要靠结构妥协
繁体字、异体字、日文汉字混排时，更需逐字处理——不同字符集的拼音/训读规则不同，共用 rt 会导致语义污染

嵌套层级超3层时，ruby结构会触发解析器提前退出

当 ruby 出现在深度嵌套容器中（例如 <div><section><article><ruby>…</ruby></article></section></div>），Chrome 和 Safari 的流式解析器可能在内存压力下主动截断该节点。DevTools Elements 面板里看不到 ruby，但源码里明明写了——大概率是嵌套太深被丢弃了。

检查方式：右键任意 DOM 节点 → “Show DOM properties” → 查 depth 值；若 ≥6，整个路径上的 ruby 都不可靠
安全做法：把 ruby 提升到离 body 更近的层级，优先用 <main></main>、<section></section> 等语义容器包裹，而非多层 div
特别注意表格内嵌 ruby：<td><ruby>字<rt>zì</rt></ruby></td> 是合法的，但若 td 本身已嵌套在 4 层以上结构中（如 table > tbody > tr > td 再套两层 div），ruby 极易消失

rp标签缺失或位置错误会导致降级完全失效

rp 不是可选装饰，它是 HTML 解析器判断“当前环境是否需要降级显示”的唯一信号。没有 rp，旧版浏览器（如 IE11、部分安卓 WebView）会直接忽略整个 ruby 块，只显示裸文字。

典型错误：<ruby>汉<rt>hàn</rt><rp>(</rp></ruby>（漏了闭合 rp）或 <ruby>汉<rp>(</rp><rt>hàn</rt></ruby>（rp 在 rt 前但没闭合）——这两种写法在 Firefox 中可能渲染出括号，但在 Chrome 中括号直接不出现，文字也无拼音。