乐趣区

关于前端:button标签和div模拟按钮的区别

jiezi

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

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

表单应用上

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

button 的 type 属性

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

  • submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动静更改为空值或有效值，则此值为默认值。
  • reset: 此按钮重置所有组件为初始值。
  • button: 此按钮没有默认行为。它能够有与元素事件相干的客户端脚本，当事件呈现时可触发。
  • menu: 此按钮关上一个由指定 <menu> 元素进行定义的弹出菜单。

SEO 以及语义化

语义化就是说，HTML 元素具备相应的含意，而对于 SEO 来说，就是让机器能够读懂网页的内容。它用于形容元素的内容或者跟其余元素的关系。在 HTML 里，除了 <div> 和<span>，基本上都是语义化的元素。

转言之，<div>是非语义化元素，<div>没有给内容附加任何含意，它只是个 <div>，那么你所模仿的 button 和其余用<div> 包裹的内容没有区别，甚至会被抓取模仿 button 的内容。另外，大部分搜索引擎并不对 button 和 input 做过多解决（不感兴趣），如果你想实现分享、页面锚点 or 链接到别的页面并须要由搜索引擎抓取，应用 <a> 标签对 SEO 更有意义。

外观差别

  1. div 的默认 box-sizing 属性为 content-box，而 button 默认为 border-box，因而其余款式属性雷同的状况下，div 会比 button 看上去大一些；

  2. button 的 cursor 属性默认值相似于 default，鼠标悬停在 button 上方为默认模式。而 div 的 cursor 则是 text 类型，并且 div 的 user-select 为 text 属性，即能够外部文本能够被选中，而 button 的默认为 none，不可选中外部文本；

    对于默认 cursor 属性可千万不要被组件库的默认款式误导了哦，因为通常 <Button> 组件的 cursor 会被解决为pointer，也就是和链接一样的小手。

  3. 如果不给 button 设置 background-color 或 border 属性，则它存在一个默认的点击动画，鼠标点击时背景色彩或边框会动态变化以呈现出点击的动画成果，而 div 则不会，然而如果给 button 设置了 background-color 和 border 属性，这些默认的点击动画将会隐没。

参考：

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

MDN 文档

[SEO: \<button> vs \<a> HTML tags [closed]](https://stackoverflow.com/questions/19201420/seo-button-vs-a-html-tags)

退出移动版