HTML - 为什么很多人用div开发按钮，而不是button

 难度级别：中级及以上                                 提问概率：60%

在前端的世界里，开发按钮除了使用button标签之外，还可以使用div、span、a、input等标签，其实使用某个标签目前并没有定论，只要书写的样式可以达到预期的效果，使用label、p、这些标签也是可以完成的。但这就让人想到，button本来就是用来开发按钮使用的。而大家又那么强调语义化，为什么还有那么多人在使用其他标签呢。

1 HTML语义化

先来看一下HTML语义化的重要性，HTLM语义化，概括来说就是让每个HTML标签都尽量可以做他自己本该做的事情。这个怎么理解？

HTML标签自身含义设定并非单独的，而是和浏览器强绑定的[1] 。浏览器虽然五花八门，但他们对HTML标签的支持，以及语义化支持都是在严格遵循或者尽量去遵循着W3C标准的。而且每个HTML标签最初的设定都是有一定含义的，例如a标签希望表示超链接，div标签希望做为一个盒子包裹其他元素，p标签希望可以放一个段落，H1到H6希望可以表示一些标题加大加粗的字体，ul 希望可以放一些有序或者无序的列，table最初就是表示渲染数据的。

所以写正确的HTML标签，是希望在CSS加载失败的时候,可以尽量将网页的架构内容展示出来，CSS好比一身华丽的外衣，但最好是不穿外衣也依然完美；既然浏览器更希望大家把HTML标签写的更加语义化一些，那么这样写对于浏览器肯定是更友好的，而对浏览器友好的好处就是，通过搜索引擎可以更快速的抓取网页内容；为了实现功能，比如a标签套了div，div内部又左边P段落，右边又是div，里面又嵌套了ul列，列里又有div做了一个按钮，是非常杂乱的，不仅不利于SEO的搜索，后期代码的维护成本也会很高。

前端还有一种职位叫切图工程师，意思就是只负责写HTML和CSS代码，生成静态页面，流水线式的工作，如果HTML语义化书写的特别棒，一定会让后续纯前端开发的同事大为赞赏。但如果很多HTML标签写的凌乱不堪，全靠大量的CSS去挤占定位，对后续的开发工作以及代码维护工作是非常不利的。

2 button默认的键盘事件

 在表单开发中，可以为每个输入框设定一个属性tabindex，这样就可以轻松实现按下Tab键，光标移动到下一个输入框。在button按钮元素上，tabindex属性依然有效，这就给了用户很大便捷，可以不必操作鼠标而完成整个表单的提交操作。但很显然，div开发的按钮，就不具备这样的功能，用户就必须要使用鼠标手动去点击，如果想要按下回车键来出发按钮事件，也需要做对应的Javascript代码操作。这无疑也是button标签的一大优点。

3 兼容性问题是短板

在更早期的网页或是管理系统开发中，大家并不是那么在意网页的样式，所以直接使用button标签的场景很多，但造成的问题就是，几乎每个浏览器渲染出的按钮样式都有差异，但在当时这并不算什么大问题，不过话又说回来，即便是今天，每个浏览器对于alert的样式支持也有所不同；

伴随着页面美化以及用户体验的提升，单纯的button按钮越来越不能满足需求了，为按钮添加样式，添加动画等需求接踵而来，即便设置了很多样式，希望button按钮在每个浏览器渲染出的样式都尽量相同，但遇到IE低版本浏览器总是那么不如意；例如默认点击后的黑色边等问题，虽然也可以通过一些样式控制达到尽量相同的展现，但button按钮总是要多设置一些样式，不像div那么轻量化；而大名鼎鼎的ElementUI，虽然按钮组件内部采用button标签来实现，但他却早已不支持IE8及以下版本的浏览器了；

为了满足实现需求，为了提升用户体验，逐渐的，大家更习惯采用div标签的方案来实现一个按钮的功能，因为div标签的兼容性更强，样式也更容易把控，即便是在小小的按钮上添加复杂的动画都能够快速实现。

4 为了快速实现需求

但很多时候任务需求时间紧，工作量大，再加上团队中没有很好的代码审查机制。很容易出现顶部该用header标签的，用上了div；底部该用footer标签的，用上了div；段落该用p标签的，用上了div；侧栏该用aside标签的，用上了div；甚至链接跳转本该是a标签，但结合一些场景，为了快速开发，也用上了div，外加一些样式控制，再使用Javascript事件操作，使用户看上去就像链接一样。

以上这些操作虽然显得不那么合适，但互联网中的确存在着大量类似的代码。如果说这些场景都可能存在，那么一个小小的button按钮，也使用div来开发，是不是就显得很平常了呢。

---

刷题思考

    这是一道综合题目，看似是div标签布局的问题，但在前端的世界里，HTML标签并非单独存在的，尤其是涉及到form表单或是button按钮这类基本功能丰富的组件，要更多的从语义化、兼容性、浏览器事件以及项目实际开发的角度去作答，这样的答案才更丰富而有经验性。

---

类似考点

    这道题相关的考点比较广，但面试官大部分会围绕着以下几点，例如请你说一说对HTML标签语义化的理解；例如请你说一说哪些标签都可能存在浏览器兼容性问题；例如请你说出制作一个按钮的方式，越多越好等等。