html中锚标记中href和data-href之间的区别答案

【问题标题】：Difference between href and data-href in anchor tag in htmlhtml中锚标记中href和data-href之间的区别
【发布时间】：2016-03-15 19:13:52
【问题描述】：

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

【问题讨论】：

标签： html custom-data-attribute

【解决方案1】：

全局 HTML data-* 属性用于在 HTML 代码中存储自定义数据，准备由 CSS 调用（content 与 ::before 和 ::after 伪元素一起使用) 和 Javascript。星号 ( * ) 是一个通配符，可以替换为任何字幕。

在下一个 sn-p 中，CSS 使用存储在 data-append 中的数据来附加文本 :after 一个 div 的内容，而 Javascript 使用存储在 data-color 属性中的数据在其背景上应用颜色： em>

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>

【讨论】：

【解决方案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

【讨论】：

您能否建议我任何可以检查这些 html5 数据属性的链接？
我编辑了答案以包含一些链接，请看一下。