创建普通交互按钮需用，避免默认submit行为；禁用用disabled属性而非CSS；重置样式需appearance:none、border:none、background:none；状态样式须分别定义hover/active/focus/disabled，并兼顾可访问性与移动端体验。
创建普通交互按钮，核心是用 <button></button> 标签并显式设置 type="button"，避免在表单中误触提交。它语义清晰、支持嵌套内容（比如图标+文字），且原生具备可访问性基础。
必须写 type="button"
不写 type 属性时，<button></button> 默认为 submit。哪怕按钮不在 <form></form> 里，某些浏览器或框架也可能触发意外行为。只要不是提交或重置表单，就该明确声明：
<button type="button">弹窗提示</button>- 如果按钮在
<form></form>内但不负责提交，type="button" 不可省略 - 提交用
type="submit"，重置用type="reset"，二者需位于 form 内才生效
禁用状态要用 disabled 属性
视觉灰化、不可点击、不触发事件——这些都由 disabled 属性原生保证。别用 CSS 模拟（如 opacity: 0.5 或 pointer-events: none），否则键盘用户仍能聚焦、屏幕阅读器无法识别状态：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 静态禁用：
<button type="button" disabled>暂不可用</button> - 动态控制：
btn.disabled = true或btn.removeAttribute('disabled') - 禁用后，click 事件不会触发，也不会被表单序列化
样式重置是自定义的前提
浏览器对 button 有强默认样式（Safari 白边、Firefox 阴影、字体继承等），直接加 padding 或 background 常常不生效。起步三步清空：
立即学习“前端免费学习笔记（深入）”；
- 加
appearance: none，同时补-webkit-appearance: none和-moz-appearance: none - 设
border: none和background: none - 文字居中建议用
display: flex; align-items: center; justify-content: center，比单纯text-align: center更可靠
状态样式要单独定义
hover、active、focus、disabled 这四种状态不能只靠一个 :hover 覆盖。可访问性和多端体验要求明确处理：
-
:focus必须保留可见轮廓，例如outline: 2px solid #007bff；删 outline 是可访问性违规 -
:active建议加transform: scale(0.98)或背景色变化，避免仅靠颜色（色觉障碍用户难感知） -
:disabled单独写：加cursor: not-allowed、opacity: 0.6，并移除所有交互反馈 - 移动端需用
@media (hover: none) and (pointer: coarse)降级 hover 效果，否则手指按压无反馈
