数据值，数据标题，数据原始标题，原始标题等的用途和用途是什么？ [英] what is the purpose and usage of data-value, data-title, data-original-title, original-title, etc.?

问题描述

我在GitHub等更现代化的网站上看到了这些属性，而且它们似乎总是与像 title 属性这样的自定义弹出窗口相匹配。

 < a href =/data-value =悬停消息>选项1< / a> 
< a href =/data-title =hovering message>选项2< / a> 
< a href =/data-original-title =hovering message>选项3< / a> 
< a href =/original-title =悬停消息>选项4< / a> 
  

我阅读了一些关于HTML5 Doctor数据属性的文档，但我不太清楚点。

使用它们有一些搜索引擎优化或可访问性好处吗？在这个特定情况下，插件（希望jQuery）通常用于创建弹出窗口？

解决方案

对于自定义数据属性来说，任何以data-开头的属性都将被视为私有数据的存储区域（私有的，即最终用户看不到它 - 它不会影响布局或表示）。

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

 < li class =userdata-name =John Resigdata-city =Boston 
 data-lang =jsdata-food =Bacon> 
< b>约翰说：< / b> < span>你好，你好吗？< / span> 
< / li> 
  

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

I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute.

<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>

I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point.

Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully jQuery) commonly being used to create the popovers in this specific case?

解决方案

Simply, the specification for custom data attributes states that any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:

<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>

From : Ejohn.org 'Not sure about the external link policy, just putting it in here in case someone wants to know'

这篇关于数据值，数据标题，数据原始标题，原始标题等的用途和用途是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！