用于标记程序中真实运行的代码字面量，如函数名、命令、配置项；仅表示用户需按下的物理按键或组合键，强调操作动作而非执行结果。
<code> 和 <kbd></kbd> 是语义完全不同的两个标签，不能互换，也不能混用——写错一个，读屏器会读错、搜索引擎可能降权、开发者容易误解操作意图。
什么时候该用 <code>
只用于标记「程序里真实运行的代码字面量」，比如函数名、命令、语法结构。
- 函数调用：
fetch()、JSON.parse()、document.querySelector() - 终端命令：
npm install、git commit -m "fix"、python --version - 配置项或路径：
package.json、src/utils/formatDate.js、process.env.NODE_ENV - 错误信息本身（不是用户怎么按）：
TypeError: Cannot read property 'length' of undefined - 别把整个代码块塞进单个
<code>：大段代码应套<pre class="brush:php;toolbar:false;"><code></code>，否则换行和空格会被浏览器合并</pre>
什么时候该用 <kbd></kbd>
只用于标记「用户需要实际按下的物理按键或组合键」，它描述动作，不执行动作。
- 单个键：
<kbd>Esc</kbd>、<kbd>F12</kbd>、<kbd>Tab</kbd> - 组合键必须拆开写：
<kbd>Ctrl</kbd> + <kbd>S</kbd>（不是<kbd>Ctrl+S</kbd>） - 修饰键+主键顺序不能反：
<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd>，不是<kbd>F</kbd> + <kbd>Shift</kbd> + <kbd>Alt</kbd> - 跨平台写法要分开：
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>（斜杠在标签外），不要写<kbd>Cmd/Ctrl</kbd> - 别把
<kbd></kbd>当快捷键监听器：它不响应keydown，也不可聚焦，绑定事件毫无作用
CSS 样式处理的常见坑
两者默认都用等宽字体，但视觉角色不同，CSS 必须区分对待。
<code>推荐加轻微背景（如#f9fafb）和圆角，但别加按钮式边框；<kbd></kbd>必须有边框（1px solid #ccc）+ 背景（#f5f5f5）+ 内边距（2px 6px），否则在多数 UI 框架下会彻底“消失”- 别给
<kbd></kbd>加tabindex或outline：它本不可聚焦，加了反而破坏键盘导航逻辑 - 深色模式下，
<kbd></kbd>的背景色要用@media (prefers-color-scheme: dark)调整，否则文字看不清 - 嵌套使用极少见，仅限强调完整操作序列，例如
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>（外层表示“同时按下”）
混用时最常踩的雷
错误组合不是“不好看”，而是直接导致语义断裂、可访问性失效、技术文档可信度下降。
-
<kbd>fetch()</kbd>：函数名不是按键，读屏器会念成“F E T C H 左括号” -
<code>Ctrl+S：快捷键不是代码，复制粘贴后无法被终端识别 -
<kbd>点击「保存」</kbd>：鼠标操作，不是键盘输入，完全违背<kbd></kbd>语义 -
<code><kbd>npm run dev</kbd>：嵌套非法，<code>里不允许交互性内容，屏幕阅读器会卡住 - 用
<kbd></kbd>替代<input>接收用户输入：它不收集值，也不触发事件，纯属无效设计
最容易被忽略的是样式重置后的回退——项目用了 normalize.css 或 Ant Design 等框架后，<kbd></kbd> 常被清掉边框和背景，看起来和普通文本一模一样，用户根本注意不到那是快捷键提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
