button标签和div模拟按钮的区别

蛮有意思的，之前面试某厂的时候遇到了这个问题，答得不是很好，专门整理一波~

如果button在form表单内部，则可以不用JavaScript绑定onclick属性就可以提交表单内容（type = 'submit'），而如果不在form表单内部，又不考虑语义化，那么作为按钮，用div和button来写按钮就没什么太多的区别，只存在一些外观上和语义化的细微区别。

实际上，它还能与menu产生联动，如MDN对button 的 type 属性描述：

语义化就是说，HTML 元素具有相应的含义，而对于SEO来说，就是让机器可以读懂网页的内容。它用于描述元素的内容或者跟其他元素的关系。在 HTML 里，除了

和，基本上都是语义化的元素。

转言之，

是非语义化元素，

没有给内容附加任何含义，它只是个

，那么你所模拟的button和其他用

包裹的内容没有区别，甚至会被抓取模拟button的内容。另外，大部分搜索引擎并不对button和input做过多处理（不感兴趣），如果你想实现分享、页面锚点or链接到别的页面并需要由搜索引擎抓取，使用标签对SEO更有意义。

div的默认box-sizing属性为content-box，而button默认为border-box，因此其他样式属性相同的情况下，div会比button看上去大一些；
button的cursor属性默认值类似于default，鼠标悬停在button上方为默认形式。而div的cursor则是text类型，并且div的user-select为text属性，即可以内部文本可以被选中，而button的默认为none，不可选中内部文本；

关于默认cursor属性可千万不要被组件库的默认样式误导了哦，因为通常
如果不给button设置background-color或border属性，则它存在一个默认的点击动画，鼠标点击时背景颜色或边框会动态变化以呈现出点击的动画效果，而div则不会，但是如果给button设置了background-color和border属性，这些默认的点击动画将会消失。

参考：

用div与button标签作为按钮的一些区别

MDN 文档

[SEO: \