你还在用a标签吗？——用button替代a

nys013 html

# 前言

a标签，不止你在用，我也在用。但某些时候我们可以考虑用button替代a。

在多页应用中，a标签很常见，我们常用来作为一个普通超链接，进行页面跳转。

而在单页应用中，我们使用路由进行页面切换，a标签的使用就少了。

不过当我们不需要跳转，只需要点击某个元素来达到一些效果的需求时，常常使用a标签。

如图，智联招聘上的这些选项，就是a标签，没有使用a标签进行页面的跳转，而是监听点击事件然后进行一些操作，这其实也是我们比较普遍的a标签用法。

这是一个修改了样式的a标签——

a{
    text-decoration: none;
    color: #666666;
    font-size: 20px;
}
a:hover{
    color: #3EA4DA;
}

看似很好，但隐藏着一些我们不想要的效果——

1. 能拖拽

2. 会跳转，即使不写href地址，也会刷新页面

当然，我们可以通过js解决以上两个问题：

href值为javascript:;　　点击后执行一条空代码不跳转页面

ondragstart='return false'　　阻止拖动事件的默认行为

<a href="javasricpt:;" ondragstart='return false' >我是一个a标签</a>

不过我想提出另一个思路：用button替代a

这是同样进行了样式修改的button标签

和a标签对比，差别不大，只需修改样式，无需写js代码。

且样式修改也很简单，三个关键——border、background、outline设为none即可

button{
  border: none;
  background: none;
  outline: none;
  font-size: 20px;
  color: #666666;
}
button:hover{
  color: #3EA4DA;
}

最后，并不是要求大家都要使用button，而舍去a，而且我个人有时也会习惯用a，只是提供一个思路：可用button替代a

Q：反正都是要去除默认样式的，为什么不直接用一个span标签？

A：

当然，这个可以通过样式cursor:default;修改。default是默认样式，箭头，同button；pointer是手指，同a。

双击选中文本：双击span就会选中文本，如图。用户点击某一元素时，有时会多次点击，点击时间间隔短，便会产生双击效果，就会选中文字如图，这个效果就不是很好了。
HTML语义化：HTML100多个标签的存在，就是为了HTML语义化，而不是让我们所有元素都是div或span。

HTML丰富的标签，目的在于通过标签名传达标签内容类型的一些信息，就像h1标签传达了标题，header标签传达了头部... 在这里a标签和button标签，则传达了是链接、按钮，都是用于点击的元素

Q：为什么要语义化？（转载自 (opens new window)）

A：