Html html中锚标签中href和data-href的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36020130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between href and data-href in anchor tag in html
提问by Swamy
What is the difference between href and data-href attribute in html <a></a>tag?
My current code is written below:
html<a></a>标签中的href和data-href属性有什么区别？我当前的代码写在下面：
<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>
and when I'm changing it to
当我把它改成
<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>
it's not redirecting to verify_phone_process_1.html page.
它不会重定向到 verify_phone_process_1.html 页面。
回答by Le____
Global HTML data-*attributes are used to store custom data in the HTML code, ready to be called by CSS (contentused with the ::beforeand ::afterpseudo-elements) and Javascript.
The asterisk ( * ) is a wildcard that can be substituted by any subtitle.
全球HTML数据- *属性用于在HTML代码存储自定义数据，随时可以通过CSS调用（content用于与::before和::after伪元素）和JavaScript。星号 ( * ) 是一个通配符，可以被任何副标题替换。
In the next snippet the CSS uses data stored in data-appendto append text :aftera div's content while Javascript uses the data stored in data-colorattribute to apply color on its background:
在下一个片段中，CSS 使用存储在div 内容中的数据data-append附加文本，:after而 Javascript 使用存储在data-color属性中的数据在其背景上应用颜色：
var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color");
var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color");
document.getElementsByTagName("div")[0].style.background = zzz;
document.getElementsByTagName("div")[1].style.background = yyy;div::after {
content: attr(data-append);
}<div data-append="_SUCCESS_" data-color="lawngreen"></div>
<div data-append="_FAILURE_" data-color="tomato"></div>回答by CBroe
What is the difference between href and data-href attribute in html tag?
html标签中的href和data-href属性有什么区别？
That the former actually links somewhere, with all the functionality/UI that includes (because it is specifiedas the attribute that accomplishes that) – whereas the latter does nothing on its own, it's just an arbitrarily named custom data attribute with an arbitrary value.
前者实际上链接到某个地方，包含所有功能/用户界面（因为它被指定为实现这一点的属性）——而后者本身什么都不做，它只是一个任意命名的自定义数据属性，具有任意值。
Edit:Some more information on custom data attributes:
编辑：有关自定义数据属性的更多信息：
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
