数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML5 中显示注音（Ruby Annotation）？
注释是可以在网页文档或文档的特定部分添加的外部备注。它们可以是评论、笔记、解释或其他类型的备注。由于它们是外部的，因此任何网页文档都可以独立地进行注释，而无需更改实际文档。
让我们深入了解文章，学习 HTML5 中的注音。
HTML5 中的注音（Ruby Annotation）
HTML 元素 <ruby> 表示显示在主体文本上方、下方或旁边的简短注释，通常用于演示如何发音东亚字符。虽然其他类型的文本也可以使用它进行注释，但这种应用不太常见。
为了为单词和短语生成注释或发音说明，<ruby> 元素与 <rt> 元素结合使用。包含在 <rt> 标签中的注释将显示为主体文本上方的较小文本，主体文本应包含在 <ruby> 标签中。
对于不支持此样式的浏览器，可以使用可选的 <rp> 元素将括号包裹在注音内容周围，以指示注音的存在。下表列出了此标签的版本历史和使用上下文。
语法
以下是 <ruby> 的语法。
<ruby attributes> Contents... </ruby>
让我们看看以下示例，以了解更多关于如何在 HTML5 中显示注音的信息。
示例
考虑以下情况，其中 <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> 标签的文本。
示例
您可以尝试运行以下代码来显示文本注音：
<!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>
输出
当脚本执行时，它将生成一个输出，其中包含在上述脚本中提到的使用 <ruby> 标签的文本。
更新于： 2023年10月11日
387 次浏览
广告