HTML - ruby 标签

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> 标签一起使用的标签

<rt> 标签在正文之上描述正文的解释
<rp> 标签这是一个可选标签，用于指定浏览器不支持 <ruby> 注解时需要显示的信息。

支持的浏览器

浏览器
<ruby>	5.0	5.5	38.0	5.0	15.0

打印本页