标签可原生响应点击且语义正确，但需显式设置type属性避免误提交；样式重置必加appearance: none及border: none; background: none;，并妥善处理disabled、focus、active等状态以保障可访问性与多端体验。
直接用 <button></button> 标签就能做出可点击的按钮，不需要 JavaScript 也能响应点击（比如提交表单），但默认样式丑、行为不明确——关键得看你要它干什么。
button 标签的基本写法和语义区别
<button></button> 和 <input type="button"> 都能点，但前者支持 HTML 内容（比如图标 + 文字），后者只能靠 value 属性写文本；<button></button> 在表单里默认 type="submit"，不加 type 属性就可能意外提交表单。
- 要纯触发 JS：显式写
type="button" - 要提交表单：用
type="submit"，且确保在<form></form>内 - 要重置表单：用
type="reset"（慎用，用户点了就全清） - 别用
<a></a>模拟按钮，语义错误、键盘焦点和屏幕阅读器体验差
给 button 加基础样式时绕不开的坑
浏览器对 <button></button> 有强默认样式（比如 Firefox 加阴影、Safari 有内边距、所有浏览器都设了 font 继承），直接写 padding 或 border 常常不生效或表现不一致。
- 起步必加：
appearance: none;（配合-webkit-appearance和-moz-appearance） - 重置默认边框和背景：
border: none; background: none;，否则 Safari 会固执地留白边 - 文字对齐别只靠
text-align，按钮是 inline-level 元素，需配line-height或display: flex居中 - 禁用状态要用
button:disabled单独写样式，opacity: 0.5不够——还得加cursor: not-allowed和移除交互
hover / active / focus 状态的实用控制
光有 :hover 不够，用户用键盘 Tab 进入时看不到焦点，触摸屏上 :active 可能一闪而过，这些状态必须显式处理。
-
:focus一定要保留可见轮廓（如outline: 2px solid #007bff;），删掉 outline 是可访问性大忌 -
:active建议用transform: scale(0.98)或改背景色，避免只靠颜色变化（色盲用户难感知） - 移动端要加
@media (hover: none) and (pointer: coarse)降级 hover 效果，不然手指按下去没反馈 - 如果用 JS 控制 loading 状态，别只改文字，加上
disabled属性，防止重复点击
真正难的不是让按钮“看起来能点”，而是让它在各种输入方式（鼠标、键盘、触屏）、各种状态（禁用、加载中、焦点中）、各种环境（暗色模式、高对比度）下行为一致、反馈明确。样式只是表层，属性和状态管理才是按钮稳不稳的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
