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

时间:2013-06-22 01:33:46

标签: html html5 custom-data-attribute

我一直在更现代的网站上看到这些属性,比如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)通常用于在这种特定情况下创建弹出窗口?

3 个答案:

答案 0 :(得分:11)

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

答案 1 :(得分:10)

HTML5 data-*属性用于在元素

中存储数据

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

答案 2 :(得分:7)

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

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