1. HTML dialog 标签的用途到底是什么？
1.1 语义与无障碍的核心
HTML dialog 标签的用途到底是什么，核心在于提供原生对话框的语义，使屏幕阅读器能够识别这是一个独立的对话框，从而提升无障碍性和用户体验。
此外，dialog 提供的自动焦点管理与遮罩行为，帮助开发者快速实现可访问的对话交互，降低自定义实现的复杂度。语义化的对话框也有利于搜索引擎理解页面结构，提升页面的可读性与可维护性。
1.2 模态与非模态的行为
模态对话框意味着用户必须在对话框内完成交互才可返回页面，浏览器通常会提供背景遮罩并限制焦点。
相对地，非模态对话框不会阻塞背景页面交互，适用于通知、提示等场景。通过 dialog 的 open 状态与 showModal()、show() 方法，开发者可以灵活切换模态与非模态行为，以实现更丰富的用户体验。
2. 基础用法：HTML dialog 标签的最简单示例
2.1 基本结构
最小可用的对话框结构包含一个 <dialog> 标签和内部内容，通常配合一个 <form method="dialog"> 来处理返回值。
在该结构中，标题、文本、按钮、以及可选的表单字段都可以放入对话框，但核心是 dialog 标签本身对话框的语义与行为的承载。
<dialog id="basicDialog"><h2>基础对话框</h2><p>这是一个简单的对话框示例。</p><form method="dialog"><button value="cancel">取消</button><button value="ok" autofocus>确定</button></form>
</dialog>
2.2 打开与关闭的基本控制
显示对话框的基本方法包括 dialog.show() 与 dialog.showModal()，前者平铺显示，后者触发模态行为，阻断背景交互。
通过 关闭对话框可以使用 dialog.close()，也可以让表单的提交自动结束对话框并返回值。
const dlg = document.getElementById('basicDialog');
document.getElementById('openBtn').addEventListener('click', () => {dlg.showModal(); // 或 dlg.show();
});
document.getElementById('closeBtn').addEventListener('click', () => {dlg.close('userClosed');
});
3. 实现可用对话框的完整教程
3.1 原生对话框的可访问性要点
要实现可用对话框，首先要理解原生 dialog 的可访问性优势：它会被屏幕阅读器识别为独立窗口，提供aria-labelledby、aria-describedby 的支持，帮助描述对话框的内容。
如果在同一页面中混合自定义模态实现，仍应确保对话框获得焦点进入与回退，以及在关闭时恢复原有焦点，避免对键盘导航造成困扰。
3.2 焦点管理与 Esc 键处理
焦点管理是实现可用对话框的关键：打开对话框后将焦点设置到对话框内的第一可交互元素，并在关闭时返回到触发按钮或上一个焦点。
Esc 键关闭是用户的常用期望之一，因此需要监听按键事件并在对话框打开时触发 dialog.close()。下面是一个简单的实现示例。
const d = document.getElementById('confirmDialog');
document.addEventListener('keydown', (e) => {if (e.key === 'Escape' && d.open) {d.close();}
});
3.3 回退方案与 Polyfill
并非所有浏览器都原生支持 <dialog>，此时应提供回退方案。使用dialog polyfill 可以让旧浏览器也具备对话框的行为。
通过在页面中引入 polyfill，并在脚本中进行注册，即可让自定义实现具备类似原生对话框的行为。
<!-- 引入 polyfill 文件（示例） -->
<link rel="stylesheet" href="dialog-polyfill.css">
<script src="dialog-polyfill.js"></script>
<script>var dialog = document.querySelector('dialog');if (!dialog.showModal) {dialogPolyfill.registerDialog(dialog);}
</script>
3.4 完整示例：表单对话框与返回值
一个完整的示例通常包含表单提交模式，通过 method="dialog" 的表单来决定对话框的返回值，开发者可以通过dialog.returnValue 获取用户选择。
<dialog id="confirmDialog"><form method="dialog"><p>请确认继续此操作吗？</p><menu><button value="cancel">取消</button><button value="ok" autofocus>确定</button></menu></form>
</dialog><button id="openConfirm">打开对话框</button><script>const confirmDialog = document.getElementById('confirmDialog');document.getElementById('openConfirm').addEventListener('click', () => {confirmDialog.showModal();});confirmDialog.addEventListener('close', () => {console.log('返回值:', confirmDialog.returnValue);});
</script>
