rt标签必须嵌套在ruby容器内才能正确显示注音，单独使用会被浏览器忽略；标准结构为基字注音，多字需逐字独立包裹，不可跨字共用rt。
RT标签在HTML中如何正确显示注音（ruby text）
RT 标签本身不独立生效，必须嵌套在 <ruby></ruby> 容器内，否则浏览器会忽略或降级为普通内联元素。直接写 <rt>ㄅㄆㄇ</rt> 不会渲染出注音效果。
标准 ruby 注音结构长什么样
一个合法的注音结构至少包含三部分：<ruby></ruby> 容器、被注音的基字（<rb></rb> 或隐式文本）、以及注音内容（<rt></rt>）。现代 HTML 推荐用隐式基字 + 显式 <rt></rt>，避免使用已废弃的 <rb></rb>。
正确示例：
<ruby>汉<rt>ㄏㄢˋ</rt></ruby>
常见错误：
-
<rt></rt>单独出现，没包在<ruby></ruby>里 - 把多个基字和多个
<rt></rt>并列写成<ruby>你好<rt>ㄋㄧˇ</rt><rt>ㄏㄠˇ</rt></ruby>（应为每个字单独套一层<ruby></ruby>） - 用
<span></span>包<rt></rt>，破坏语义结构
多音字或连字注音怎么处理
中文里一个字可能对应多个读音，或词组需整体注音（如“台北”注为“ㄊㄞˊ ㄅㄟˇ”），这时不能靠单个 <ruby></ruby> 搞定。需要按字粒度拆分，每个字配自己的 <rt></rt>，空格用 或零宽空格 控制对齐。
推荐写法：
<ruby>台<rt>ㄊㄞˊ</rt></ruby><ruby>北<rt>ㄅㄟˇ</rt></ruby>
注意点：
- 不要用
<ruby>台北<rt>ㄊㄞˊ ㄅㄟˇ</rt></ruby>—— 基字“台北”会被当作一个整体，注音位置无法对齐到单字 - CSS 中
ruby-align: center是默认行为，但老版本 Safari 对多字<rt></rt>对齐支持不稳定，建议逐字标注 - 若需注音标调号（如“ㄓㄨㄥ”），确保字体支持 Unicode Bopomofo 区（U+3105–U+312F）
兼容性和 fallback 怎么做
IE 完全不支持 <ruby></ruby>，Edge 17+ 和所有现代 Chrome/Firefox/Safari 都支持，但 Android WebView（尤其旧版）可能渲染错位或忽略 <rt></rt>。没有 JS 介入时，纯 HTML fallback 只能靠 CSS 模拟。
简单降级方案：
- 用
display: ruby/display: ruby-text的 CSS 规则辅助（但并非所有浏览器识别） - 对不支持的环境，用
<span class="ruby-fallback">汉 <small>ㄏㄢˋ</small></span>配合媒体查询检测 - 避免依赖
<rp></rp>—— 它本意是为不支持 ruby 的浏览器提供括号包裹，但实际中多数人直接省略，且现代浏览器已不渲染<rp></rp>内容
真正难搞的是竖排注音（如古籍排版），<rt></rt> 默认只支持横排右上角定位，竖排需额外用 writing-mode + transform，目前无统一方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
