如何在 HTML5 中显示 ruby 注释?

htmlweb developmentfront end technology更新于 2025/8/15 8:44:17

注释是可以添加到 Web 文档或文档特定部分的外部注释。它们可以是评论、注释、说明或其他类型的注释。由于它们是外部的，因此任何 Web 文档都可以单独添加注释，而无需更改实际文档。

让我们直接进入文章，了解 HTML5 中的 ruby 注释。

HTML5 中的 ruby 注释

HTML 元素 <ruby> 表示显示在正文上方、下方或旁边的简短注释，通常用于演示如何发音东亚字符。其他类型的文本也可以使用它进行注释，尽管这种应用不太流行。

为了生成单词和短语的注释或发音说明，<ruby> 元素与 <rt> 元素结合使用。注释包含在 <rt> 标签中，将显示为位于基础文本上方的较小文本，基础文本应包含在 <ruby> 标签中。

对于不支持此样式的浏览器，可以使用可选的 <rp> 元素将 ruby 内容括在括号中，以指示存在 ruby 注释。下表列出了此标签的版本历史和使用上下文。

语法

以下是 <ruby> 的语法

<ruby attributes> Contents... </ruby>

让我们查看以下示例，以了解有关如何在 HTML5 中显示 ruby 注释的更多信息。

示例

考虑以下内容，其中 <ruby>标签显示动作。

<!DOCTYPE html>
<html>
   <head>
   <style>
   body{
      text-align: center;
   }
   rt{ font-size: 10px;
   color: red;
   }
	</style>
	</head>
	<body>
	   <p>Telugu Language Annotation</p>
	   <ruby>
	        పెద్ద అన్నయ్య<rt>Big Brother</rt>
	   </ruby>
	   <p>Normal Annotation Representation</p>
	   <ruby>
	      2022<rp>(</rp><rt>Year</rt><rp>)</rp>
	      12<rp>(</rp><rt> Month</rt><rp>)</rp>
	      06<rp>(</rp><rt>Date</rt><rp>)</rp>
	   </ruby>
	</body>
</html>

输出

脚本执行后，将生成一个输出，该输出包含亚洲语言注释的文本和网页上显示的使用 <ruby> 标签的常规注释表示。

示例

我们来看一下 <ruby> 标签用法的另一个示例。

<!DOCTYPE html>
<html>
   <head>
      <title>ruby tag</title>
   </head>
   <body>
      <ruby>
         వర్మ <rp>(</rp><rt>Varma</rt><rp>)</rp>
      </ruby>
   </body>
</html>

输出

运行上述脚本后，它将生成一个输出，其中包含上述脚本中使用的文本，并在网页上带有 <ruby> 标签。

示例

您可以尝试运行以下代码来显示带有 ruby 注释的文本 −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Rt Tag</title>
   </head>
   <body>
      <ruby>
          అసతోమా <rp>(</rp><rt>Asatooma</rt><rp>)</rp>
        సద్గమయ <rp>(</rp><rt>Sadgamaya</rt><rp>)</rp>
      </ruby>
   </body>
</html>