<kbd> 标签仅语义化表示用户需按的键，不具交互功能；正确用于快捷键说明等场景，错误用于按钮或嵌套；默认样式不可靠，需CSS保障一致性与可访问性。
<kbd> 标签不是“加样式”的工具，它语义上表示用户输入的键盘操作，浏览器默认会渲染成等宽、带边框的视觉效果，但不能靠它实现交互或监听按键。
什么时候该用 <kbd> 而不是 <span> 或 CSS 类
只在文档中需要明确表达「这是用户要按的键」时才用，比如帮助文档、快捷键说明、命令行提示。它不触发任何行为，也不捕获事件 —— 如果你想监听 Ctrl+S，得用 addEventListener('keydown', ...)，跟 <kbd> 毫无关系。
- ✅ 正确场景：写「按
<kbd>Ctrl</kbd> + <code><kbd>S</kbd> 保存文件」</li> <li>❌ 错误场景：给按钮加 <code><kbd>Save</kbd> 期望它响应点击</li> <li>⚠️ 注意：<code><kbd>
嵌套没意义，<kbd><kbd>Ctrl</kbd><kbd>S</kbd>是错的，应写成<kbd>Ctrl</kbd> + <kbd>S</kbd>
<kbd> 的默认样式能直接用吗
可以，但别依赖。主流浏览器（Chrome/Firefox/Safari）确实默认渲染为 font-family: monospace、浅灰背景、细边框，但这个样式没写死在规范里，纯属浏览器实现习惯。如果你需要一致外观：
- 必须重置或覆盖默认样式，比如加
kbd { font-size: 0.9em; padding: 2px 4px; border-radius: 3px; } - 避免用
kbd { background: #000; color: #fff; }这类强对比色——可访问性差，屏幕阅读器不会因此读出“黑色背景白字”，它只读内容文本 - 移动端 Safari 对
<kbd>支持弱，部分版本会忽略默认样式，建议始终配 CSS
和 KeyboardEvent.key / KeyboardEvent.code 有关系吗
完全没关系。<kbd> 是静态 HTML 元素，用于展示；KeyboardEvent.key 是运行时 JS 接口，用来判断用户按了哪个键。两者名字像，但一个在 DOM 树里，一个在事件对象里。
立即学习“前端免费学习笔记（深入）”；
- 你不能用
<kbd key="Enter">——key不是<kbd>的合法属性 - 想动态生成快捷键提示？得 JS 拼字符串：
document.querySelector('.hint').innerHTML = `按 <kbd>${e.key}</kbd> 继续`，注意 XSS 风险，需转义 -
e.code（如"KeyS"）不适合直接塞进<kbd>，用户看不懂；e.key（如"s"或"Escape"）更合适，但大写 Shift+Esc 得手动映射成<kbd>Esc</kbd>
真正容易被忽略的是：很多人以为用了 <kbd> 就等于做了无障碍支持，其实不然。它只是辅助技术（如屏幕阅读器）识别“这是按键”的线索之一，但若上下文缺失（比如没配合 <label> 或 ARIA），照样读不准。语义对了，只是起点。
