HTML - data 标签_HTML 菜鸟教程

HTML <data>标签用于将给定的内容与机器可读的翻译链接起来。

此元素提供机器可读的值和人类可读的值，用于在浏览器中呈现。如果给定的内容与日期或时间相关，则必须使用 <time> 元素。使用其 value 属性，我们可以使用它来指定元素内容的机器可读翻译。

语法

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

属性

<data>标签支持HTML的全局属性。并接受下面列出的特定属性。

属性	值	描述
value	machine-readable format	指定元素内容的机器可读翻译。

<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 属性

考虑以下示例，我们将在其中将 <data> 标签与 value 属性和 list 一起使用。

<!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>标签的样式

让我们看一下另一个场景，我们要将 CSS 属性应用于 <data> 标签

<!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>

支持的浏览器

浏览器
是否支持	62.0	13.0	22.0	No	49.0

<< HTML - summary 标签 HTML - meta 标签 >>