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

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-* attribute用于在element中存储数据

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

Answer 3

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

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