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页面。

- Swamy

Answer 1

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

前者实际上链接到某个地方，并包含所有相关的功能/用户界面（因为它被指定为完成该操作的属性），而后者本身不做任何事情，它只是一个任意命名的自定义数据属性及其值。

---

编辑：关于自定义数据属性的更多信息：

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

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

- CBroe

---

请问您能否推荐一个链接，让我了解有关HTML5数据属性的信息？ - Swamy

我编辑了答案并添加了一些链接，请查看。 - CBroe

Answer 2

全局HTMLdata-*属性用于在HTML代码中存储自定义数据，可以被CSS(::before和::after伪元素中使用的content)和Javascript调用。

下面这段代码CSS使用data-append中存储的数据来添加文本到一个div内容后，而Javascript使用data-color中存储的数据来设置其背景色：

var div_one = document.getElementsByTagName("div")[0]
var div_two = document.getElementsByTagName("div")[1];

div_one.style.background = div_one.getAttribute("data-color");
div_two.style.background = div_two.getAttribute("data-color");

div::after {
  content: attr(data-append);
}

<div data-append="_SUCCESS_" data-color="lawngreen"></div>
<div data-append="_FAILURE_" data-color="tomato"></div>

- L777