PHP小码农

Appearance

code 与 kbd 与 samp ​

<code>、<kbd> 和 <samp> 是三个用于表示计算机相关文本的行内标签，各自有不同的语义：<code> 表示代码片段，<kbd> 表示用户键盘输入，<samp> 表示程序输出结果。

前置知识

阅读本节前，建议先了解：sub 与 sup

基础概念 ​

这三个标签都与计算机环境相关，但各自有明确的语义区分：

  • <code>：表示计算机代码片段，如变量名、函数名、命令等
  • <kbd>：表示用户的键盘输入或按键
  • <samp>：表示程序或系统的输出结果

它们默认都以等宽字体（monospace）显示，但语义完全不同。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>code、kbd、samp 示例</title>
</head>
<body>
  <!-- code：代码片段 -->
  <p>使用 <code>console.log()</code> 输出调试信息。</p>

  <!-- kbd：键盘输入 -->
  <p>按下 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>

  <!-- samp：程序输出 -->
  <p>终端显示：<samp>Hello, World!</samp></p>
</body>
</html>

详细说明 ​

code 的使用 ​

<code> 用于行内代码片段。对于多行代码块，应配合 <pre> 标签使用：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>code 示例</title>
</head>
<body>
  <h1>code 标签示例</h1>

  <!-- 行内代码：变量名 -->
  <p>将 <code>count</code> 变量赋值为 <code>0</code>。</p>

  <!-- 行内代码：函数名 -->
  <p>调用 <code>addEventListener()</code> 方法绑定事件。</p>

  <!-- 行内代码：HTML 标签名 -->
  <p>使用 <code>&lt;div&gt;</code> 元素创建容器。</p>

  <!-- 多行代码：配合 pre 使用 -->
  <pre><code>function add(a, b) {
  return a + b;
}</code></pre>
</body>
</html>

kbd 的使用 ​

<kbd> 表示用户需要按下的键或输入的文本：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>kbd 示例</title>
  <style>
    kbd {
      background: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 0.1em 0.4em;
      font-family: monospace;
      font-size: 0.9em;
      box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <h1>键盘快捷键</h1>

  <p>复制：<kbd>Ctrl</kbd> + <kbd>C</kbd></p>
  <p>粘贴：<kbd>Ctrl</kbd> + <kbd>V</kbd></p>
  <p>撤销：<kbd>Ctrl</kbd> + <kbd>Z</kbd></p>
  <p>截图：<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></p>

  <p>在终端中输入 <kbd>npm install</kbd> 安装依赖。</p>
</body>
</html>

samp 的使用 ​

samp 表示程序或系统的输出结果：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>samp 示例</title>
</head>
<body>
  <h1>程序输出</h1>

  <p>编译完成后，终端输出：</p>
  <p><samp>Build completed successfully in 2.3s.</samp></p>

  <p>如果输入错误密码，系统会提示：</p>
  <p><samp>Error: Invalid password. Please try again.</samp></p>

  <p>HTTP 响应状态码：</p>
  <p><samp>200 OK</samp></p>
</body>
</html>

三者对比 ​

标签语义典型场景默认字体
<code>代码片段变量名、函数名、行内代码monospace
<kbd>键盘输入快捷键、按键、用户输入monospace
<samp>程序输出终端输出、系统提示、错误信息monospace

实战示例 ​

命令行操作教程 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>命令行教程</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    kbd {
      background: #f0f0f0;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 0.1em 0.4em;
      font-size: 0.875em;
      box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    samp {
      display: block;
      background: #1a1a2e;
      color: #0f0;
      padding: 1rem;
      border-radius: 4px;
      margin: 0.5rem 0;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>创建 React 项目</h1>

  <p>首先，在终端中输入以下命令：</p>
  <samp><kbd>npx</kbd> create-react-app my-app</samp>

  <p>系统会显示安装进度：</p>
  <samp>Creating a new React app in /home/user/my-app.
Installing packages. This might take a couple of minutes.</samp>

  <p>安装完成后，进入项目目录：</p>
  <samp><kbd>cd</kbd> my-app</samp>

  <p>启动开发服务器：</p>
  <samp><kbd>npm</kbd> start</samp>

  <p>看到以下输出表示启动成功：</p>
  <samp>Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000</samp>
</body>
</html>

注意事项 ​

  • <code> 中的 HTML 标签需要转义（< 写为 &lt;，> 写为 &gt;）
  • 多行代码块应配合 <pre> 标签使用
  • 不要用 <kbd> 标记不是键盘输入的内容
  • 不要用 <samp> 标记不是程序输出的内容

最佳实践 ​

  1. code 用于行内代码：变量名、函数名等
  2. pre + code 用于代码块：多行代码展示
  3. kbd 用于快捷键：帮助文档中的操作说明
  4. samp 用于系统输出：教程中的终端输出
  5. 自定义样式：通过 CSS 让三个标签更具辨识度

下一节

继续学习：var 变量

参考链接 ​