和不是替代关系，而是分工明确的语义搭档；前者标物理按键（如Ctrl+Shift+P），后者写对应命令（如Developer: Toggle Developer Tools），顺序不可颠倒，混用会破坏可访问性与语义清晰度。

和

不是替代关系，而是分工明确的语义搭档。用错一个，整个操作指引就可能被读屏器误读、被搜索引擎降权、被开发者忽略真实意图。</p>

<H3>什么时候必须配对出现</H3>
<p>当文档需要同时说明「用户按什么键」和「系统执行什么命令」时，二者自然共存，且顺序不能颠倒：</p>
<ul>
  <li>先用<kbd>标出触发动作的物理按键，比如<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></li>
  <li>再用<code>写出该快捷键实际唤起的命令或功能名，比如<code>Developer: Toggle Developer Tools

完整示例：

打开开发者工具：Ctrl + Shift + P → Developer: Toggle Developer Tools

常见错误组合及后果

混搭不当会直接破坏可访问性与语义清晰度：

• git commit：嵌套非法，不接受块级或交互内容，屏幕阅读器会卡在“k-b-d”发音上
• <kbd>Ctrl+S</kbd>：语义倒置，

  包裹<kbd>会让辅助技术优先识别为代码片段，而非击键指令</li>
    <li><kbd>npm install</kbd>：误把命令当按键，用户真去按键盘上的 n-p-m 键，毫无反应</li>
  </ul>
  
  <H3>跨平台场景下的协同写法</H3>
  <p>面对 Windows/macOS 双用户群体，<kbd>负责平台专属按键，<code>负责统一功能描述，避免歧义：</p>
  <ul>
    <li>✅ 推荐：<p>格式化代码：<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd>（Windows/Linux）或 <kbd>⇧</kbd> + <kbd>⌥</kbd> + <kbd>F</kbd>（macOS）→ <code>editor.action.formatDocument

✅ 紧凑版（配合 CSS 媒体查询）：

格式化：Shift+Alt+F/⇧+⌥+F → editor.action.formatDocument

（注意斜杠是普通文本，不在任何标签内）

❌ 避免：Ctrl/Cmd + Shift + F → formatDocument（/ 不是按键，无法被无障碍工具解析）

样式协同要点

和默认都用等宽字体，但视觉角色不同，CSS 应区分处理：

• 需显式设置背景色（#f5f5f5）、边框（1px solid #ccc）、圆角（4px）、内边距（2px 6px）和垂直对齐（vertical-align: middle）
• 保持默认等宽即可，如需强调，可用<font color="#2563eb">深蓝文字</font>或轻微背景（#f9fafb），但不可加按钮式边框
• 两者并列时，确保行高一致，避免因 padding 或 line-height 差异导致基线错位