HTML - <data> 標籤

HTML <data> 標籤用於將給定的內容與機器可讀的翻譯連結起來。

此元素提供機器可讀的值和人類可讀的值，以便在瀏覽器中呈現。如果給定的內容與日期或時間相關，則必須使用 <time> 元素。使用其 value 屬性，我們可以使用它來指定元素內容的機器可讀翻譯。

語法

<data>.....</data>

屬性

HTML data 標籤支援全域性屬性，並接受一個特定的屬性，如下所示。

屬性	值	描述
value	機器可讀格式	指定元素內容的機器可讀翻譯。

HTML data 標籤示例

以下示例將說明 data 標籤的使用方法。在何處、何時以及如何使用 data 標籤新增給定內容的機器可讀翻譯。

實現 data 元素

以下 HTML 示例顯示了在 HTML 中使用 <data> 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML data Tag</title>
</head>
<body>
   <!--create a data element-->
   <p>Example of HTML 'data' element</p>
   <p>
      <data>Text inside the p tag.</data>
   </p>
</body>
</html>

在 Data 元素上使用 value 屬性

考慮以下示例，我們將使用帶有 value 屬性和列表的 <data> 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML data tag</title>
</head>
<body>
   <!--create a data element-->
   <p>Example of HTML 'data' element</p>
   <p>Fruits: </p>
   <ul>
      <li>
         <data value="101">Apple</data>
      </li>
      <li>
         <data value="102">Banana</data>
      </li>
      <li>
         <data value="103">Orange</data>
      </li>
      <li>
         <data value="104">Grapes</data>
      </li>
   </ul>
</body>
</html>

設定 data 元素樣式

讓我們看看另一種情況，我們將對 <data> 標籤應用 CSS 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML data tag</title>
   <style>
      data {
         color: red;
         font-style: italic;
         width: 120px;
         height: 30px;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create a data element-->
   <p>Example of HTML 'data' element</p>
   <p>Frontend Technologies: </p>
   <ul>
      <li>
         <data value="311">HTML</data>
      </li>
      <li>
         <data value="312">CSS</data>
      </li>
      <li>
         <data value="313">JavaScript</data>
      </li>
      <li>
         <data value="314">Angular</data>
      </li>
      <li>
         <data value="315">React</data>
      </li>
   </ul>
</body>
</html>

支援的瀏覽器

標籤
data	是 62.0	是 13.0	是 22.0	否	是 49.0

html_tags_reference.htm

列印頁面