HTML 中使用的 data- 属性是什么？并且，与数据属性的常见组合是什么？ [复制]答案

【问题标题】：What is data- attribute used for in HTML? And, What are the common combinations with data attribute? [duplicate]HTML 中使用的 data- 属性是什么？并且，与数据属性的常见组合是什么？ [复制]
【发布时间】：2013-08-27 05:21:46
【问题描述】：

这是我在查看网站源代码时遇到的部分代码。一个链接，它的正确描述也足够了。在某处我还看到了 data-info 作为属性。

这里在span标签中，使用了data-msg：

<li>
    <span class="info" data-msg="sources.remittances.type" data-info="sources.remittances.info"></span>:
    <a data-msg="sources.remittances.name" target="_blank" href="http://econ.worldbank.org/WBSITE/EXTERNAL/EXTDEC/EXTDECPROSPECTS/0,,contentMDK:22759429~pagePK:64165401~piPK:64165026~theSitePK:476883,00.html"></a>
</li>

这是另一个例子：

<section class="static">
    <div class="msg" data-msg="browser.not.supported"></div>
</section>

【问题讨论】：

标签： html

【解决方案1】：

自定义数据属性旨在存储私有的自定义数据没有更合适的页面或应用程序属性或元素。

-W3c

Webdesign Tuts gives a pretty good write-up of data-.

应该在没有其他旨在存储特定数据的元素或属性时使用。它不打算被最终用户看到。而是允许更丰富的应用程序。

同一个链接（上面）给出了一个很好的例子：

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>

您现在可以让应用程序访问这些数据，而无需额外调用服务器。

对于某些允许自定义属性的框架（看看你的 Angular.js），在所有属性前加上 data- 允许代码验证，因为我相信浏览器会忽略这些属性。

【讨论】：

【解决方案2】：

这是一个 html 属性标准，用于存储有助于 UI/页面功能的任意数据。它旨在成为表示数据的标准，而不仅仅是使用任意自定义属性

【讨论】：

【解决方案3】：

自定义数据属性旨在存储私有的自定义数据没有更合适的页面或应用程序属性或元素。

All You Need to Know About the HTML5 Data Attribute

HTML5 Custom Data Attributes (data-*)

【讨论】：

【解决方案4】：

HTML 5 中引入的一个新特性是添加了自定义数据属性。这是对规范的一个看似奇怪的补充，但实际上提供了许多有用的好处。

访问

http://html5doctor.com/html5-custom-data-attributes/

【讨论】：