Html <a> 标签的“data-url”和“data-key”属性是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18227375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are "data-url" and "data-key" attributes of <a> tag?
提问by Agafonova Victoria
I've faced two strange attributes of an html tag . They are "data-url"and "data-key".
我遇到了 html 标签的两个奇怪属性 . 它们是 "data-url"和"data-key"。
What are they and how can they be used?
它们是什么以及如何使用它们？
For some reasons i can't show the exact example of the HTML file I've found them in, but here are some examples from the web with such tags:
由于某些原因，我无法显示我在其中找到它们的 HTML 文件的确切示例，但这里有一些来自网络的带有此类标签的示例：
PS: I've tried to Google, but no useful results were found.
PS：我试过谷歌，但没有找到有用的结果。
采纳答案by daniel__
When Should I Use the Data Attribute?
什么时候应该使用数据属性？
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。
This time the data attribute is used to indicate the bubble value of the notification bubble.
这次用data属性来表示通知气泡的气泡值。
<a href="#" class="pink" data-bubble="2">Profile</a>
This time is used to show the text for the tooltip.
此时间用于显示工具提示的文本。
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>
When Shouldn't I Use the Data Attribute?
什么时候不应该使用数据属性？
We shouldn't use data attributes for anything which already has an already established or more appropriate attribute. For example it would be inappropriate to use:
我们不应该将数据属性用于任何已经建立或更合适的属性。例如，不适合使用：
<span data-time="20:00">8pm<span>
when we could use the already defined datetimeattribute within a time element like below:
当我们可以在如下所示的时间元素中使用已经定义的日期时间属性时：
<time datetime="20:00">8pm</time>
Using Data Attributes With CSS (Attribute selectors)
在 CSS 中使用数据属性（属性选择器）
[data-role="page"] {
/* Styles */
}
Using Data Attributes With jQuery (.attr())
在 jQuery 中使用数据属性（.attr()）
<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>
-
——
$('.button').click(function(e) {
e.preventDefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});
Examples and info from here
来自此处的示例和信息
回答by Praveen
Those are called HTML5 Custom Data attributes.
这些称为HTML5 自定义数据属性。
Custom data attributesare intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of custom data attributes specified, with any value.
自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合适的属性或元素。这些属性不适用于独立于使用这些属性的站点的软件。每个 HTML 元素都可以指定任意数量的自定义数据属性，具有任意值。
The reason why you can't find it in Google is because those attribute are custom attributes generated by user for their own usage.
你在谷歌上找不到的原因是因为那些属性是用户为自己使用而生成的自定义属性。
From seeing your code it seems:
从看到你的代码看来：
The person who has written this code, wants to store some additional information with the elements. Not sure he may handle this in
Javascripttoo.What you should do is to check the
Javascriptcode completely, whether he is handling those data attributes or if possible check with him.- Since you code is using
jQuerylibrary, check for .data()method. After a complete code review, if you find it has no use, then feel free to remove.
编写此代码的人想要与元素一起存储一些附加信息。不确定他也能处理这个问题
Javascript。你应该做的是
Javascript彻底检查代码，他是否正在处理那些数据属性，或者如果可能的话与他一起检查。- 由于您的代码正在使用
jQuery库，请检查.data()方法。完整的代码后，如果你发现它没有用，那就随意删除。
回答by Quentin
data-*attributesare for adding arbitrary data to an element for use solely by the code (usually client side JavaScript) running on the site hosting the HTML.
data-*属性用于将任意数据添加到元素中，仅供在托管 HTML 的站点上运行的代码（通常是客户端 JavaScript）使用。
In order to tell what the three examples you give are for, we would have to reverse engineer the code that comes with them (unless they are documented on the sites) since they don't have standard meanings.
为了说明您给出的三个示例的用途，我们必须对它们附带的代码进行逆向工程（除非它们在网站上有记录），因为它们没有标准含义。
回答by Sarah Peeters
A new feature being introduced in HTML 5 is the addition of custom data attributes. 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:
HTML 5 中引入的一项新功能是添加自定义数据属性。简而言之，自定义数据属性的规范规定，任何以“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>
<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>
