Różnica między href i data-href w tagu kotwicy w html

Question

Jaka jest różnica między atrybutem href i data-href w tagu html <a></a>? Mój obecny kod jest napisane poniżej:

<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> 

i kiedy jestem zmieniając go do

<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> 

nie jest przekierowanie do verify_phone_process_1.html strony.

Answer 1

Jaka jest różnica między atrybutem href i data-href w tagu html?

że były faktycznie linki gdzieś, ze wszystkimi funkcjami/UI, który zawiera (ponieważ jest określony jako atrybut, że się udało) - podczas gdy ten ostatni nie robi nic na własną rękę, to po prostu arbitralnie nazwany niestandardowy atrybut danych z dowolną wartością.

---

Edit: Niektóre więcej informacji o niestandardowych danych atrybuty:

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

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

Answer 2

Globalny HTML teleinformatyczny * atrybuty są używane do przechowywania danych niestandardowych (gotowy do nazywane przez CSS i JavaScript). * to symbol wieloznaczny, który można zastąpić dowolnym podtytułem.

W następnym fragmencie CSS korzysta z danych przechowywanych w data-append aby dołączyć tekst :after zawartości div przy jednoczesnym JavaScript używa danych przechowywanych w atrybucie data-color zastosować kolor na jej tle:

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>