html中锚点标记中的href和data-href之间的差异

Question

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>

当我改变它

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

它没有重定向到verify_phone_process_1.html页面.

Answer 1

全局HTML data-*属性用于存储自定义数据(可以通过CSS和Javascript调用).*是一个可以被任何字幕替换的通配符.

在下一个片段中,CSS使用存储的数据data-append来附加文本:afterdiv的内容,而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>

Answer 2

html标签中的href和data-href属性有什么区别？

前者实际上链接到某个地方,包含所有功能/ UI(因为它被指定为完成该功能的属性) - 而后者本身不执行任何操作,它只是一个任意命名的自定义数据属性,具有任意值.

编辑:有关自定义数据属性的更多信息:

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

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