最简方案是<button onclick="alert('Hello')">点我</button>，但内联JS不利维护，真实项目应分离逻辑；alert()阻塞执行且不可定制，仅适合调试，交付代码应使用自建弹层或sweetalert2等库。
直接用 <button> 触发 alert() 是最简方案，但要注意浏览器默认行为和语义合规性
为什么不用 <input type="button"> 或 <BUTTON> 大写标签
HTML 标签名不区分大小写，<BUTTON> 能工作只是因为解析器宽容，但所有现代规范和编辑器提示都要求小写 <button>。而 <input type="button"> 缺少子内容能力（比如不能嵌入图标或换行），语义上也不如 <button> 明确。
- 用
<button onclick="alert('Hello')">点我</button>最快，适合原型或临时调试 - 但内联 JS 不利于维护，真实项目应分离逻辑：给
button加id或class，再用document.getElementById().addEventListener('click', ...) - 注意：如果按钮在表单内且没设
type="button"，点击会触发表单提交——这是常见白屏/跳转原因
alert() 的实际限制和替代思路
alert() 是同步阻塞式弹窗，用户不点“确定”就卡死后续 JS 执行，且无法定制样式、按钮文字或关闭方式。它只适合调试或极简提示。
- 移动端 Safari 和部分安卓浏览器会合并连续的
alert()调用，只显示最后一个 - 若需关闭、确认、取消等交互，必须换
confirm()或prompt()，但它们同样阻塞且样式不可控 - 真正可用的方案是自建 DOM 弹层（用
div+ CSS +display: none/block或visibility控制），配合事件委托处理按钮响应
避免踩坑的三个关键点
很多“点不动”问题其实和 HTML 结构或 JS 加载时机有关。
- 确保 JS 代码在
<button>元素之后执行，或包裹在DOMContentLoaded事件里，否则document.getElementById()找不到节点 - 不要给多个按钮用同一个
id——getElementById()只返回第一个匹配项；改用querySelectorAll('.alert-btn')配合循环绑定 - 如果页面用了框架（如 Vue/React），直接操作 DOM 可能被覆盖，应走框架的数据驱动机制，而非硬塞
alert()
真正要弹出可交互、可样式化、不阻塞主线程的对话框，绕不开自己实现或引入轻量库（如 sweetalert2）。原生 alert() 就是个调试遗物，别在交付代码里留它。
