alert()是JavaScript方法而非HTML标签，用于触发原生阻塞式警告弹窗，需配合DOM加载完成使用，现代项目中应被自定义modal替代。
弹窗警告用 alert()，不是 HTML 标签
很多人搜“HTML 对话框标签”，以为存在像 <dialog> 那样的标签能直接弹出警告框——但 alert() 是 JavaScript 方法，不是 HTML 元素。浏览器里真正能触发原生警告弹窗的，只有 alert()、confirm() 和 prompt() 这三个函数，它们都属于 window 对象，无需额外引入。
常见错误现象：<dialog> 写了但没弹出来，或者加了 open 属性仍不可见——因为 <dialog> 默认不自动显示，必须配合 JS 调用 .showModal() 或 .show() 才生效，它和 alert() 完全是两回事。
-
alert("Hello")会阻塞后续 JS 执行，直到用户点“确定” - 它不能定制样式、按钮文字或关闭方式，纯属调试/简单提示用
- 现代前端项目中基本被自定义 modal 替代，但写 demo 或快速验证逻辑时最直接
alert() 在 index.html 中怎么加才有效
必须确保 JS 代码在 DOM 加载完成后执行，否则可能因元素未就绪而失效（虽然 alert() 本身不依赖 DOM，但若放在事件监听里就容易出问题）。
推荐写法：把脚本放在 </body> 前，或用 DOMContentLoaded 监听：
立即学习“前端免费学习笔记（深入）”；
<script>
// 方式一：直接执行（适合简单场景）
alert("页面加载完成");
// 方式二：绑定到按钮点击（更常用）
document.getElementById("warnBtn").onclick = function() {
alert("你点了警告按钮");
};
</script>
- 如果脚本写在
<head>里又没加defer，且调用了document.getElementById，大概率报Cannot read property 'onclick' of null -
alert()无返回值，别把它赋给变量或用于条件判断 - 移动端 Safari 对频繁
alert()有拦截，连续调用可能静默失败
<dialog> 不是警告框，但可以模拟更可控的对话框
如果你真需要可样式化、可交互、不阻塞 JS 的“弹窗”，<dialog> 是 HTML5 原生方案，但它默认不可见，也不自带警告语义。
基础用法：
<dialog id="myDialog">
<p>这是一条重要提示</p>
<button onclick="this.closest('dialog').close()">确认</button>
</dialog>
<script>
document.getElementById("myDialog").showModal(); // 必须显式调用
</script>
-
showModal()会让背景变灰、聚焦 dialog，按 Esc 可关闭；show()则无遮罩、不拦截背景操作 - IE 完全不支持，Edge 79+、Chrome 33+、Firefox 53+ 支持，Safari 15.4+ 才支持
showModal() - 没有内置“警告图标”或“确定/取消”按钮，所有 UI 和逻辑都要自己写
为什么别用 alert() 做用户提示
它破坏用户体验：阻塞主线程、无法键盘操作、不兼容屏幕阅读器、样式完全不可控。真实项目里，哪怕只改一行字，都该用轻量级 modal 库（如 dialog-polyfill）或手写 CSS + JS 控制的 <div>。
- SEO 和自动化测试中，
alert()会导致 Puppeteer/Cypress 等工具卡住，必须显式处理对话框（比如page.on("dialog", ...)） - 部分浏览器扩展（如广告屏蔽器）会禁用
alert()，导致逻辑中断 - 如果只是想“提醒用户保存”，用顶部 banner 或 toast 更合适；真要中断流程，应引导用户点击明确按钮，而非依赖
ok确认
真正需要弹窗警告的场景极少，多数时候是误把“视觉提示”当成了“阻塞式警告”。先想清楚：用户点了确定之后，下一步是什么？这个动作是否真的必须中断当前操作？
