HTML Ruby 注释详解

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在东亚排版中,Ruby 文本(ruby text)是一种通常放置在字符上方或右侧的小型文本注释。该文本提供了字符的发音或翻译。Ruby 文本是 HTML 中 Ruby 注释的重要组成部分。在本实验中,你将学习如何使用 HTML 的 <rt> 标签创建 Ruby 注释。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/head_elems -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/charset -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/para_br -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/text_dir -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/doc_flow -.-> lab-70823{{"`HTML Ruby 注释详解`"}} html/inter_elems -.-> lab-70823{{"`HTML Ruby 注释详解`"}} end

设置 HTML 文档

首先,让我们在 index.html 文件中创建一个新的 HTML 文档。将以下代码添加到文件中:

<!doctype html>
<html>
  <head>
    <title>Ruby Annotation Example</title>
  </head>
  <body>
    <h1>Ruby Annotation Example</h1>
  </body>
</html>

这个基本结构设置了我们将用于创建 Ruby 注释示例的文档。

添加 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 注释。我们将使用 <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 文本进行注释。

测试 Ruby 注释

保存 index.html 文件并在浏览器中打开它。你应该会看到以下输出:

Ruby Annotation Example Output

在此输出中,你可以看到带有各自 Ruby 文本的注释字符。

总结

恭喜!你已经成功使用 HTML 的 <rt> 标签创建了 Ruby 注释。Ruby 文本是 HTML 中 Ruby 注释的重要组成部分,用于东亚排版中提供字符的发音或翻译。

您可能感兴趣的其他 HTML 教程