应使用 元素实现快捷键提示面板，它原生支持模态行为、焦点管理与 showmodal() 控制，比手写 div + aria-modal 更轻量且可访问性更好。
快捷键提示面板该用什么 HTML 结构
用 <dialog></dialog> 最合适，它原生支持模态行为、焦点管理与 showModal() 控制，比手写 div + aria-modal 更轻量且可访问性更好。若需兼容 Safari 15.4 以下（不支持 <dialog></dialog>），才降级为带 role="dialog" 的 div，并手动处理 Escape 关闭和焦点锁。
-
<dialog></dialog>默认不渲染在 DOM 主流中，避免影响布局流，也不需要额外position: fixed - 必须配
<form method="dialog"></form>或显式调用close()，否则点击遮罩不会自动关闭 - 不要给
<dialog></dialog>设display: none—— 它靠open属性控制显隐，设display会破坏可访问性状态
键盘事件监听怎么绑定才不冲突
监听 keydown 时，优先用 event.ctrlKey / event.metaKey 判断修饰键，而不是依赖 event.key 值 —— 比如 Ctrl+/ 在英文键盘是 /，但法语键盘可能是 ?，而 ctrlKey 始终可靠。
- 在
document上监听，而非某个按钮或输入框内，确保全局生效 - 加
event.preventDefault()阻止浏览器默认行为（例如Ctrl+T开新页），但仅对明确注册的快捷键做，别无差别拦截 - 避开已由浏览器或编辑器占用的组合键：如
Ctrl+S（保存）、Ctrl+R（刷新）、Ctrl+Tab（切标签）—— 用户会困惑你的面板为何抢了系统功能
快捷键列表怎么动态生成又保持语义清晰
别用纯文本拼接，用 <dl>
<dt></dt>
<dd></dd>
</dl> 结构，既利于屏幕阅读器识别「快捷键」与「功能」的对应关系，也方便 CSS 精确控制缩进和分隔。
-
<dt></dt>放快捷键，内部用<kbd></kbd>包裹每个键：比如<kbd>Ctrl</kbd>+<kbd>K</kbd>，浏览器默认有等宽、浅灰背景样式 -
<dd></dd>放说明文字，避免用“打开搜索框”这种模糊描述，改用“聚焦到全局搜索输入框”，明确动作目标 - 如果快捷键支持多平台（如 Windows 用
Ctrl，macOS 用Cmd），用 JS 动态替换<kbd>Ctrl</kbd>为<kbd>⌘</kbd>，别硬写两套 HTML
为什么按 Ctrl+? 后面板一闪就消失
这是最常踩的坑：没阻止事件冒泡，导致 keydown 触发后，紧接着触发了 keyup 或点击穿透，让 <dialog></dialog> 被意外关闭；或者快捷键逻辑里误调了 dialog.close()。
- 检查是否在快捷键处理函数末尾写了
dialog.showModal()后又立刻执行了dialog.close()（比如放在了某个 toggle 函数里，逻辑分支没兜住） - 确认没有其他监听器在
document上对click做了全局关闭（例如点击任意处关闭弹窗），这类逻辑要加event.target === dialog判断 - Safari 对
<dialog></dialog>的showModal()调用有微小延迟，若紧接着操作 DOM（比如往里面 append 内容），可能因未渲染完成导致尺寸计算错误 —— 改用requestAnimationFrame延迟插入内容
<button>?</button> 或 <button>快捷键</button>，且该按钮的 accesskey 设为 "h" 或 "k"，让键盘用户能先摸到入口。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
