<rt>-注音解释

<rt>标签是HTML中用于为<ruby>注解提供发音或解释的标签，通常与<rp>标签配合使用，确保在不支持<ruby>的浏览器中也能优雅降级。它主要应用于东亚文字（如中文、日文）的注音场景。

<rt>标签的基本语法

<rt>标签必须嵌套在<ruby>标签内，语法结构如下：

<ruby>
  基字 <rt>注音</rt>
</ruby>

当浏览器不支持<ruby>时，<rt>内容会显示为基字后的括号内文本。现代主流浏览器均已支持该标签。

<rt>标签的典型应用场景

中文汉字注音

最常见的用法是为汉字标注拼音：

<ruby>
  汉 <rt>hàn</rt>
  字 <rt>zì</rt>
</ruby>

渲染效果为：
汉(hàn) 字(zì)

日文假名标注

在日文中用于标注假名发音：

<ruby>
  日本語 <rt>にほんご</rt>
</ruby>

生僻字解释

为生僻字提供解释说明：

<ruby>
  魑 <rt>chī</rt>
  魅 <rt>mèi</rt>
  魍 <rt>wǎng</rt>
  魉 <rt>liǎng</rt>
</ruby>

结合<rp>标签实现兼容性

<rp>标签用于定义当浏览器不支持<ruby>时显示的括号：

<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

在不支持<ruby>的浏览器中会显示为：汉(hàn) 字(zì)

CSS样式控制

可以通过CSS自定义<rt>的显示样式：

<style>
  rt {
    font-size: 0.6em;
    color: #666;
  }
  ruby {
    ruby-position: under;
  }
</style>

<ruby>
  北京 <rt>Běijīng</rt>
</ruby>

实际开发中的注意事项

1. 字体大小：<rt>内容通常应比基字小，建议使用相对单位(em)
2. 垂直对齐：可通过vertical-align调整位置
3. 多语言支持：确保字体包含所需字符集
4. 无障碍访问：屏幕阅读器会正常朗读基字，不会朗读<rt>内容

复杂示例：多行注音

<ruby style="ruby-position: over">
  <ruby>
    漢 <rt>かん</rt>
    字 <rt>じ</rt>
  </ruby>
  <rt>Kanji</rt>
</ruby>

这个例子展示了日文汉字的上方标注假名，同时在下方标注英文解释。

与其他HTML元素的结合

<rt>可以与大多数行内元素结合使用：

<ruby>
  <span style="color:red">红</span>
  <rt><mark>hóng</mark></rt>
</ruby>

浏览器兼容性历史

早期IE版本需要特定语法：

<!-- 兼容IE5-8的写法 -->
<ruby>
  漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

现代浏览器已统一支持标准写法。根据CanIUse数据，全球使用率超过98%的浏览器支持<rt>标签。