什么是“数据网址”和“数据密钥” < a>的属性标签？ [英] What are "data-url" and "data-key" attributes of <a> tag?

问题描述

我曾经遇到html标签的两个奇怪属性 。他们是data-url和数据密钥。

他们是什么，他们怎么样被使用？

由于某些原因，我无法显示我发现他们的HTML文件的确切示例，但这里有一些网络上的示例标签：

1. 数据密钥


2. 数据密钥


3. data-url

PS：我尝试过Google，但没有有用的结果被发现。

解决方案

何时应用数据属性？

自定义数据属性旨在将自定义数据专用于页面或应用程序，对于该页面或应用程序，没有更合​​适的属性或元素。

---

此时，data属性用于指示通知泡泡的泡泡值。

 < a href =＃class =pinkdata-bubble =2>个人资料< / a> 
  

此时间用于显示工具提示的文字。

 < a href =＃class =tooltipdata-tip =这是提示！>链接< / a> 
  

---

何时不能使用数据属性？

我们不应该为已经建立或更合适的属性使用数据属性。例如，不适合使用：

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

当我们可以使用已定义的 datetime 属性：

 < time datetime =20:00> 8 pm< / time> 
  
 
 
 
 
 
 使用数据属性使用CSS（< a href =http://www.w3.org/TR/selectors/#attribute-selectors =noreferrer>属性选择器） 
  [data-role =page] {
 / *样式* / 
} 
  / pre> 
 
 
 
 
 
 使用数据属性与jQuery（。attr（）） 
  a href =http://www.google.comclass =buttondata-info =世界上最受欢迎的搜索引擎> Google< / a> 
  
  -  
  $（'。button'）。click（function（e）{
 e.preventDefault（）; 
 thisdata = $（this）.attr（'data-info'）; 
 console.log（thisdata）; 
}）; 
  
来自 here  
 
I've faced two strange attributes of an html tag . They are  "data-url" and "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:

data-key 
data-key
data-url
PS: I've tried to Google, but no useful results were found. 
解决方案
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.
<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 datetime attribute within a time element like below:
<time datetime="20:00">8pm</time>




Using Data Attributes With CSS (Attribute selectors)
[data-role="page"] {
  /* Styles */
}




Using Data Attributes With 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

                        
这篇关于什么是“数据网址”和“数据密钥” &lt; a&gt;的属性标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！