HTML按钮的type属性必须显式声明，否则默认为submit，易导致意外表单提交；其他类型需明确设为button或reset；disabled属性应直接操作而非setAttr；按钮支持内联内容但需注意语义与可访问性。
HTML按钮的type属性为什么必须显式写？
不写 type 属性时，浏览器默认是 submit，点一下就可能意外提交表单——尤其在 <form> 里放多个按钮却只想要一个提交时，其他按钮必须明确写成 type="button" 或 type="reset"。
-
type="submit"：触发表单提交，会找最近的父级<form> -
type="button"：纯点击响应，啥也不干，适合绑定 JS 逻辑 -
type="reset"：重置表单字段为初始值（慎用，用户点了很难挽回）
常见错误现象：Uncaught TypeError: Cannot read property 'submit' of null 这类报错往往不是 JS 写错了，而是按钮没加 type="button"，结果浏览器试图提交一个根本不存在的 <form>。
disabled状态怎么控制才可靠？
用 disabled 属性禁用按钮最直接，但要注意它会让按钮完全失去焦点、不触发 click 事件，且不会被表单提交（哪怕它是 submit 类型）。
- JS 动态控制：用
btn.disabled = true，别用btn.setAttribute('disabled', '')—— 后者虽然也生效，但移除时得用removeAttribute，容易漏掉 - 样式同步：
button:disabled可以加灰、降低 opacity，但部分旧版 Safari 对:disabled伪类支持不稳定，建议同时加 class 如is-disabled - 别只靠样式“看起来”不可点：用户可能用键盘 Tab 切入并回车，必须用原生
disabled属性拦截
按钮内能放什么内容？img、span、svg 都行吗？
可以，<button> 是 可替换的内联元素，支持几乎所有 HTML 内容，包括 <img>、<svg>、<span>，甚至 <div>（但语义上不推荐嵌套块级元素）。
立即学习“前端免费学习笔记（深入）”；
- 图标按钮常见写法：
<button type="button"><svg aria-hidden="true">...</svg> 删除</button>，记得加aria-hidden="true"避免屏幕阅读器重复读图标 - 避免空按钮：
<button></button>在部分浏览器中高度塌陷或点击热区异常，至少留个零宽空格min-width - 不要把交互逻辑塞进子元素：比如在按钮里放一个
<a href="#">，会导致点击行为冲突，统一用按钮本身处理
按钮点击后如何防止重复提交？
前端防重最简单有效的方式，就是点击后立刻 disabled 按钮，并在请求完成后再恢复——但要注意恢复时机和异常兜底。
- 别只在
then里恢复：catch分支也得恢复，否则失败后按钮永远卡死 - 服务端依然要校验：前端禁用只是体验优化，不能替代幂等设计或后端防重 Token
- loading 状态建议同步更新 UI：
btn.textContent = '提交中...'; btn.disabled = true;，别只改 class
容易被忽略的是：如果按钮在表单里且用了 type="submit"，JS 中阻止默认行为（event.preventDefault()）后，必须手动控制 disabled，否则点击仍可能触发默认提交流程。
