<a>标签的“data-url”和“data-key”属性是什么？

Question

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

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

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

1. 数据密钥
2. 数据密钥
3. 数据网址

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

Answer 1

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

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

---

这次使用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 使用数据属性（属性选择器）

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

示例和信息来自此处

Answer 2

这些称为 HTML5 自定义数据属性。

自定义数据属性旨在存储私有的自定义数据 没有更合适的页面或应用程序 属性或元素。这些属性不适用于 独立于使用属性的站点的软件。 每个 HTML 元素都可以有任意数量的自定义数据属性 指定，任意值。

在Google中找不到它的原因是因为这些属性是用户为自己使用而生成的自定义属性。

从你的代码看来：

• 编写此代码的人想要存储一些额外的内容 信息与元素。 不确定他能处理这个问题 也

  Javascript

  。

• 你应该做的是彻底检查

  Javascript

  代码， 他是否正在处理这些数据属性，或者如果可能的话检查 和他在一起。

• 由于您的代码正在使用

  jQuery

  库，请检查 .data() 方法。 经过完整的代码审查后，如果您发现它没有用， 然后随意删除。

Answer 3

data-*

属性用于向元素添加任意数据，仅供托管 HTML 的站点上运行的代码（通常是客户端 JavaScript）使用。

为了说明您给出的三个示例的用途，我们必须对它们附带的代码进行逆向工程（除非它们在网站上有记录），因为它们没有标准含义。

Answer 4

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>