<kbd> 标签不是样式工具，也不是“看起来像按键”的视觉 hack；它是语义标签，专用于标记用户**必须亲手按下的物理键或组合键**。用错地方，屏幕阅读器会读错、搜索引擎可能误判、无障碍测试直接报错。
什么时候该用 <kbd>，而不是 <code> 或 <samp>
核心判断依据是「谁在操作、什么动作」：
<kbd>：用户主动按——比如 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>、<kbd>git commit</kbd>（命令行输入）<code>：代码本身——比如函数名 fetch()、类名 class="modal"、HTML 属性 contenteditable<samp>：系统输出结果——比如终端里回显的 syntax error at line 5、API 返回的 {"status":"ok"}
混用最常踩的坑：把 console.log() 包进 <kbd> —— 这不是用户按的键，是开发者写的代码，该用 <code>。
<kbd> 嵌套和组合写法要符合物理逻辑
浏览器默认用等宽字体渲染，但关键不在样式，而在嵌套是否反映真实按键行为：
立即学习“前端免费学习笔记（深入）”；
正确：<kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Del</kbd>（多键同时按下）正确：<kbd>F12</kbd>、<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd>（Mac 开发者工具）错误：<kbd>npm install –save-dev <code>vite</code></kbd>（里面混了 <code>，且整条命令不是单次按键）
如果想表达「先输 vite，再按回车」，应拆成：<kbd>vite</kbd> <kbd>Enter</kbd>，中间加空格或 分隔。
兼容性和可访问性不是“能显示就行”
<kbd> 是 HTML Living Standard 正式支持的语义标签，所有现代浏览器和主流读屏软件（NVDA、VoiceOver、JAWS）都识别它为「键盘输入」。但要注意：
它不触发任何默认交互行为（不能点击、不响应 keydown），别指望靠它做快捷键绑定没有原生 focusable 行为，如需键盘导航支持，得手动加 tabindex="0" 和 ARIA 注释CSS 可以美化（比如加背景、圆角、阴影），但别改掉等宽字体，否则破坏语义一致性
真正容易被忽略的是：当文档中大量出现快捷键说明时，<kbd> 的语义完整性直接影响屏幕阅读器用户的操作效率——他们依赖这个标签跳过装饰性内容，直奔可操作指令。
评论(0)