<kbd>是唯一语义正确、可访问性达标且被屏幕阅读器识别的键盘输入标记，<code>表示代码而非物理按键，混用会导致语义混淆、读屏错误和搜索引擎误判；组合键应分键书写如<kbd>Ctrl</kbd> + <kbd>S</kbd>，Mac键符须用Unicode符号如<kbd>⌘</kbd>而非文字描述。
<kbd> 是唯一语义正确、可访问性达标、且被主流浏览器和辅助技术（如屏幕阅读器）识别的键盘输入标记方式。用 <span>、<code> 或纯文本模拟，都会丢失“这是用户要按的键”这一关键含义。
为什么不用 <code> 包快捷键
<code> 表示计算机代码或命令行输入，比如 git commit -m "fix"；而 <kbd> 明确表示“用户需在物理键盘上按下”，比如 Ctrl、Shift、F5。混用会导致：
- 屏幕阅读器读作“code Ctrl code”，而非“key board Ctrl”
- 搜索引擎无法区分“命令语法”和“操作指引”
- 未来 CSS 重置或无障碍工具链可能忽略非语义化写法
组合键怎么写才对：分键 vs 合写
推荐每个独立按键用一个 <kbd>，中间用 + 或空格连接——这样既利于样式控制，也符合 W3C 推荐实践：
✅ 正确（推荐）：<p>保存文件：<kbd>Ctrl</kbd> + <kbd>S</kbd></p>
✅ 可接受（语义略弱）：<p>常用组合：<kbd>Ctrl + S</kbd></p>
❌ 错误：<p>按 <code>Ctrl+S</code> 保存</p>（语义错误）
❌ 错误：<p>按 <kbd>Ctrl+S</kbd> 保存</p>（单个 <kbd> 包含符号，违反“按键原子性”原则）
Mac 键符怎么表示才不翻车
Mac 系统级符号（⌘ ⌥ ⇧ ⌃）不是 Unicode 普通字符，而是专用符号，必须直接使用其 Unicode 码点，不能靠字体模拟或 CSS 伪元素生成：
-
<kbd>⌘</kbd>（U+2318）对应 Command 键 -
<kbd>⌥</kbd>（U+2325）对应 Option 键 -
<kbd>⇧</kbd>（U+21E7）对应 Shift 键 -
<kbd>⌃</kbd>（U+2303）对应 Control 键
不要写成 <kbd>Cmd</kbd> 或 <kbd>Command</kbd> —— 这些是文字描述，不是用户实际看到的符号，也不被 macOS 用户认知为快捷键标识。
容易被忽略的兼容与维护细节
很多团队后期改用图标或 SVG 替代 <kbd>，结果导致：
- 高对比度模式下图标消失，文字不可见
- 缩放 200% 时图标错位或截断
- 翻译工具把图标当占位符跳过，多语言文案漏译
坚持用原生 <kbd> + Unicode 符号，是最轻量、最鲁棒、也最容易被自动化测试捕获的方案。只要不给它加 display: none 或覆盖 font-family 到不支持符号的字体，它就始终可用。
