<code>和<kbd>语义完全不同：前者表示计算机代码（如函数、命令），后者表示用户应按的物理按键；二者无交互能力，不可嵌套或联动，仅在说明“用户操作+系统行为”时并列共存且保持隔离。
code 和 kbd 标签不能联动，它们语义完全不同
code 表示一段计算机代码（如函数名、命令、变量），kbd 表示用户应按下的物理按键。两者没有交互能力，也不该被设计成“联动”——浏览器不会因为写了 fetch() 就自动监听 F 键，也不会因为写了 Ctrl+S 就执行 save() 函数。
常见误解是把它们当成功能组件：比如在文档里写「按 Ctrl+S 运行 saveFile()」，然后试图用 JS 把这两个标签绑在一起触发逻辑。这违背了 HTML 语义分层原则，也增加了维护成本。
-
code不参与事件监听，不响应键盘输入，只负责告诉阅读者「这是代码字面量」 - kbd 不收集输入，不可聚焦，不触发任何事件，只负责说明「用户该按什么键」
- 想实现快捷键功能，必须用
document.addEventListener('keydown', handler)单独监听，并在 handler 中判断event.ctrlKey && event.key === 's' - 把
code或 kbd 当作 JS 的选择器入口（如document.querySelector('kbd')）来驱动逻辑，属于职责错位
什么时候该同时出现，但各自独立
当技术文档需要同时说明「用户操作」和「系统行为」时，code 和 kbd 才自然共存，且必须保持语义隔离：
- 复制操作：
按 Ctrl+C 复制
console.log()调用结果立即学习“前端免费学习笔记（深入）”；
- 调试流程：
在 DevTools 中按 F8 暂停执行，再检查
response.data值 - 终端命令：
运行
git commit -m "fix"后，按 Ctrl+D 退出 shell
注意：连接符（如「后」「再」「后」）必须是普通文本，不能塞进任一标签；里的内容必须是真实按键（Enter，不是 return）；里的内容必须是可执行的代码片段（<code>fetch()，不是 点击保存按钮）。
容易踩的坑：样式与可访问性崩塌点
即使语义正确，视觉和辅助技术体验仍可能失效，尤其在现代 CSS 框架或重置样式下：
- kbd 默认无背景、无边框、无内边距——很多项目引入 normalize.css 或 Tailwind 后，它直接退化成普通等宽文本，用户根本看不到这是快捷键
-
code在段落中若未设vertical-align: middle，会和周围文字基线错位，导致换行拥挤或悬空 - 给 kbd 加
tabindex="0"或role="button"是典型错误：它本不可聚焦，加了反而干扰屏幕阅读器导航流 - 用
<code><kbd>Ctrl</kbd></code>是非法嵌套，code只接受文本节点或 、 等语义子元素，不在允许列表中
真正要保障的是：每个 kbd 都有独立 padding + border-radius + background，每个 code 都有 font-family: monospace + line-height 匹配上下文。
跨平台快捷键 + 对应命令的写法
当需同时表达「不同系统按键」和「统一功能命令」时，结构必须清晰，避免歧义：
- ✅ 正确：
格式化文档：Windows/Linux 按 Shift+Alt+F，macOS 按 ⇧+⌥+F → 触发
editor.action.formatDocument - ✅ 紧凑版（配合媒体查询）：
格式化：Shift+Alt+F/⇧+⌥+F →
editor.action.formatDocument - ❌ 错误：
Ctrl/Cmd+S →
（斜杠不是按键，无法被读屏器解析，也无法用 CSS 隐藏某一边）save() - ❌ 错误：
Cmd+S →
（Cmd+S 语义断裂，应拆为 ⌘+S 或 Cmd+S，且后者仅用于说明，不推荐 Unicode 替代）save()
最常被忽略的一点：macOS 的修饰键符号（⌘、⌥、⇧）是 Unicode 字符，必须直接写入文本，不能靠 CSS 伪元素生成——否则复制时丢失，读屏器无法朗读。
