button 默认 type 为 submit，需显式设 type="button" 防误提交；禁用必须用 disabled 属性；重置样式需 appearance: none、border: none、background: none；状态样式（hover/active/focus/disabled）须单独定义；事件绑定推荐 addeventlistener。
button 标签默认行为和 type 属性必须显式设置
不写 type 属性时，<button></button> 在表单内默认是 type="submit"，点一下就刷新页面或发请求——这是最常踩的坑。哪怕你只是想弹个 alert()，也得写成 <button type="button">点我</button>。
常见错误现象：<form></form> 里放了个没设 type 的 <button></button>，JS 还没加载完，用户一按回车或点击，页面直接提交并跳走。
- 要纯触发 JS：用
type="button" - 要提交表单：用
type="submit"，且确保在<form></form>内 - 禁用状态必须用
disabled属性，不是靠 CSS 模拟（如opacity: 0.5或pointer-events: none）
重置默认样式才能真正自定义外观
浏览器对 <button></button> 有强默认样式：Safari 固执留白边、Firefox 加阴影、所有浏览器都继承父级 font，直接写 padding 或 border 常常不生效。
起步必加三件套：
-
appearance: none;（同时补-webkit-appearance: none;和-moz-appearance: none;） border: none;background: none;
文字居中别只靠 text-align: center，按钮是 inline-level 元素，建议用 display: flex; align-items: center; justify-content: center; 或配 line-height。
hover / active / focus / disabled 状态必须单独处理
光写 :hover 不够。键盘用户 Tab 进入时看不到焦点，触摸屏上 :active 可能一闪而过，这些状态必须显式控制。
-
:focus一定要保留可见轮廓，比如outline: 2px solid #007bff;；删掉outline是可访问性大忌 -
:active建议用transform: scale(0.98)或改背景色，避免只靠颜色变化（色盲用户难感知） -
:disabled要单独写样式：cursor: not-allowed;+opacity: 0.6;+ 移除所有交互反馈 - 移动端需加
@media (hover: none) and (pointer: coarse)降级:hover效果，否则手指按下去没反馈
用 addEventListener 绑定事件比 onclick 更可靠
内联 onclick="xxx()" 会污染 HTML 结构，也不利于调试和复用。推荐用 JS 获取元素后绑定：
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function(e) {
e.preventDefault(); // 表单内 submit 按钮需要时才加
console.log("按钮被点击");
});
批量绑定多个按钮时，用 querySelectorAll(".action-btn") 配合 forEach 更安全；服务端渲染场景下，初始状态就该带 disabled 属性，别等 JS 加载完再设。
真正难的不是让按钮“看起来能点”，而是它在各种输入方式（鼠标、键盘、触屏）、各种状态（禁用、加载中、焦点中）、各种环境（暗色模式、高对比度）下行为一致、反馈明确。样式只是表层，属性和状态管理才是按钮稳不稳的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
