button 默认 type 为 submit，不声明易误提交；必须显式设 type="button" 才纯触发 js，type="submit" 需在 form 内；css 重置需 appearance: none、border: none、background: none；伪类状态须完整定义以保障可访问性。

button 默认 type 是 submit，不写就容易误提交

在

里放一个没设 type 的 <button></button>，用户点它或按回车，页面立刻刷新或发请求——JS 都没加载完就走了。这不是 bug，是规范行为。

必须显式声明：<button type="button">点我</button> 才纯触发 JS；要提交表单，才用 type="submit"，且确保它在 <form></form> 内部。

• 别依赖 JS 去阻止默认行为：万一脚本失败或延迟，event.preventDefault() 就没机会执行
• type="reset" 仅在表单内有意义，且会清空所有控件值，慎用
• 服务端校验不能代替这个前端约束——提交前拦截比事后纠错成本低得多

CSS 重置 button 样式必须三件套起步

浏览器对 <button></button> 有强 UA 样式：Safari 死守 padding 和 border，Firefox 加阴影，Chrome 继承父级 font-size 导致文字大小飘忽。只写 padding 或 background 往往无效。

起步必加：

• appearance: none;（补 -webkit-appearance: none; 和 -moz-appearance: none;）
• border: none;
• background: none;

文字居中别只靠 text-align: center——<button></button> 是 inline-level 元素，建议用 display: flex; align-items: center; justify-content: center; 或配 line-height 匹配高度。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

:hover/:active/:focus/:disabled 必须单独定义

光写 :hover 不够。键盘用户 Tab 进入时看不到焦点，触摸屏上 :active 可能一闪而过，:disabled 状态若只靠 opacity 模拟，仍可被点击或聚焦。

• :focus 必须保留可见轮廓，比如 outline: 2px solid #007bff;；删掉 outline 是可访问性硬伤
• :active 建议用 transform: scale(0.98) 或改背景色，避免只靠颜色变化（色盲用户难感知）
• :disabled 要同步设置 cursor: not-allowed;、opacity: 0.6; 和 pointer-events: none;
• 移动端需加 @media (hover: none) and (pointer: coarse) 降级 :hover 效果，否则手指按下去没反馈

别为按钮硬上 Web Component

绝大多数场景下，<button class="btn-primary">提交</button> 配一套 CSS 类就够了。Web Component 封装成本高：要手动同步 disabled、type、name、value，处理 shadow DOM 下的伪类失效、事件冒泡截断、焦点管理，还得代理 click() 和 focus() 方法。

只有同时满足以下条件才值得考虑：
– 按钮需跨 React/Vue/纯 HTML 多技术栈统一使用
– 必须强制样式隔离，且不允许外部 CSS 覆盖内部状态
– 需内置国际化文案或动态图标加载逻辑

否则，就是拿锤子砸芝麻——体积涨、调试难、可访问性还容易漏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！