HTML ruby 标签

HTML <ruby> 标签功能

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用： <ruby> 元素由一个或多个需要解释 / 发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

HTML <ruby> 标签用法

ruby 注释：

<ruby>
    <rb>阿西河前端教程</rb>
    <rt>A Xi He Qian Duan Jiao Cheng</rt>
</ruby>

<ruby>
  阿 <rp>(</rp><rt>A</rt><rp>)</rp>
  西 <rp>(</rp><rt>Xi</rt><rp>)</rp>
  河 <rp>(</rp><rt>He</rt><rp>)</rp>
  前 <rp>(</rp><rt>Qian</rt><rp>)</rp>
  端 <rp>(</rp><rt>Duan</rt><rp>)</rp>
  教 <rp>(</rp><rt>Jiao</rt><rp>)</rp>
  程 <rp>(</rp><rt>Cheng</rt><rp>)</rp>
</ruby>

<ruby>
  明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp>
</ruby>

<ruby>
  明 <rp>(</rp><rt>ming</rt><rp>)</rp>
  日 <rp>(</rp><rt>ri</rt><rp>)</rp>
</ruby>

HTML <ruby> 标签演示

注意观察 阿西河前端教程 上面拼音的位置；

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 支持 <ruby> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <ruby> 标签。

HTML4 与 HTML5 之间的差异

<ruby> 标签是 HTML5 中的新标签。

全局属性

<ruby> 标签支持 HTML 全局属性。

事件属性

<ruby> 标签支持 HTML 事件属性