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

Question

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

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

由于某些原因,我无法显示我发现它们的HTML文件的确切示例,但这里有一些带有这些标记的Web示例:

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)使用.

为了说明你给出的三个例子是什么,我们必须对它们附带的代码进行逆向工程(除非它们在网站上有记录),因为它们没有标准含义.