html - 标签的 "data-url"和 "data-key"属性是什么？

Question

我遇到过 html 标签 的两个奇怪属性。它们是"data-url" 和"data-key"。

它们是什么以及如何使用它们？

由于某些原因，我无法显示我在其中找到它们的 HTML 文件的确切示例，但这里有一些来自网络的带有此类标签的示例:

1. data-key
2. data-key
3. data-url

PS:我试过谷歌，但没有找到有用的结果。

Answer 1

什么时候应该使用数据属性？

自定义数据属性旨在存储页面或应用程序私有(private)的自定义数据，没有更合​​适的属性或元素。

---

这次使用data属性表示通知气泡的气泡值。

<a href="#" class="pink" data-bubble="2">Profile</a>

这段时间用于显示工具提示的文本。

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

---

我什么时候不应该使用数据属性？

我们不应该将数据属性用于任何已经建立或更合适的属性。例如不适合使用:

<span data-time="20:00">8pm<span>

什么时候我们可以使用已经定义的 datetime时间元素中的属性如下所示:

<time datetime="20:00">8pm</time>

---

在 CSS 中使用数据属性 ( Attribute selectors )

[data-role="page"] {
  /* Styles */
}

---

在 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);
 });

示例和信息来自 here