必须显式设type属性：type="button"用于纯交互，type="submit"触发表单提交，type="reset"还原初始值；不写type默认为submit，易导致意外提交。
HTML按钮不是写个 <button> 就完事——样式错位、点击无响应、表单提交失控，八成出在属性或上下文没对齐。
button 的 type 属性到底该选哪个？
不设 type 或设成 type="button" 最安全；设成 type="submit" 会触发最近的 <form> 提交，哪怕你只是想做个纯交互按钮；type="reset" 极少用，一按就清空整个表单，容易误触。
- 独立操作按钮（如“复制文本”“展开详情”）→ 必须写
type="button" - 表单内确认提交 → 显式写
type="submit"，别依赖默认行为 - 嵌套在
<form>里的按钮，没写type就等同于submit，这是浏览器规范，不是 bug
禁用按钮后，为什么还能被 focus 或键盘触发？
disabled 属性会让按钮视觉灰化、鼠标不可点，但它不会自动移除焦点能力，尤其在键盘导航场景下，Tab 键仍可能停在它上面，再按 Enter 有时还会触发（取决于浏览器和事件绑定方式）。
- 禁用时加
tabindex="-1"可主动排除键盘焦点 - 监听
click事件前先检查event.target.disabled，双重保险 - 用 CSS 配合
button:disabled { pointer-events: none; }能堵住部分意外穿透
用 <a> 模拟按钮，什么时候可行？
纯跳转链接（比如“返回首页”“打开帮助文档”）用 <a href="/help"> 更语义正确，也天然支持右键新标签页、书签等功能；但凡涉及 JavaScript 交互（如弹窗、状态切换、API 调用），就该用 <button> ——<a> 缺少 disabled 原生支持，且 role="button" + 手动处理键盘事件（Enter/Space）成本高、易漏。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 跳转 URL →
<a href="...">，别硬套button - 执行 JS 动作 →
<button type="button">，哪怕它长得像链接 - 如果必须用
<a>做按钮（比如 CMS 限制），至少补上role="button"和tabindex="0"，并监听keypress事件
按钮文字换行或溢出时，CSS 怎么稳住？
默认 button 是 inline-block，内容撑宽后容易破坏布局；设 width 又可能截断文字。关键是控制内部换行和省略逻辑。
- 强制单行 + 省略号：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 允许换行但限制高度：
white-space: normal; max-height: 48px; line-height: 24px; overflow: hidden; - 避免文字被压缩：
button { font-size: inherit; line-height: normal; }（重置某些 UA 样式干扰）
按钮的“小”背后是表单流、可访问性、事件冒泡三层逻辑交织——改一个属性，常要同步看 HTML 结构、JS 绑定、CSS 盒模型三处。别只盯着 class 名改样式。
