蛮有意思的,之前面试某厂的时候遇到了这个问题,答得不是很好,专门整理一波~
如果button在form表单内部,则可以不用JavaScript绑定onclick属性就可以提交表单内容(type = 'submit')
,而如果不在form表单内部,又不考虑语义化,那么作为按钮,用div和button来写按钮就没什么太多的区别,只存在一些外观上和语义化的细微区别。
实际上,它还能与menu产生联动,如MDN对button 的 type 属性描述:
submit
: 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。reset
: 此按钮重置所有组件为初始值。button
: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。menu
: 此按钮打开一个由指定<menu>
元素进行定义的弹出菜单。语义化就是说,HTML 元素具有相应的含义,而对于SEO来说,就是让机器可以读懂网页的内容。它用于描述元素的内容或者跟其他元素的关系。在 HTML 里,除了<div>
和<span>
,基本上都是语义化的元素。
转言之,<div>
是非语义化元素,<div>
没有给内容附加任何含义,它只是个<div>
,那么你所模拟的button和其他用<div>
包裹的内容没有区别,甚至会被抓取模拟button的内容。另外,大部分搜索引擎并不对button和input做过多处理(不感兴趣),如果你想实现分享、页面锚点or链接到别的页面并需要由搜索引擎抓取,使用<a>
标签对SEO更有意义。
关于默认cursor属性可千万不要被组件库的默认样式误导了哦,因为通常
<Button>
组件的cursor
会被处理为pointer
,也就是和链接一样的小手。
参考:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。