<kbd> 是唯一语义正确、浏览器原生支持的键盘输入标签，其他标签或自定义写法无法传达快捷键语义，影响可访问性、SEO 和用户体验；组合键须拆分为独立 <kbd> 并用文本分隔符连接。
<kbd> 是唯一语义正确、浏览器原生支持的键盘输入格式化标签，_KBD 等非标准写法无效，直接被忽略或解析为未知元素。
为什么不能用 <strong> 或 <span> 模拟快捷键
屏幕阅读器无法识别其操作意图，搜索引擎和协作工具也抓不到“这是快捷键”的语义；CSS 重写后容易丢失可访问性（如 focus outline、高对比度模式适配）；用户复制时可能连带复制多余符号（如 <span class="key">Ctrl</span>+<span class="key">S</span> 中的 + 变成不可见字符）。
-
<strong>Ctrl+S</strong>→ 被读作“强调内容 Ctrl S”，不是“按住 Ctrl 再按 S” -
<span>Cmd</span><span>Q</span>→ 缺少连接符，视觉粘连，读屏器可能连读为 “CommandQ” - 自定义 class 名（如
key）不传递任何语义，无障碍检测工具会报错
组合键必须拆开写，且用文本分隔符连接
修饰键（Ctrl/Shift/Alt/⌘）和主键（C/T/Enter）是逻辑上独立的物理按键，<kbd> 嵌套结构让辅助技术能逐个播报、样式层也能分别控制大小与间距。
- ✅ 正确：
<kbd>Ctrl</kbd>+<kbd>T</kbd>、<kbd>⌘</kbd><kbd>Space</kbd> - ❌ 错误：
<kbd>Ctrl+T</kbd>（单个标签，语义坍缩）、<kbd>Ctrl</kbd><kbd>T</kbd>（无分隔符，视觉/语音都难分辨） - 空格键、Tab、Enter 等特殊键名要写全称或标准符号：
<kbd>Space</kbd>、<kbd>Tab</kbd>、<kbd>⏎</kbd>（不要写成<kbd> </kbd>）
动态渲染快捷键时，必须转义 + 分割再包裹
从配置项或 API 读取的字符串（如 "Cmd+K"）若直接拼进 innerHTML，会因未转义 & 或 导致 DOM 解析失败；不分割则无法生成多个 <code><kbd> 元素。
立即学习“前端免费学习笔记（深入）”；
- 用
.split(' + ')或.split(/\s*\+\s*/)更鲁棒，兼容前后空格 - 每个键名必须 HTML 实体转义：
k.replace(/&/g, '&').replace(/, '<') - 避免
document.createElement('kbd')+appendChild，小片段用模板字符串更轻量、不易出错 - 别依赖 UA 检测自动替换
Cmd→⌘，优先用跨平台写法：<kbd>Ctrl</kbd> / <kbd>⌘</kbd> + <kbd>K</kbd>
最易被忽略的是：样式重写时删掉 font-family: ui-monospace, monospace，会导致不同长度的键名（如 Fn 和 Print Screen）宽度不一致，视觉错位；而加粗、斜体、阴影等装饰性样式，会干扰键盘按键的物理感认知——它该像一个按钮，而不是一段强调文字。
