HTML data 标签 - 绿叶网

HTML data 语法

在 HTML 中，data 标签用于为数据处理提供一个值，该值可以提供给 JavaScript 操作或提交给服务端处理。

语法：

<data value="供机器读取的值">供用户查看的值</data>

说明：

如果内容与日期时间相关，应该使用 time 标签来代替 data 标签。

HTML data 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML data 示例

接下来，我们通过一个简单的例子来讲解一下 HTML data 标签是如何使用的。

示例：data 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li><data value="381">橡皮</data></li>
        <li><data value="382">尺子</data></li>
        <li><data value="383">铅笔</data></li>
    </ul>
</body>
</html>

页面效果如下图所示。

HTML data标签示例

分析：

上面例子会显示产品名称，然后我们使用 data 标签定义了每个产品对应的编号，以便 JavaScript 处理或提交给服务端。