<kbd> 是纯语义化标签，仅表示用户输入的键，不捕获事件、无交互性；正确用于文档中说明快捷键等场景，错误用法包括监听事件或替代 <code> 等。
kbd 标签不是用来捕获键盘事件的
很多人看到 <kbd> 就以为它能监听按键、触发 JS 逻辑，其实完全不是——<kbd> 是纯语义化标签，只负责视觉上表示“用户输入的键”，比如
<kbd>Ctrl</kbd>+<kbd>S</kbd>。它不绑定任何事件，也不影响 DOM 行为。</p> <p>常见错误现象：<br>• 给 <code><kbd>Enter</kbd>加
onclick，发现点不动• 用
document.querySelector('kbd') 监听 keydown，结果没反应• 误以为浏览器会自动把
<kbd>A</kbd> 和真实按键 A 关联起来
-
<kbd>渲染效果由浏览器默认样式控制（通常带浅灰背景、圆角、等宽字体），可被 CSS 覆盖，但不会改变其无交互性 - 若需响应键盘输入，请用
addEventListener('keydown', ...)监听document或聚焦元素，而非依赖<kbd>标签 - 语义正确场景：文档中说明快捷键、命令行参数、终端输入示例，例如
<p>按 <kbd>Tab</kbd> 切换焦点</p>
kbd 嵌套和组合键怎么写才规范
HTML5 明确支持嵌套 <kbd> 表示组合操作，但顺序和嵌套层级有隐含语义，不能随意堆砌。
- 组合键用嵌套表达：
<kbd><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Del</kbd></kbd>（外层<kbd>表示“同时按下”） - 序列操作用并列：
<kbd>Esc</kbd> → <kbd>Shift</kbd> + <kbd>F5</kbd>（箭头是普通文本，非标签） - 避免过度嵌套：
<kbd><kbd><kbd>Cmd</kbd></kbd></kbd>不合法，浏览器可能降级渲染或忽略内层 - 注意空格处理：
<kbd>Ctrl + S</kbd>中的+是普通字符，不是运算符；推荐用+避免连排挤在一起
kbd 在不同浏览器里的默认样式差异
所有现代浏览器都支持 <kbd>，但默认样式略有不同，尤其在字体、边框和背景上，容易导致文档风格不一致。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：浅灰背景（
#f0f0f0）、1px 灰边框、font-family: monospace - Safari：无背景色，仅靠边框和字体区分，视觉上更弱
- Firefox：背景略深（
#e6e6e6），圆角更明显 - 如果设计要求统一外观，必须重置样式，例如：
kbd { background: #333; color: white; padding: 2px 6px; border-radius: 3px; font-family: system-ui, sans-serif; } - 注意：重置时别删掉
font-variant: small-caps这类可能影响可读性的继承属性
替代方案：什么时候不该用 kbd
当内容不是“用户主动按下的物理键”时，硬套 <kbd> 会破坏语义，甚至影响无障碍访问（屏幕阅读器会读作“key button”）。
- 命令行输出内容（如
npm install）应使用<code>，不是<kbd> - 变量名、函数名（如
fetch()）、路径（/usr/bin）用<code>或<var> - 虚拟操作（如“点击保存按钮”）用
<button>或普通文本，不用<kbd> - 键盘布局图、键位热区等交互式 UI，应使用
<div>+ JS 模拟，而非语义标签
最常被忽略的一点：语义标签一旦用错，就会影响搜索爬虫对页面结构的理解，也干扰 AT（辅助技术）用户对操作方式的预期——<kbd> 只该出现在“告诉用户该按什么键”的上下文中，不多不少。
