应使用 <kbd> 表示用户需按下的键（如命令动词），<code> 表示代码文本（如程序名、参数），二者嵌套或并列以准确传达交互语义；CSS 微调可增强视觉区分度。

用 <kbd> 和 <code> 组合，能语义化、清晰地区分“用户要按下的键”和“代码/命令本身”，特别适合展示控制台命令及其参数。

基础组合：命令 + 参数

<kbd> 表示键盘输入（如快捷键、命令名），<code> 表示代码文本（如文件名、选项、值）。两者嵌套或并列使用，语义更准确：

<p>运行命令：<code>npm</code> <kbd>install</kbd> <code>--save-dev</code></p>

渲染效果类似：npm install --save-dev —— 命令名用 <code>（它是程序名），动词操作用 <kbd>（代表用户主动执行的动作），参数用 <code>（属于配置项而非按键）。

嵌套用法：带选项的命令行

当参数本身含空格或需强调结构时，可将 <code> 嵌入 <kbd> 内部（仅限逻辑上属于“一次按键输入”的整体）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

• <kbd><code>git commit -m "init project"</code></kbd> → 表示整个字符串是一次回车前输入的内容
• 避免写成

  <kbd>git</kbd> <kbd>commit</kbd> <code>-m</code> <code>"init project"</code></li>
  </ul>
  
  <H3>CSS微调提升可读性</H3>
  <p>默认样式下 <kbd> 和 <code> 外观接近。建议加简单样式区分：</p>
  <pre class='brush:php;toolbar:false;'>kbd {
    padding: 2px 6px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: #f4f4f4;
    font-family: inherit;
  }
  code {
    padding: 2px 4px;
    background-color: #f9f9f9;
    border-radius: 2px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  }

  这样 看起来像按键， 更像代码片段，视觉层次更清楚。

  不推荐的写法

  以下用法会削弱语义或造成混淆：

  • 全用 <kbd>：如 <code><kbd>ls -la /home</kbd> —— 把路径和选项都当成“按键”，不符合实际输入习惯
  • 全用 <code>：丢失交互意图，无法体现“这是你要敲的命令”
  • 混用无逻辑：如 <code>npm</code> <code>install</code> —— “install” 是动作，不是代码标识符