button标签必须显式设置type属性，否则在form内默认为submit导致意外提交；禁用按钮必须用disabled属性而非CSS模拟；Safari中appearance: none需配套border和background；hover/active反馈应纯CSS实现。
button 标签必须显式写 type 属性
不写 type 属性，
正确写法只有三种明确场景：
-
type="button"：纯 JS 触发，比如弹窗、切换状态、发 Ajax -
type="submit"：放在<form>内，且你真要提交数据 -
type="reset"：清空当前表单字段（极少用，慎选）
别指望靠 event.preventDefault() 补救，语义错了，键盘用户按空格/Enter 仍会触发提交，屏幕阅读器也会误读。
禁用按钮只能用 disabled 属性
用 opacity: 0.5 或 pointer-events: none 模拟禁用，是典型伪禁用：它既挡不住键盘操作（空格键照样激活），也不被屏幕阅读器识别，还可能让焦点卡死。
立即学习“前端免费学习笔记（深入）”；
真正禁用只有一条路：
- HTML 侧写
disabled属性：<button type="button" disabled>加载中…</button> - CSS 侧只定义
button:disabled状态：cursor: not-allowed+ 降 opacity + 移除 hover 反馈 - JS 控制时只操作
btn.disabled = true/false，不要手动加 class 或改样式
注意：disabled 按钮不会触发 click 事件，也不参与表单序列化，这是浏览器原生保障。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
appearance: none 后必须补 border 和 background
Safari（iOS 16+ / macOS Ventura 起）对 appearance: none 执行极严格：清掉所有原生样式后，若没显式设 border 和 background-color，按钮直接变透明且不可点击——不是渲染异常，是规范行为。
安全写法三步不能少：
-
appearance: none+-webkit-appearance: none+-moz-appearance: none -
border: 1px solid transparent（哪怕你想要无边框，这个透明边框稳住 focus outline 位置） -
background-color: #fff或background-color: transparent（后者需确保父背景可辨识）
漏掉任意一条，在 Safari 上都可能变成“看不见也点不了”的幽灵按钮。
hover 和 active 反馈必须用纯 CSS 实现
别用 JS 绑定 mousedown/mouseup 模拟按压效果——移动端触摸无 mouse 事件，旧版 Safari 不支持 transform: scale()，而且增加不必要的逻辑复杂度。
推荐方案是仅改两样：
-
:hover：微调背景色（如background-color: #3a5a8c） + 轻微减阴影（box-shadow: 0 1px 2px rgba(0,0,0,0.15)） -
:active：再深一度背景 + 阴影收缩（box-shadow: 0 0 2px rgba(0,0,0,0.2)）
重点不是动效多炫，而是让用户手指/鼠标按下瞬间，明确感知“我正按着它”。这点在触屏设备上尤其关键——没有视觉反馈，用户会反复点击。
