初学html之时，就一直有个疑问，<input type="button" value="xxx"> 和 <button>xxx<button>两种方式都表示按钮。
既然它们功能有重复，为什么要设计两种定义按钮的方式呢？它们有何区别？是否可以删掉其中一种？
根据这三个问题，我想分三段梳理并解答一下。
一 为什么有两种定义按钮的方式？
由于历史的原因，HTML最早表单控件全部靠<input>标签承载，用type区分功能，text、button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、time、url、week全部塞进input，早期浏览器只认input，没有独立按钮标签。
但是，input button有致命短板，当年急需修复，比如它是自闭合标签，内容只能通过value属性写纯文本，没有子节点容器，样式扩展性极差，完全无法实现复杂按钮。
<button>设计出来就是为了解决这些问题。
二 它们的区别
区别主要有三点，如下：
<button>是容器元素，内部可以嵌套任何HTML结构，而input button不行。<button>默认type="submit"点击直接提交表单，而 input button默认纯普通按钮，点击不会提交表单，<botton>可以设置type="button"变成普通按钮。- 上古浏览器只支持input button，不支持
<button>。
三 是否可以删掉一种
一定不能删掉其中一种。因为：
其一，大量老旧网站在使用input botton，遵循向后兼容是HTML核心设计原则，一旦废弃，海量网站直接失效，互联网大面积崩溃。
其二，极简场景仍有价值，比如只需一行纯文字简单按钮时，代码更精简。
总结
经过分析，既然两种方式一直会共存，那么我推荐这样使用它们：日常开发时，针对复杂按钮结构，一律使用<button>，极简纯文字按钮，可用input botton。
