1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <data>

<data>：数据元素

Baseline 已广泛支持

此功能已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 10 月以来，它已在各大浏览器中可用。

<data> HTML 元素将给定的内容与机器可读的翻译关联起来。如果内容与时间或日期相关，则必须使用 <time> 元素。

试一试

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

属性

此元素的属性包括全局属性。

value

此属性指定元素内容的机器可读翻译。

示例

下面的示例显示了产品名称，同时也为每个名称关联了产品编号。

html
<p>New Products</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

结果

技术摘要

内容类别 流式内容、语句内容、明显内容。
允许内容 短语内容.
标签省略 无，起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任意
DOM 接口 HTMLDataElement

规范

规范
HTML
# the-data-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的错误