button默认type为submit，表单内需显式设type="button"防误提交；样式重置须用appearance:none、border:none、background:none三件套；交互状态:hover/:active/:focus/:disabled必须完整定义，兼顾可访问性与移动端适配。
button 默认 type 是 submit，不写就容易误提交
直接写 <button>点我</button>，点一下页面就刷新或发请求——不是 bug，是浏览器规范行为。表单里尤其危险，用户按回车也会触发。
必须显式声明：type="button" 才纯做交互触发；要提交数据，才用 type="submit"，且确保它在 <form> 标签内部。
-
type="reset"仅在表单内有意义，会清空所有输入值，慎用 - 别依赖 JS 的
event.preventDefault()拦截：脚本加载失败或延迟时，提交已发生 - 服务端校验不能代替这个前端约束——提交前拦截成本远低于事后纠错
button 样式重置必须三件套起步
不同浏览器对 <button> 有强 UA 样式：Safari 死守 padding、Firefox 加阴影、Chrome 继承父级 font-size 导致文字忽大忽小。只改 background 或 color 往往无效。
起步必加：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
appearance: none;（补-webkit-appearance: none;和-moz-appearance: none;） border: none;background: none;
文字居中建议用 display: flex; align-items: center; justify-content: center;，比单靠 text-align: center 更可靠。
:hover/:active/:focus/:disabled 必须单独定义
只写 :hover 不够。键盘用户 Tab 进入时看不到焦点，触摸屏上 :active 可能一闪而过，:disabled 若只靠 opacity 模拟，仍可被点击或聚焦。
-
:focus必须保留可见轮廓，比如outline: 2px solid #007bff;；删掉outline是可访问性硬伤 -
:active建议用transform: scale(0.98)或改背景色，避免只靠颜色变化（色盲用户难感知） -
:disabled要同步设cursor: not-allowed;、opacity: 0.6;和pointer-events: none; - 移动端需加
@media (hover: none) and (pointer: coarse)降级:hover效果，否则手指按下去没反馈
别为按钮硬上 Web Component
绝大多数场景下，<button class="btn-primary">提交</button> 配一套 CSS 类就够了。Web Component 封装成本高：
- 要手动同步
disabled、type、name、value - shadow DOM 下伪类可能失效、事件冒泡被截断、焦点管理需额外处理
- 还得代理
click()和focus()方法
只有同时满足「跨 React/Vue/纯 HTML 多技术栈统一使用」且「按钮行为高度定制化」时才值得考虑。
