关于＜input＞标签和＜button＞标签的区别

1.从语义上,<button>表示按钮,语义更明确,应该优先考虑.

2.从兼容性上,<input>兼容性更好,在需要支持较老旧浏览器时,会优先考虑使用。

3.从继承关系上,<input> 和 <button>都是HTMLFormElement的子类属于同一级别.没有直接的父子级关系。

4.从默认样式上.<button>样式更主富.有边框、背景等.相对更突出<input>样式更简单。

5.从嵌套关系上,<button>内可以嵌套其他HTML标签,<input>不能嵌套复杂内容

6.从提交表单上,<input>会被默认提交,<button>需要配合form属性才能提交。

综合来说.在现代浏览器中,我们会优先考虑使用语义化更好的<button>标签。但在需要兼容低版本浏览器时,会考虑使用<input>,这主要是从兼容性角度的权衡。两者不存在直接的父子级关系

7.<input> 是自闭合标签,<button>需要开始标签和结束标签

8. <input> 通过value属性设置按钮文本,<button>通过标签内文本设置

9.<input> 默认样式更为简单,<button>有默认边框和背景

10.<button>内可以嵌套其他HTML元素,<input>不能

11.<input> 在表单内提交时会被提交,<button>需要配合 form 和 name属性才能提交

                                                                               ——名师指导