Sự khác nhau giữa href và dữ liệu-href trong thẻ neo trong html

Question

Sự khác nhau giữa href và thuộc tính data-href trong thẻ html <a></a> là gì? mã hiện tại của tôi được viết dưới đây:

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

và khi tôi thay đổi nó để

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

nó không chuyển hướng đến trang verify_phone_process_1.html.

Answer 1

Sự khác biệt giữa href và thuộc tính data-href trong thẻ html là gì?

Đó là cựu thực sự liên kết ở đâu đó, với tất cả các chức năng/UI bao gồm (vì nó là định như các thuộc tính mà hoàn thành đó) - trong khi sau này không có gì tự nó, nó chỉ là một cách tùy tiện đặt tên thuộc tính dữ liệu tùy chỉnh với giá trị tùy ý.

---

Edit: Một số thêm thông tin về dữ liệu tùy chỉnh thuộc tính:

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

HTML toàn cầu đĩa dữ liệu * thuộc tính được sử dụng để lưu trữ dữ liệu tùy chỉnh (sẵn sàng được gọi bằng CSS và Javascript). * là một ký tự đại diện có thể được thay thế bằng bất kỳ phụ đề nào.

Trong đoạn tiếp theo CSS sử dụng dữ liệu được lưu trữ trong data-append để thêm văn bản :after nội dung của div trong khi javascript sử dụng dữ liệu được lưu trữ trong data-color thuộc tính để áp dụng màu sắc trên nền của nó:

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>