<a href="javascript:void(0)"></a> 和 <a></a> 的区别是什么?

Question

<a href="javascript:void(0)"></a> 和 <a></a> 的区别是什么?

不写这个表达式会有什么影响吗?

Answer 1

这个的目的是，给<a>标签以href属性，并不连接到实际的页面。

给<a>标签增加href属性，就意味着以下事情：

• :link选择器可以选择到它
• 这个a标签可以获得焦点（可以通过tab按键访问到，从而屏幕阅读器能够读出背后的内容，增强可访问性）
• 在浏览器的默认样式表中，有href属性的<a>标签才有cursor:pointer的效果。
• 优雅降级，在网络连接很差，还没有加载到CSS的时候，<a>依然有手型与正常的link样式。

给<a>标签以href属性，并不连接到实际的页面，还有其他方案。

---

额外说一下浏览器的默认样式表。

首先看webkit:

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

a:-webkit-any-link:active {
    color: -webkit-activelink
}

而mozilla有这样的默认样式：

*|*:-moz-any-link {
  cursor: pointer;
}

*|*:-moz-any-link:-moz-focusring {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 1px dotted;
}

可以看到，webkit和mozilla浏览器都实现了类似于any-link的私有选择符，选取有link语义的标签，比如，有href的<a>。

IE和opera的默认样式表里没有这样的私有选择符，但是有href属性的<a>标签才会应用上<a>标签的样式，若没有href属性，它的样式和<span>一样，仅仅是inline级别的元素。

/*opera的默认样式*/
a {
    color: #00C;
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

---

我参考的浏览器默认CSS样式表：

• IE：http://www.iecss.com/
• WebKit在http://trac.webkit.org/browser/trunk/Source/WebCore/css（包括 html.css,fullscreen.css,quirks.css等）
• Firefox 在resource://gre-resources/ 或者在线版：http://mxr.mozilla.org/mozilla-central/source/layout/style/

Answer 2

一般这样写只是为了让鼠标成手形
但不推荐这么做