HTML - <ruby> 標籤



HTML <ruby> 標籤用於指定 ruby 註解。它是一個附加在主文字上的小文字,用於說明主文字的含義。通常用於顯示漢語、日語等東亞字元的發音。這是 HTML5 中新增的一個標籤。它還可以用於表示與主要內容相關的少量註釋。

語法

<ruby>.....</ruby>

屬性

HTML ruby 標籤支援 HTML 的全域性事件 屬性。

HTML ruby 標籤示例

在以下示例中,我們將看到使用案例,以及如何在 HTML 文件中使用 HTML ruby 標籤來指定 ruby 註解。

指定 ruby 元素

在以下示例中,讓我們看看 <ruby> 標籤在 HTML 文件中的工作原理。

<!DOCTYPE html>
<html>
<head>
   <style>
      ruby {
         font-size: 30px;
         font-style: italic;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>HTML ruby Tag</h2>
   <!-- here, using ruby tag -->
   <ruby>
      TP <rt>tutorialspoint </rt> EL <rt> Easy to learn </rt>
   </ruby>
</body>
</html>

東亞語言和普通註釋

考慮以下示例,我們正在建立 <ruby> 元素來解釋東亞語言註釋和普通註釋。

<!DOCTYPE html>
<html>
<head>
   <style>
      rt {
         font-size: 20px;
         color: green;
      }
   </style>
</head>
<body>
   <h1>HTML ruby Tag</h1>
   <p>East Asian Language Annotation</p>
   <ruby> 小弟弟 <rt>Small Brother</rt>
   </ruby>
   <p>
      Normal Annotation Representation of Manufactured date
   </p>
   <ruby> 19 <rp>(</rp>
      <rt>Date</rt>
      <rp>)</rp> 06 <rp>(</rp>
      <rt> Month</rt>
      <rp>)</rp> 2023 <rp>(</rp>
      <rt>Year</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

與 HTML ruby 標籤一起使用的標籤

  • HTML <rt> 標籤 描述主文字上方主文字的解釋
  • HTML <rp> 標籤 這是一個可選標籤,用於指定當瀏覽器不支援 Ruby 註解時需要顯示的資訊。

支援的瀏覽器

標籤 Chrome Edge Firefox Safari Opera
ruby 是 5.0 是 5.5 是 38.0 是 5.0 是 15.0
html_tags_reference.htm
廣告

© . All rights reserved.