HTML5 自定义属性 - 我为什么要使用它们？答案

【问题标题】：HTML5 custom attributes - Why would I use them?HTML5 自定义属性 - 我为什么要使用它们？
【发布时间】：2011-06-29 07:18:17
【问题描述】：

我似乎无法理解为什么我应该对 HTML5 允许自定义属性感到满意？ 我为什么要使用它们？

【问题讨论】：

标签： html custom-attributes

【解决方案1】：

我假设您引用的是 HTML5 [data-*] 属性。

优点是您可以轻松地将一些脚本数据（仍然是语义的，但不用于显示）与您的元素相关联，而无需在整个地方插入内联 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。

【讨论】：

【解决方案2】：

自定义属性已经被广泛使用，例如这里的an example from dojoToolkit()：

<div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>

现在可以重写此代码，以便使用 data-dojoType 等属性验证标记。它们还允许您将特定于应用程序的数据存储在标签中，而不是在类属性中到处乱窜。

有a good introduction to data-* attributes on HTML5 Doctor。

【讨论】：

【解决方案3】：

使用data- 自定义属性是为了让您的html5 页面在未来得到验证，未来遵循该规范的浏览器将不会使用data-[attribute]，因此不会与您的自定义属性发生冲突。

【讨论】：

【解决方案4】：

我发现了 data- 属性的另一个用途：

您可以为工具提示使用新的 HTML5 自定义 data- 属性：Semantic Tooltips With Pure CSS3 and HTML5.

【讨论】：

这就是title 属性的用途。尤其是a、abbr 和dfn 标签。如果您使用数据属性工具提示，它将无法访问。