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

题叶
  • 17.3k

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

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

回复
阅读 11k
2 个回答
Humphry
  • 16.4k
✓ 已被采纳

这个的目的是,给<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样式表:

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

宣传栏