button标签默认可点击但无行为，需type属性定义功能：button（需js）、submit（表单提交）、reset（清空表单），不写type默认为submit；配合disabled、aria-label、autofocus提升可用性；推荐用class而非内联style；必设hover和focus状态以保障多端可访问性。
button 标签直接写就能用，不需要 JavaScript 也能响应点击（比如配合 type="submit" 或 type="reset"），但默认样式丑、交互弱，得靠 CSS 和少量 JS 补齐。
button 标签基础写法与 type 属性区别
最简写法：<button>点我</button>，浏览器会渲染成可点击按钮，但无实际行为。关键在 type 属性：
-
type="button"：纯触发型，必须配 JS 才有逻辑（推荐显式声明，避免误提交） -
type="submit"：放在<form></form>内时，点击自动提交表单数据到action地址 -
type="reset"：清空当前<form></form>内所有可重置控件（如<input>、<textarea></textarea>）的值
不写 type 时，浏览器默认按 submit 处理——这点常被忽略，导致意外提交表单。
不用 CSS 就能改善的三个小细节
光加 button 标签还不够，这几个属性能立刻提升可用性：
-
disabled：加这个属性就禁用按钮，视觉变灰且无法点击，适合加载中或条件未满足时 -
aria-label：当按钮里只有图标没文字（如<button><svg>...</svg></button>），用它提供屏幕阅读器可读的说明 -
autofocus：页面加载后自动获得焦点，方便键盘用户直接回车触发（慎用，一个页面只该有一个）
注意：disabled 是布尔属性，写成 disabled="disabled" 或仅 disabled 都行，但后者更简洁。
内联 style vs class：初学者该选哪个？
新手容易一上来就写 <button style="background:red;padding:8px">...</button>，短期快，长期难维护。真实建议是：
- 单页小项目、临时调试：用
style直接改，改完再挪进 CSS 文件 - 只要按钮不止一个、或将来可能复用：立刻建
class，比如<button class="btn-primary">提交</button>，然后在<style></style>或外部 CSS 里统一定义 - 别用
font标签套按钮文字——它已被废弃，字体控制全交给 CSS 的font-size和color
另外，<button></button> 默认是 display: inline-block，能设宽高、内外边距，这点比 <a></a> 更可控。
hover 和 focus 状态不能省
按钮没悬停反馈，用户会怀疑它是不是卡了；没焦点样式，键盘操作就完全不可见。哪怕只加两行 CSS：
button {
outline: none;
}
button:hover {
opacity: 0.8;
}
button:focus {
box-shadow: 0 0 0 2px #007bff;
}
这三行代码解决 90% 的交互盲区。注意 outline: none 必须搭配 focus 样式，否则会破坏键盘可访问性。
真正麻烦的不是怎么写按钮，而是忘记它要适配鼠标、键盘、触摸、屏幕阅读器四种输入方式——从第一个 <button></button> 开始就得想这点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
