<button>必须显式设置type属性，否则在<form>内默认为submit导致意外提交；禁用按钮须用disabled属性而非CSS模拟；重置默认样式需appearance: none等三件套；事件绑定优先用addEventListener并确保DOM就绪。
直接用 <button> 标签，但必须显式写 type="button"，否则在表单里点一下就提交——这是 90% 的“按钮点不动”或“页面意外刷新”的根源。
为什么
<button> 在 <form> 内部不设 type 属性时，浏览器按 HTML 规范将其视为 type="submit"。哪怕你只是想弹个 alert()，没写 type 就等于埋了个雷。
- 常见错误现象：用户回车、点击按钮、甚至焦点在按钮上按空格，都会触发表单提交
- 正确写法：
<button type="button">取消</button>（纯 JS 触发）或<button type="submit">保存</button>（明确提交意图） - 别依赖 JS 阻止默认行为来“补救”，先从语义和属性写对开始
禁用按钮必须用 disabled 属性，不是 CSS
用 opacity: 0.5 或 pointer-events: none 模拟禁用，既不可访问，也不阻止键盘触发（比如空格键仍能激活），还可能被屏幕阅读器忽略。
- 正确方式：
<button type="button" disabled>加载中…</button> - 配合 CSS 单独定义
button:disabled状态：加cursor: not-allowed、降opacity、移除hover/active反馈 - JS 控制启用/禁用时，只操作
element.disabled = true/false，不要手动切 class
重置默认样式才能真正自定义外观
各浏览器对 <button> 有顽固的默认样式：Safari 强制内边距、Firefox 加阴影、Chrome 继承父级字体——直接写 padding 或 background 常常不生效。
立即学习“前端免费学习笔记（深入）”；
- 起步三件套必须加：
appearance: none、-webkit-appearance: none、-moz-appearance: none - 紧接着清掉：
border: none、background: none、font: inherit - 文字居中别只靠
text-align: center；推荐display: flex; align-items: center; justify-content: center - 移动端需加
@media (hover: none) and (pointer: coarse)降级:hover，否则手指按压无反馈
事件绑定优先用 addEventListener，别写 onclick
内联 onclick="doSomething()" 把逻辑硬编码进 HTML，调试难、复用差、无法动态增删事件，还容易因脚本加载顺序导致绑定失败。
- 确保 DOM 已就绪：把 JS 放在
</body>前，或用DOMContentLoaded监听 - 获取元素后绑定：
document.querySelector('button').addEventListener('click', handler) - 批量按钮用事件委托：
document.querySelector('.btn-group').addEventListener('click', e => { if (e.target.matches('button')) {...} }) - 检查是否拿到真实节点：
console.log(buttonEl)不是null才继续
最易被忽略的点：focus 样式不能删。去掉 outline 是可访问性违规，至少保留 outline: 2px solid #007bff 或用 box-shadow 替代，且要确保颜色对比度达标。
