Question

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

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

由于某些原因，我无法显示我发现它们的HTML文件的确切示例，但这里有一些带有此类标记的网络示例：

data-key
data-key
data-url

Answer 1

我应该何时使用数据属性？

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

这次数据属性用于指示通知气泡的气泡值。

<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

的示例和信息

Answer 2

这些被称为HTML5 Custom Data attributes。

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

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

从看到你的代码看来：

编写此代码的人，想要存储一些额外的有元素的信息。不确定他是否可以处理这个问题 Javascript也是。{/ p>
您应该做的是完全检查Javascript代码，他是否正在处理这些数据属性或是否可以检查与他同在。
由于您的代码使用的是jQuery库，请检查.data() 方法。完成代码审查后，如果发现没有用，然后随意删除。

Answer 3

data-* attributes用于向元素添加任意数据，仅供托管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>

什么是＆＃34; data-url＆＃34;和＆＃34;数据键＆＃34; <a> tag?</a>的属性

4 个答案: