前言：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：
1.鼠标样式：当鼠标移入span时，显示的样式为
，不像button和a标签是我们比较喜欢的效果：
、
。
当然，这个可以通过样式cursor:default;修改。default是默认样式，箭头，同button；pointer是手指，同a。
2.双击选中文本：双击span就会选中文本，如图
。用户点击某一元素时，有时会多次点击，点击时间间隔短，便会产生双击效果，就会选中文字如图，这个效果就不是很好了。
3.HTML语义化：HTML100多个标签的存在，就是为了HTML语义化，而不是让我们所有元素都是div或span。
HTML丰富的标签，目的在于通过标签名传达标签内容类型的一些信息，就像h1标签传达了标题，header标签我传达了头部...
在这里a标签和button标签，则传达了是链接、按钮，都是用于点击的元素
Q：为什么要语义化？（转载自：https://blog.csdn.net/qq_38128179/article/details/80811339）
A：
原文：https://www.cnblogs.com/nys013/p/13246762.html