button 的 type 属性必须显式声明，否则默认为 submit，易导致表单意外提交；纯交互按钮应设为 type="button"；无障碍需用 aria-hidden 或 aria-label 补充图标语义；禁用态须强化视觉反馈与交互提示。
button 元素的 type 属性必须显式声明
不写 type 属性时，浏览器默认为 type="submit" —— 这在表单内极易引发意外提交。哪怕只是个纯交互按钮（比如展开菜单、触发弹窗），也得明确写成 type="button"。
- 表单中所有未声明
type的<button></button>都会尝试提交表单，即使没写onclick -
type="reset"会清空整个表单字段，慎用；多数场景下应避免 - 使用
type="button"后，JavaScript 绑定事件才真正“干净”，不会被表单默认行为干扰
用 CSS 控制 button 状态比 JS 切 class 更轻量
悬停、聚焦、禁用等状态，优先用伪类而非 JS 动态加 class。CSS 原生支持更稳定，也避免了事件监听器冗余和 class 名冲突风险。
-
:hover和:focus可以同时生效，适合做键盘 + 鼠标双模反馈 -
:disabled样式优先级高于普通规则，但不能覆盖内联style；若需强控制，建议统一用 class 如.btn--disabled - 移动端要注意
:active在 iOS 上延迟明显，可配合-webkit-tap-highlight-color: transparent消除点击灰块
图标按钮里 <i></i> 或 <svg></svg> 必须设 aria-hidden="true"
当按钮文字+图标共存时，屏幕阅读器可能把图标字符（如 Font Awesome 的 <i class="fas fa-share"></i>）也读出来，造成语义污染。
- 给图标容器加
aria-hidden="true"，确保只读按钮文本内容 - 若按钮无可见文字（纯图标），则必须用
aria-label补充说明，例如<button aria-label="分享到微信"><svg>...</svg></button> - 不要依赖
title属性作无障碍替代——它仅在鼠标悬停时显示，对键盘/语音用户无效
禁用按钮的视觉反馈容易被忽略
disabled 状态不只是加灰，还要传递“不可操作”的感知：光标变化、阴影弱化、过渡动画冻结都影响体验。
- 务必设置
cursor: not-allowed，否则鼠标悬停时仍是手型，误导用户 - 禁用状态下移除
:hover和:active效果，否则动画会卡顿或错乱 - 若按钮有背景渐变，禁用时建议转为单色 + 降低 opacity（如
opacity: 0.5），别只改颜色值——人眼对明度变化更敏感
type 缺失、无障碍遗漏、禁用态失真这三处，线上问题复现率最高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
