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

Question

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

Answer 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。

Answer 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。它们还允许您将应用程序特定的数据存储在您的标签中，而不是在类属性中进行剽窃。

There's a good introduction to data-* attributes on HTML5 Doctor。

Answer 3

我发现了另一个使用了数据 - 属性：

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

Answer 4

使用data-自定义属性是未来验证您的HTML5页，没有未来的浏览器秉承规范将使用data-[attribute]因此不会与您的自定义属性冲突。