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

打印页面