在东亚排版中，Ruby 文本（ruby text）是一种通常放置在字符上方或右侧的小型文本注释。该文本提供了字符的发音或翻译。Ruby 文本是 HTML 中 Ruby 注释的重要组成部分。在本实验中，你将学习如何使用 HTML 的 <rt> 标签创建 Ruby 注释。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。
首先，让我们在 index.html 文件中创建一个新的 HTML 文档。将以下代码添加到文件中：
<!doctype html>
<html>
<head>
<title>Ruby Annotation Example</title>
</head>
<body>
<h1>Ruby Annotation Example</h1>
</body>
</html>这个基本结构设置了我们将用于创建 Ruby 注释示例的文档。
接下来，我们将添加一些需要用 Ruby 文本注释的文本。在 h1 标签后添加以下代码：
<p>
Here is some text that we want to annotate with ruby text. In East Asian
typography, ruby text is used to provide the pronunciation or translation of a
character.
</p>现在，让我们为文本中的一个字符创建 Ruby 注释。我们将使用 <ruby> 标签包裹字符，并使用 <rt> 标签提供 Ruby 文本。在段落后添加以下代码：
<p>
Here is some text that we want to annotate with ruby text. In East Asian
typography, ruby text is used to provide the pronunciation or translation of a
character.
</p>
<ruby> 漢 <rt>hàn</rt> </ruby>在这个示例中，我们用 <ruby> 标签包裹字符 '漢'，然后使用 <rt> 标签提供 Ruby 文本 'hàn'。
让我们在示例中添加更多字符。将 <ruby> 标签代码替换为以下内容：
<ruby> 漢 <rt>hàn</rt> </ruby>
<ruby> 字 <rt>zì</rt> </ruby>
<ruby> 表 <rt>biǎo</rt> </ruby>在这段代码中，我们为示例添加了两个字符，并使用它们各自的 Ruby 文本进行注释。
保存 index.html 文件并在浏览器中打开它。你应该会看到以下输出：
在此输出中，你可以看到带有各自 Ruby 文本的注释字符。
恭喜！你已经成功使用 HTML 的 <rt> 标签创建了 Ruby 注释。Ruby 文本是 HTML 中 Ruby 注释的重要组成部分，用于东亚排版中提供字符的发音或翻译。
