html - data-value、data-title、data-original-title、original-title等的用途和用法是什么？

Question

我一直在 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)是什么？

Answer 1

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

这允许您编写有效的 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 '不确定外部链接政策，只是把它放在这里以防有人想知道'