19

我一直在 GitHub 等更现代的网站上看到这些属性，而且它们似乎总是与title属性等自定义弹出框相吻合。

<a href="/" data-value="hovering message">Option 1</a>
<a href="/" data-title="hovering message">Option 2</a>
<a href="/" data-original-title="hovering message">Option 3</a>
<a href="/" original-title="hovering message">Option 4</a>

我在 HTML5 Doctor 上阅读了一些关于数据属性的文档，但我不太确定这一点。

使用它们是否有一些 SEO 或可访问性的好处？在这种特定情况下，通常用于创建弹出框的插件（希望是 jQuery）是什么？

4

3 回答 3

16

简单地说，自定义数据属性的规范规定，任何以“data-”开头的属性都将被视为私有数据的存储区域（私有的意思是最终用户看不到它——它不会影响布局或演示文稿）。

这允许您编写有效的 HTML 标记（通过 HTML 5 验证器），同时在您的页面中嵌入数据。一个简单的例子：

 <li class="user" data-name="John Resig" data-city="Boston"
        data-lang="js" data-food="Bacon">
      <b>John says:</b> <span>Hello, how are you?</span>
    </li>

来自：Ejohn.org '不确定外部链接政策，只是把它放在这里以防有人想知道'

于 2013-06-22T02:35:34.250 回答
14

HTML5 data-*属性用于在元素中存储数据

要使用此属性进行操作，您可以使用jQuery.data()或.data()方法。

于 2013-06-22T01:38:46.750 回答
7

要点是data-属性不会与以后可能添加到 HTML 的属性或与浏览器特定的属性发生冲突。这个想法是为作者提供一个游乐场，一个名称空间，他可以在其中将属性用于私人目的，而不必担心它们会被解释为具有不同含义的标准或供应商定义的属性。

根据这个想法，搜索引擎和辅助软件会忽略这些属性，因为它们没有互操作的意义。

于 2013-06-22T05:50:05.160 回答