<kbd> 标签专用于标记用户必须亲手按下的物理键或组合键，如 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>；不可用于代码（应选 <code>）或系统输出（应选 <samp>），嵌套须符合真实按键逻辑，且需保障语义完整性以支持无障碍访问。
<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> 嵌套和组合写法要符合物理逻辑
浏览器默认用等宽字体渲染，但关键不在样式，而在嵌套是否反映真实按键行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<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> 的语义完整性直接影响屏幕阅读器用户的操作效率——他们依赖这个标签跳过装饰性内容，直奔可操作指令。
