数据值，数据标题，数据原始标题，原始标题等的目的和用途是什么？

Question

我一直在更现代的网站上看到这些属性，比如GitHub等等，它们似乎总是与title属性这样的自定义popover相吻合。

<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）通常用于在这种特定情况下创建弹出窗口？

Answer 1

简单地说，自定义数据属性的规范声明任何以“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'不确定外部链接政策，只是把它放在这里以防万一有人想知道'

Answer 2

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

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

Answer 3

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

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