html中语义最清晰的按钮是标签，它支持嵌套内容、键盘操作和无障碍访问；应显式设置type属性（如type="button"），禁用时用disabled属性而非css模拟，并确保文案明确、图标配aria-label。
用 <button></button> 标签定义按钮，不是 <input type="button">
HTML 中最直接、语义最清晰的按钮元素是 <button></button>。它原生支持嵌套内容（比如图标 + 文字）、默认可聚焦、可被键盘操作（空格/回车触发），且无障碍支持更好。而 <input type="button"> 是历史遗留写法，不能包含子元素，样式和行为受限更明显。
常见错误现象：<input type="button" value="提交"> 看似能用，但一旦你想在按钮里加 <svg></svg> 或换行文字，就直接失效；另外在某些旧版 IE 中，<button></button> 的 type 属性默认是 submit，不显式声明容易误触表单提交。
-
<button></button>必须写type="button"（非表单内）或type="submit"/type="reset"（表单内），否则可能意外提交 - 避免用
<div onclick="..."> 模拟按钮——它不可聚焦、不响应键盘事件、屏幕阅读器无法识别为按钮 <li>如果必须兼容极老环境（如 IE6–7），才考虑降级用 <code><input type="button">，但现代项目基本不用 -
type="submit"：表单内默认行为，会触发submit事件，可被回车键激活 -
type="button"：无默认行为，完全依赖 JS 控制，适合模态框关闭、切换标签页等 -
type="reset"：仅用于表单，点击后重置所有控件到初始值（慎用，用户常误点） - 省略
type属性时，浏览器按规范默认为submit，不是“无行为” -
disabled是布尔属性，写disabled或disabled="disabled"效果一样，推荐简写 - 动态禁用/启用，用 JS 操作
element.disabled = true/false，不要操作classList或内联样式模拟 -
disabled按钮内的子元素（如<span></span>、<svg></svg>）也会继承不可交互状态，无需额外处理 - 注意：被
disabled的按钮不会触发click、focus、keydown等事件，这点和pointer-events: none不同 - 纯图标按钮必须加
aria-label，例如<button aria-label="删除"><svg>...</svg></button> - 如果按钮文本是“保存”，但当前是“保存中”，请把文案改成
<button>保存中…</button>，而不是只变图标或加 loading 动画 - 避免用颜色单独表示状态，比如“红色=危险操作”，应配合文字（“删除账户”）或图标（
<svg></svg>垃圾桶） - 按钮文案动词优先，避免“点击此处”“这里”，直接说“提交”“导出 CSV”“重试”
按钮的 type 属性决定行为，不是靠 JS 绑定
按钮是否提交表单、重置表单、还是纯交互，由 type 属性控制，而不是靠 onclick 或 JS 事件监听来“定义”它是什么。这是很多人混淆的起点：以为绑了 click 就是按钮，其实语义和行为是分离的。
使用场景举例：在 <form></form> 内，<button type="submit"></button> 点击会触发表单提交（即使没写 JS）；而 <button type="button"></button> 不会，哪怕它长一样、样式一样。
立即学习“前端免费学习笔记（深入）”；
jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素，包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置，同时你也可以自己定义这些图片上方的元素出现时的动画特效
禁用按钮要用 disabled，别只靠 CSS 或 JS 阻断
视觉上灰掉一个按钮，不代表它真的不可用。仅用 opacity: 0.5 或移除 onclick，用户仍可通过键盘聚焦并按空格触发，或者用 DevTools 删除 class/属性绕过限制。
正确做法是用原生 disabled 属性：<button disabled>加载中…</button>。它同时做到三件事：视觉禁用、无法聚焦、无法触发任何事件。
按钮内容与可访问性：别只靠颜色或图标传达状态
一个带 <svg></svg> 的按钮，如果没文字、没 aria-label，屏幕阅读器用户根本不知道它干啥。同样，“×” 图标关模态框，对色觉障碍者可能看不出是关闭动作。
实际开发中，按钮的可理解性比美观更重要。尤其在工具类、后台系统中，用户靠快速扫视识别功能，不是靠悬停提示。
按钮看似简单，但语义、行为、状态、可访问性全堆在几个属性里。漏掉 type、乱用 disabled、忽略屏幕阅读器，问题往往上线后才暴露，而且修复成本比写的时候高得多。
