用 + 语义化实现快捷键面板，内置展开/收起与键盘支持；内部用 列键组合，CSS 控制样式；Escape 关闭需轻量 JS 聚焦回 summary。
怎么用 HTML + CSS 快速搭出键盘快捷键帮助面板
直接用语义化 HTML 结构 + 纯 CSS 控制显隐，不依赖 JS 就能实现基础快捷键面板。核心是 details + summary 组合——它原生支持点击展开/收起，且可被键盘（空格、回车）触发，无障碍友好。
- 用
<details></details>包住整个帮助内容，<summary></summary>作为触发标题（比如“快捷键帮助”） -
summary里别写纯图标或纯文字，建议组合：例如<summary>⌨️ 快捷键帮助（按 / 打开）</summary> - 内部用
<dl> <dt></dt> <dd></dd> </dl>列快捷键，比表格更语义、更易缩放和适配屏幕 - 避免用
display: none或visibility: hidden手动控制显隐——这会让details失去原生焦点和键盘支持
为什么不能只靠 JavaScript 监听 keydown 来显示面板
单纯用 document.addEventListener('keydown', ...) 捕获 / 键再 showModal() 或 classList.add('open')，会踩三个坑：
- 输入框（
<input>、<textarea></textarea>）中按/时，你不该触发面板——但 JS 默认无法区分上下文，得手动排除event.target.matches('input, textarea') - 没有键盘焦点管理：面板弹出后，焦点没自动落到第一个可交互元素（比如关闭按钮），键盘用户无法继续操作
- 缺少
Escape关闭逻辑，或关闭后焦点没回到触发点，破坏导航流 - 移动端软键盘无
/键，硬绑定会失效；而details的点击触发天然兼容触屏
快捷键列表怎么写才清晰又可维护
别堆砌一堆 <div class="row">
<span class="key">Ctrl+S</span><span class="desc">保存</span>
</div>。用语义化标签，CSS 控制对齐，后期加新快捷键、改样式、做响应式都省事。
-
<dt></dt>放快捷键，里面用<kbd></kbd>标签包裹单个键或组合键：<dt> <kbd>Ctrl</kbd>+<kbd>S</kbd> </dt> -
<dd></dd>放说明，保持一句讲清用途，不加“可以”“能够”等模糊词 - Mac 用户需要
Cmd替代Ctrl，不要写死——用 CSS 的@media (prefers-reduced-motion: reduce)不行，得靠 JS 检测navigator.platform或navigator.userAgent动态替换，但静态页面建议并列写：<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>S</kbd>
- 避免在列表里塞太多“仅在编辑模式下生效”这类条件说明——统一提前提醒，或用
title 属性补充
容易被忽略的键盘焦点与可访问性细节
很多人以为“能按空格打开、按 Escape 关闭”就完事了。其实真正卡住用户的，是焦点链断裂。
-
details展开后，summary仍是焦点目标，但用户想用 Tab 进入列表？得确保dl里第一个dt或关闭按钮有tabindex="0"，且 CSS 没禁用:focus-visible - 按 Escape 关闭时，焦点必须回到
summary，否则键盘用户会“掉进空白里”。纯 HTML 不支持 Escape 自动关闭，得加轻量 JS：details.addEventListener('keydown', e => e.key === 'Escape' && details.removeAttribute('open')) - 如果面板里有链接或按钮，它们的
href或type必须明确，不能靠 JS 冒泡处理——否则屏幕阅读器读不出可操作性 - 别给
summary加role="button"：它已是可访问按钮角色，重复声明反而干扰
最麻烦的不是写出来，而是测试时发现 Mac Safari 下 kbd 样式塌陷、Windows NVDA 读不出 details 的展开状态——这些得真机+真实读屏器过一遍，截图或录屏都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
