HTML - <rp> 标签



HTML <rp> 标签用于为不支持使用 <ruby> 标签 显示 ruby 注解的浏览器提供围绕 ruby 文本的备用括号。 这是一个包含在 HTML5 中的新标签。<rp> 标签必须用括号括住 <rt> 标签,该标签包含注释的文本。

语法

<rp>.....</rp>

属性

HTML rp 标签支持 HTML 的 全局事件 属性。

HTML rp 标签示例

在以下示例中,我们将看到使用案例,在何处以及如何使用 HTML rp 标签来提供围绕 ruby 文本的备用括号。

使用 rp 标签包含 Ruby 文本

在以下示例中,我们创建了一个使用 <rp> 标签包含的 ruby 文本。

<!DOCTYPE html>
<html>
<head>
   <style>
      ruby {
         font-size: 2em;
      }
   </style>
</head>
<body>
   <ruby> 漢 <rp>(</rp>
      <rt>kan</rt>
      <rp>)</rp> 字 <rp>(</rp>
      <rt>ji</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

设置 rp 元素的样式

考虑以下示例,我们使用 <rp> 标签创建了一个 HTML 文档,并使用 CSS 属性对其进行样式设置。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }

      ruby {
         font-size: 3em;
         color: green;
      }
   </style>
</head>
<body>
   <h3>HTML rp Tag</h3>
   <ruby> 漢 <rp>(</rp>
      <rt>kan</rt>
      <rp>)</rp> 字 <rp>(</rp>
      <rt>ji</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

在不支持 Ruby 注解的情况下应用 rp 标签

让我们看一下下面的示例,我们将使用 <rp> 元素向不支持 Ruby 注解的用户代理显示括号。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
      text-align: center;
      }

      ruby {
      font-size: 2em;
      color: #808000;
      }
   </style>
</head>
<body>
   <h3>Example of rp tag </h3>
   <ruby> 漢 <rp>(</rp>
      <rt>かん</rt>
      <rp>)</rp> 字 <rp>(</rp>
      <rt>じ</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

支持的浏览器

标签 Chrome Edge Firefox Safari Opera
rp 是 5.0 是 5.5 是 38.0 是 5.0 是 15.0
html_tags_reference.htm
广告