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

前言：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：

1. 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
2. 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
3. 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
4. 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
5. 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。