应始终为非提交按钮显式设置 type="button"，因未声明 type 的 button 在 form 内默认为 submit，会触发表单提交并刷新页面；需在 form 上监听 submit 并 preventdefault 才能拦截。
别用没写 type 的 <button></button>，它在表单里默认就是 submit，点一下就刷新页面——这是最常被忽略、也最难排查的坑。
不写 type 属性时，<button></button> 为什么总在提交？
浏览器对未声明 type 的 <button></button> 有明确规范：只要它在 <form></form> 标签内部，一律按 type="submit" 处理。哪怕你只写了 <button>取消</button>，点击也会触发表单提交。
- 现象包括：JS 的
click事件没执行、控制台无报错、页面突然跳转或白屏 - 在 React/Vue 中更隐蔽：组件绑了
onClick，但原生submit事件已先走完 - 修复方式极简单：所有非提交按钮，统一显式写
<button type="button"></button> - 哪怕按钮当前不在
<form></form>里，也建议提前加type——避免后续重构漏改
type="submit" 和 type="reset" 的真实行为边界
它们不是普通点击事件，而是表单专属语义动作，行为受 HTML 表单机制硬性约束。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
type="submit"触发的是submit事件，不是click；仅监听click拦不住提交 - 想拦截，必须在
<form></form>上监听submit并调用event.preventDefault() -
type="reset"只还原 HTML 初始值（比如<input value="default">会变回"default"），不会还原 JS 动态设置的input.value = "new" - 它不触发
change或input事件，依赖这些事件更新 UI 的逻辑完全收不到通知
<button></button> vs <input type="button"> 实际选型依据
现代项目中，<button type="button"></button> 是默认首选，<input type="button"> 几乎没有合理使用场景。
-
<button></button>支持嵌套任意 HTML：<button type="button"><svg></svg>导出</button>；<input>只能靠value显示纯文本 -
<button></button>支持::before/::after伪元素，加图标/状态标记无需额外 DOM；<input>不支持伪元素 -
<button></button>在屏幕阅读器中识别更准，尤其含aria-label或图文组合时 -
<input type="button">唯一现实用途：维护仍需兼容 IE8 或更老版本的遗留系统，且无法重构表单结构
CSS 和 JS 绑定的不可妥协前提
样式失效、事件不响应，往往不是逻辑问题，而是基础配置没做全。
- CSS 必须加
appearance: none;（含-webkit-appearance和-moz-appearance），否则 iOS 按钮圆角/阴影无法覆盖 - 务必重置
border: none;和padding，不同浏览器默认内边距差异极大 - JS 必须用
addEventListener('click', handler)，禁用onclick=""内联写法——CSP 严格模式下会被拦截 - 动态插入的按钮，得在插入后立刻绑定，或用事件委托到稳定父容器上
真正容易被忽略的，是 SSR 渲染时漏掉 type 属性，或者在模板引擎中条件生成按钮时，type 被错误地包裹在 if 分支里而未兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
