<code>标签专用于标记计算机代码字面量，如函数名、命令、语法片段等；<kbd>标签仅表示用户物理按键动作，二者语义不同、不可混用，须严格区分场景并确保等宽字体回退。

code 和 kdb 是语义完全不同的两个标签，不能互换，混用会误导开发者、破坏可访问性、干扰屏幕阅读器解析。

什么时候该用 code 标签

code 专用于标记「计算机代码字面量」——即真实运行或书写中的函数名、命令、语法片段等，不是人按的键，也不是程序输出。

• ✅ 正确场景：写文档说明如何调用 fetch()、执行 npm install --save-dev、在 JSX 中写 {user.name}
• ❌ 错误用法：Ctrl+S（这是按键，不是代码）、TypeError: Cannot read property（这是错误输出，该用 samp）
• 浏览器默认仅设 font-family: monospace，若项目 CSS 重置了字体，需手动补回，否则和普通文本无异
• 不要给 code 加 tabindex 或 onclick——它不交互，也不应被聚焦

什么时候该用 kbd 标签

kbd 只表达「用户物理按键动作」，比如组合键、单键、平台专属键，它不执行任何逻辑，也不代表命令本身。

• ✅ 正确场景：说明「按 Ctrl + Shift + R 刷新页面」、「macOS 上用 ⌘ + Space 唤起 Spotlight」
• ❌ 错误用法：git commit -m "init"（这是命令，不是按键）、Esc（没上下文时，用户不知道按它干什么）
• 组合键必须拆开写：Ctrl + S ✅，Ctrl+S ❌——前者能让屏幕阅读器正确读作 “Control-S”，后者会被读成 “C T R plus S”
• 符号如 ⌘、⌥ 必须配 aria-label，否则读屏器可能读成“复选标记”或“方块”

code 和 kbd 一起出现的典型写法

当操作流程包含「输入命令」+「触发快捷键」两个环节时，二者自然共存，且顺序固定：先 kbd（用户按什么），再 code（系统跑什么）。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 推荐：

  打开命令面板：Ctrl + Shift + P → Developer: Toggle Developer Tools

• ✅ 跨平台：

  格式化代码：Shift + Alt + F（Windows）或 ⇧ + ⌥ + F（macOS）→ editor.action.formatDocument

• ⚠️ 注意：箭头（→）、加号（+）、斜杠（/）这些分隔符必须写在标签外部，不能塞进任一标签里
• 别用 npm install 这类嵌套——kbd 里不能放 code，语义冲突，辅助技术会卡住

最容易被忽略的是样式回退：多数 UI 框架或 normalize.css 会清掉 kdb 和 code 的等宽字体，结果文档里按键和代码都看起来像普通段落。上线前务必检查这两类标签是否仍保持 font-family: ui-monospace, monospace。