button默认type为submit，需显式设type="button"避免误提交；onclick易出错，推荐addeventlistener；button元素比input type="button"更语义化、可访问性更好；样式重置需清除ua默认样式。
button 标签不加 type 属性就默认提交表单
在 <form></form> 里写 <button>点我</button>，不设 type，浏览器会按 HTML 规范当它是 type="submit"。用户点它、回车、甚至焦点在按钮上按空格，都会触发表单提交——页面刷新或跳转，JS 逻辑可能中断一半。
正确做法是显式声明：<button type="button">取消</button>。这个 type="button" 才是你想要的“普通点击”语义：不提交、不重置、只等 JS 绑定。
- 要纯触发 JS（如弹窗、切换状态）→ 用
type="button" - 要提交表单 → 用
type="submit"，且确保在<form></form>内 - 要重置表单 → 用
type="reset"，但注意它清空的是所有name字段，不是所有输入框
onclick 写法容易静默失效
内联 onclick 看似简单，但错一个字符就完全没反应，而且控制台报错也不明显。常见问题包括：
- 函数名拼错或未定义 → 控制台报
Uncaught ReferenceError: handleClick is not defined - 漏掉括号：
onclick="handleClick"只传引用，不会执行；必须写onclick="handleClick()" - 引号嵌套混乱，比如
onclick="alert("点了")"会因双引号提前闭合而语法错误 - 在 Vue/React 中混用，可能绕过响应式系统，状态变了视图不更新
临时调试可以，但正式代码建议改用 addEventListener，绑定前确保 DOM 就绪（比如监听 DOMContentLoaded）。
input type="button" 不如 button 元素好用
<input type="button" value="点我"> 确实能显示按钮，但它天生是“空壳”：没有默认行为、name 属性无效、不能嵌套 HTML（比如加图标）、在旧 IE 中 disabled 样式不一致。
相比之下，<button type="button"></button> 支持子元素、事件委托更直观、屏幕阅读器识别更好，现代框架中 ref 和事件绑定也更稳定。
- 需要放
<img>或<svg></svg>图标？只能用<button></button> - 动态列表里要传参？
addEventListener+data-*属性比内联onclick更可靠 - 要兼容 IE8+？
<button></button>的disabled行为更统一
样式重置不到位，按钮看起来“怪怪的”
直接写 button { background: #007bff; } 往往不生效，因为各浏览器对 <button></button> 有顽固的 UA 样式：Safari 强制圆角和阴影、Firefox 加内边距、Chrome 继承父级字体。光靠 padding 和 border 清不干净。
起步必加三件套：
-
appearance: none;（补-webkit-appearance: none;和-moz-appearance: none;） -
border: none;和background: none; -
font: inherit;、line-height: normal;、vertical-align: middle;
禁用状态别只靠 opacity: 0.5，必须用 disabled 属性，并单独写 button:disabled 样式：加 cursor: not-allowed、移除 :hover 反馈、避免仅靠颜色变化（色盲用户难感知）。
真正难的不是让按钮“看起来能点”，而是它在键盘 Tab、触摸屏长按、暗色模式、高对比度设置下都反馈明确、行为可预期。样式只是入口，type、disabled、事件绑定时机这些底层属性才是稳不稳的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
