正确写法是每个物理按键独立包裹在中，分隔符（如+、/、→）置于标签外部；仅用于语义标记，不响应事件，需用javascript另行监听键盘行为。
组合键必须拆开写，不能塞进一个<kbd></kbd>里
浏览器和屏幕阅读器靠 DOM 结构识别按键逻辑。<kbd>Ctrl+S</kbd> 会被读成 “C T R plus S”，不是“Control-S”。这直接破坏可访问性，也影响语义解析。
正确做法是每个物理按键独立包裹，分隔符（+、/、→）放在标签外部：
-
<kbd>Ctrl</kbd> + <kbd>S</kbd>→ 屏幕阅读器朗读为 “Control S” -
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>R</kbd>→ 表达跨平台快捷键，斜杠不被误读为键 -
<kbd>Esc</kbd> → <kbd>Tab</kbd> → <kbd>Enter</kbd>→ 表示操作序列，箭头在外
别写 <kbd>Ctrl + V</kbd>：空格会被渲染成 <kbd>Space</kbd>，导致多出一个“按空格键”的歧义。
修饰键（Ctrl/Shift/Cmd）必须单独包裹
修饰键和主键在物理上是独立按键，语义上也要独立表达。把 Ctrl 和 S 塞进同一个 <kbd></kbd>，等于抹掉“修饰+执行”的层级关系。
嵌套写法（如 <kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>）虽合法，但实际价值有限——它暗示“整个组合是一个操作单元”，但多数场景下反而增加理解成本，且部分读屏软件支持不稳定。
推荐统一用并列 + 外部分隔符，更直观、兼容性更好：
- ✅
<kbd>Alt</kbd> + <kbd>F4</kbd> - ✅
<kbd>Shift</kbd> + <kbd>↑</kbd> - ❌
<kbd>Shift+↑</kbd>（语义丢失，字体可能错乱）
别把<kbd></kbd>当快捷键监听器用
<kbd></kbd> 只负责“说这是什么键”，不响应任何事件。给它加 onclick 或 addEventListener('keydown', ...) 完全无效——它不可聚焦、不触发键盘事件。
真正监听快捷键，得靠 JS 手动处理：
- 用
document.addEventListener('keydown', handler) - 在
handler里判断event.ctrlKey && event.key === 's' - 不要试图从
<kbd>Ctrl</kbd> + <kbd>S</kbd>里提取逻辑——那是文档语义，不是运行时数据
混淆展示和响应，是初学者最常踩的坑。标签写对了，JS 还得另写一套逻辑。
CSS 美化前先重置默认样式
各浏览器对 <kbd></kbd> 的默认渲染差异不小：Chrome 加浅灰背景+细边框，Firefox 字体偏小，Safari 圆角不一致。不重置就直接美化，容易在某个浏览器里崩掉视觉一致性。
最小必要重置建议：
- 强制
font-family: ui-monospace, monospace（避免等宽字体 fallback 失效） - 设
padding: 2px 6px（太小看不清，太大失真） - 显式定义
background-color和border-radius（别依赖默认） - 禁用
user-select: none—— 用户可能想复制快捷键文本
真实按键质感不是重点，关键是让每个 <kbd></kbd> 在不同设备上都清晰可辨、层级分明、不遮挡文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
