应使用 samp 标签表示程序或系统的实际输出结果，如终端命令执行后的文字；code 用于源代码、变量名等，“hello”输出须用 samp 而非 code，ls -la 输入应为 kbd，html 标签用 code，samp 内不可嵌套 kbd 或 code，需转义 html 字符。

什么时候该用 samp 而不是 code

samp 表示程序或系统的**实际输出结果**，比如终端里跑完命令后打印的那几行文字；code 是泛指源代码片段、变量名、函数名这类“写出来的代码”。混淆两者会导致语义错误，影响可访问性（屏幕阅读器会据此朗读不同语气）和 SEO。

常见误用场景：

• 把 console.log("hello") 的输出 "hello" 包在 code 里 —— 应该用 samp
• 把 Bash 命令 ls -la 本身写成 samp —— 这是输入，该用 kbd
• 把 HTML 标签如 <div> 当作“输出”渲染 —— 它本质是标记，用 <code>code 更准确

  samp 和 kbd 搭配使用的典型流程

  一个完整的命令交互示例，包含用户输入、系统响应、关键提示，三者语义必须分离：

  <p>运行命令：<kbd>curl -I https://example.com</kbd></p>
  <p>返回结果：<samp>HTTP/2 200<br>server: nginx<br>content-type: text/html</samp></p>
  <p>注意其中 <code>200</code>&gt 表示请求成功。</p>

  说明：

  • kbd 仅包裹用户主动敲击的内容（含组合键如 <kbd>Ctrl</kbd>+<kbd>C</kbd>）
  • samp 必须是真实输出文本，不能带 HTML 标签（否则需转义，如 <html>）
  • code 用于代码结构体（函数、标签、属性名），不参与交互流程

  样式兼容与默认表现差异

  浏览器对这三者的默认样式基本一致（等宽字体、无衬线），但语义不可互换。CSS 中可通过属性选择器区分：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  kbd { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; }
  samp { color: #2a7e19; }
  code { font-size: 0.95em; }

  注意事项：

  • 不要给 samp 加 white-space: pre-wrap 以外的强制换行控制 —— 输出内容本身可能含换行，应由内容决定
  • 若 samp 内含长路径或堆栈（如 /usr/local/bin/node: line 2: exec: node: not found），建议用 pre + samp 组合保留缩进和换行
  • IE8 及更早版本不支持 samp，但现代项目基本无需考虑；若需兼容，可用 span 加 role="text" 替代（非推荐，仅应急）

  容易被忽略的嵌套边界

  samp 内部不能出现 kbd 或 code，因为输出内容就是纯文本流。反例：

  ❌ 错误：<samp>Error: Cannot find module <code>fs

  ✅ 正确：<samp>Error: Cannot find module 'fs'</samp> —— 单引号是输出的一部分，不是语义标记

  如果输出中恰好包含 HTML 标签字符串（比如调试时打印 DOM 字符串），必须转义：

  ✅ 正确：<samp><div class="app">Loading...</div></samp>

  否则浏览器会尝试解析并破坏结构。这个转义动作常被跳过，导致页面显示异常或 DOM 树错乱。