HTML <ruby> 标签,用于指定 ruby 注解。它是附在正文后面的小文本,用于指定正文的含义。通常用于显示东亚字符(如中文和日文)的发音。这是 HTML5 中包含的新标签。它还可用于表示与主要内容相关的小注释。
语法
<ruby>.....</ruby>
属性
HTML ruby 标签支持 HTML 的 全局属性 和 事件属性。
<ruby> 标签示例
在下面的示例中,我们将看到示例,在哪里以及如何使用 <ruby> 标签来指定 <ruby> 注释。
<ruby> 标签简单示例
在下面的示例中,让我们看看 HTML 文档中 <ruby> 标签的工作原理。
<!DOCTYPE html>
<html>
<head>
<style>
ruby {
font-size: 30px;
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1>QikepuCom</h1>
<h2>HTML ruby Tag</h2>
<!-- here, using ruby tag -->
<ruby>
TP <rt>QikepuCom</rt> EL <rt> Easy to learn </rt>
</ruby>
</body>
</html>
东亚语言与普通注释
考虑以下示例,我们正在创建<ruby> 标签来解释东亚语言注释和普通注释。
<!DOCTYPE html>
<html>
<head>
<style>
rt {
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h1>HTML ruby Tag</h1>
<p>East Asian Language Annotation</p>
<ruby> 小弟弟 <rt>Small Brother</rt>
</ruby>
<p>
Normal Annotation Representation of Manufactured date
</p>
<ruby> 19 <rp>(</rp>
<rt>Date</rt>
<rp>)</rp> 06 <rp>(</rp>
<rt> Month</rt>
<rp>)</rp> 2023 <rp>(</rp>
<rt>Year</rt>
<rp>)</rp>
</ruby>
</body>
</html>
与 <ruby> 标签一起使用的标签
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<ruby> | 5.0 | 5.5 | 38.0 | 5.0 | 15.0 |