用<button>写可用按钮需重置默认样式（如border: none; background: transparent;），必设type属性（button/submit），支持流内容（可嵌<img>/<svg>但不可嵌<div>），注意disabled、遮挡及JS执行时机问题，优先于<input type="button">。
怎么用 <button> 写一个可用的按钮
直接写 <button>点击我</button> 就能生成按钮，但浏览器默认会给它加边框、背景色和内边距，不同浏览器渲染略有差异。实际项目里建议立刻重置样式，否则在表单里和其他元素对不齐。
- 别依赖默认样式，至少加
border: none; background: transparent;再自定义 - 必须设
type属性：用type="button"防止意外提交表单；type="submit"仅在<form>内且真要提交时才用 - 没有
name或value的<button>在表单提交时不会传值，这点和<input type="button">不同
<button> 里能放什么内容
它支持「流内容」（flow content），比 <input type="button"> 自由得多：可以嵌套 <img>、<span>、甚至 <svg>，但不能放 <div> 或其他块级元素（会触发 HTML 解析纠错，可能打乱结构）。
- 常见错误：往里面塞
<div>加载中...</div>→ 浏览器会自动把</div>提前闭合，导致 DOM 错乱 - 图标+文字组合推荐用
<span>包裹文字，<svg>单独写，方便用 CSS 控制间距和垂直对齐 - 如果内容是纯文本，注意空格和换行会被压缩成一个空格；想保留格式得用
white-space: pre;
点击没反应？检查这三件事
按钮不可点击，90% 不是代码写错，而是被遮挡、禁用或事件绑定失效。
- 看控制台有没有报错：
TypeError: Cannot read property 'addEventListener' of null→ 说明 JS 找不到这个<button>，多半是脚本执行太早，DOM 还没加载完 - 检查是否加了
disabled属性：哪怕只是disabled=""或disabled="false"，都会让按钮失效（布尔属性有就生效，值是什么无关） - 用开发者工具检查
pointer-events: none或上层元素设置了z-index盖住了它 —— 特别容易发生在弹窗、固定定位导航栏下面
和 <input type="button"> 到底选哪个
除非要兼容 IE8 及更老版本，否则一律用 <button>。它语义清晰、内容灵活、可访问性更好（屏幕阅读器能读出全部子内容），而 <input> 按钮只能写纯文本，还容易在某些 CSS 重置后高度异常。
立即学习“前端免费学习笔记（深入）”；
-
<input type="button">的value是显示文本，也是提交时的值；<button>的文本内容是显示值，value属性才是提交值（不写就不传） - 用 CSS 设置宽高时，
<button>默认box-sizing: border-box，<input>在部分旧浏览器里是content-box，容易导致尺寸计算偏差 - 如果按钮要支持键盘操作（空格/回车触发），
<button>原生支持；<input>虽然也能响应，但焦点样式和可访问性标签（aria-label）处理起来更麻烦
最常被忽略的是 disabled 状态下的颜色和光标 —— 浏览器默认灰掉但不改 cursor，用户可能以为还能点。记得加 button:disabled { cursor: not-allowed; }。
