Difference between href and data-href in anchor tag in html

问题

What is the difference between href and data-href attribute in html <a></a> tag? My current code is written below:

<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.

回答1:

Global HTML data-* attributes are used to store custom data in the HTML code, ready to be called by CSS and Javascript. The asterisk ( * ) is a wildcard that can be substituted by any subtitle.

In the next snippet the CSS uses data stored in data-append to append text :after a div's content while Javascript uses the data stored in data-color attribute to apply color on its background:

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>

回答2:

What is the difference between href and data-href attribute in html tag?

That the former actually links somewhere, with all the functionality/UI that includes (because it is specified as 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

http://www.w3.org/TR/html5/dom.html#custom-data-attribute

来源：https://stackoverflow.com/questions/36020130/difference-between-href-and-data-href-in-anchor-tag-in-html