快捷键提示必须用 <kbd> 而非 <code>，修饰键与主键应分 <kbd> 包裹并用普通加号连接，需通过 JS 动态替换 Mac 平台的 Ctrl/Cmd 等符号，并配合 <dl> 结构确保可访问性。
用 <kbd> 而不是 <code> 做快捷键提示
快捷键提示必须用 <kbd>，不是 <code>。<code> 是标记代码片段的语义标签，浏览器默认样式是等宽字体+浅灰背景，但没有键盘按键的视觉暗示；<kbd> 才是专为“用户输入的按键”设计的语义标签，主流浏览器（Chrome/Firefox/Safari）都自带类似物理按键的浅灰圆角边框、内阴影和紧凑内边距，视觉上更可信。
常见错误是写成：
<code>Ctrl</code>+<code>K</code>——这会让 Ctrl 和 K 看起来像两段独立代码，而非组合键。正确写法是：<code><kbd>Ctrl</kbd>+<kbd>K</kbd>。</p> <H3><code><kbd>嵌套与组合写法要符合用户直觉
修饰键（Ctrl/Cmd/Alt/Shift）和主键应分开展示，但保持视觉连贯。不要把整个组合塞进一个 <kbd> 里，比如 <kbd>Ctrl+K</kbd> 是错的——它丢失了“按住 Ctrl 再按 K”的操作节奏感。
-
<kbd>Ctrl</kbd>+<kbd>K</kbd>：标准写法，加号用普通文本，不包裹 -
<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd>：多修饰键同理 - 需要表示“同时按下”，可用
<span aria-hidden="true">⇧</span>替代文字 Shift，但仅限 UI 空间极紧时；多数情况文字更清晰 - 避免嵌套：
<kbd><kbd>Ctrl</kbd>+K</kbd>会破坏语义且样式错乱
动态替换 Cmd / Ctrl 符号不能靠 CSS，得用 JS 判断平台
Mac 用户看到 <kbd>Ctrl</kbd> 会下意识按 ⌘ 键，硬写两套 HTML 维护成本高。必须在运行时判断 navigator.platform 或 navigator.userAgent，然后替换 DOM 中的文本：
立即学习“前端免费学习笔记（深入）”；
例如：
if (navigator.platform.includes('Mac')) {
document.querySelectorAll('kbd').forEach(kbd => {
if (kbd.textContent === 'Ctrl') kbd.textContent = '⌘';
if (kbd.textContent === 'Alt') kbd.textContent = '⌥';
});
}
注意点：
- 别用
document.write或 innerHTML 全量重写——会丢失事件绑定和焦点状态 - 只替换文本内容，保留
<kbd>标签结构和 class - 若用框架（如 React/Vue），应在渲染前做平台适配，而非挂载后 DOM 操作
- Safari 15.4+ 支持
<dialog>，但对<kbd>的样式支持一直稳定，无需降级
配合 <dl> 结构才能让快捷键列表真正可访问
单靠一堆 <kbd> 堆砌，屏幕阅读器无法理解“这个键对应什么功能”。必须用定义列表 <dl> 明确建立键名与说明的语义关联：
<dl class="shortcut-list"> <dt><kbd>Ctrl</kbd>+<kbd>K</kbd></dt> <dd>聚焦到全局搜索输入框</dd> <dt><kbd>Esc</kbd></dt> <dd>关闭当前弹窗或退出全屏模式</dd> </dl>
这样屏幕阅读器会读作：“快捷键，Control 加 K，聚焦到全局搜索输入框”，而不是一串无意义的“K B D Control K B D K”。
容易被忽略的细节：
- 别用
<table>或<div>模拟列表——语义断裂，辅助技术无法识别关系 - 每个
<dt>只放一套快捷键，不混写“Ctrl+K 或 Cmd+K”——由 JS 动态替换后，语义依然干净 - CSS 控制缩进时，用
margin-inline-start而非padding-left，兼容 RTL 布局
真正难的不是写出 <kbd>，而是让每一处快捷键提示都经得起键盘导航、屏幕朗读和跨平台验证。最常漏掉的是：没做平台判断就硬写 Ctrl，以及把快捷键列表塞进 aria-label 里——那等于把整张说明书塞进按钮的 tooltip，信息全了，但没人能有效获取。
