按钮热区必须≥44px×44px，禁用状态需同步disabled属性、aria-disabled="true"及样式，移动端点击延迟用touch-action: manipulation解决，按钮必须显式声明type属性。
按钮热区必须 ≥44px × 44px 才能可靠点击
iOS 和 Android 系统对可触控区域有硬性要求：小于 44px × 44px 的按钮，系统会判定为“难操作”，导致用户反复点不中，误以为页面失灵或按钮无效。
别只靠 padding 和 font-size 勉强撑开尺寸——这些在高 DPR 屏幕上可能被缩放抵消。直接设 min-width: 44px 和 min-height: 44px，并用 box-sizing: border-box 确保内边距不撑出额外空间。
- 若按钮文字短（如“→”），用
padding补足热区，但必须配合min-height - 图标按钮务必包裹在足够大的容器里，
<button><svg>...</svg></button>本身无尺寸保障 - 绝对不要用
transform: scale()模拟放大——它不扩大实际点击区域，只是视觉拉伸
禁用状态必须同步 disabled 属性与 aria-disabled="true"
仅写 button:disabled { opacity: 0.4; } 是危险的：键盘用户仍能 Tab 进去，屏幕阅读器读不出“已禁用”，色觉障碍者可能完全看不出区别。
禁用逻辑必须三重锁定：
- HTML 层：显式加
disabled属性（触发原生禁用行为） - 语义层：同步加
aria-disabled="true"（供辅助技术识别） - 样式层：组合使用
opacity+background-color: #cccccc+cursor: not-allowed+ 文字提示（如“提交中…”）
特别注意：用 JS 动态设置 disabled 时，别漏掉 aria-disabled，否则 React/Vue 组件里容易遗漏。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端点击延迟必须用 touch-action: manipulation 解决
300ms 点击延迟不是“卡”，而是浏览器在等双击缩放判定。现代解法不是 FastClick，而是 CSS 的 touch-action: manipulation。
它告诉浏览器：“此处只需响应点击和纵向滚动”，不干扰页面滚动，也不需要 JS 注入。
- 只加在可点击元素上，例如
button、a[href]、带onclick的div；别设在body或全局容器上 - 原生
<button></button>默认已有该行为，但如果你写了display: inline或touch-action: auto，就得手动覆盖 - IE10/11 需补前缀：
-ms-touch-action: manipulation - 和 FastClick 共存会冲突——检查控制台是否还存在
window.FastClick，有就删
type 属性决定语义权重，影响视觉优先级和表单行为
没写 type 的按钮，在 Safari 和旧版 Chrome 中默认是 submit。结果就是：视觉上像次级按钮，行为上却偷偷提交表单——这是线上最常见的“点错就跳页”根源。
主操作（如“确认付款”“下一步”）必须用 type="submit"，哪怕不在 <form></form> 里——它自带更高视觉权重、支持 form.submit() 调用、且能被自动聚焦管理。
- 取消/返回类按钮统一用
type="button"，配浅灰背景或线框，避免抢焦点 -
type="reset"仅用于表单重置，别拿来当“清空搜索”用（语义不符，屏幕阅读器会误读） - 所有按钮都显式声明
type，不依赖浏览器默认
最易忽略的是：按钮视觉层级不是靠加阴影或调亮颜色堆出来的，而是从 type 开始就埋下的语义链。改一个属性，可能就解决了用户“总觉得点不到重点”的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
