优点是您可以轻松地将一些脚本数据(仍然是语义,但不是显示)与元素相关联,而无需在所有位置插入内联JavaScript,并且它将是有效的HTML5.要在HTML4中做同样的事情需要指定一个自定义的命名空间,并添加一些命名空间的属性.

假设你有一个待销售项目的列表,你可能想要存储数字价格,而不尝试解析一个字符串：

<ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2,only $1</li>
  ...
</ul>

如果您允许您的用户标记要购买的多个不同的项目,您可以轻松地拉出数值以显示正在运行的总计.

或者,您可以将数字放在具有特定类的跨度中,在正确的项目上找到正确的范围,并以这种方式拉出值,但是[data- *]属性可以减少所需的标记/脚本量一样的东西.

如果你不想使用它,你不需要.有很多方法可以将数据与元素相关联,这只是一个新的方法.

另外,新的dataset JavaScript API提供了一种一致的方式来声明性地访问存储在[data- *]属性中的值.

对于jQuery用户,可以使用.data()和.attr()访问[data- *]属性和I have written up a detailed answer on when you would want to use one over the other.