HTML 的 ＜samp＞ 元素

1. 什么是 <samp> 元素

samp 是 HTML 中的一个语义化行内元素，全称是 Sample Output（示例输出）。它用于标记程序、脚本或计算机系统输出的示例文本，告诉浏览器和开发者：这段内容代表的是计算机程序的输出结果，而不是普通正文。

例如，当你在教程中展示命令行运行后的返回结果、程序打印的日志，或系统提示信息时，都可以用 samp 元素来包裹。

2. 基本用法

samp 是一个行内元素，直接包裹示例输出文本即可：

<p>运行安装命令后，终端会显示：<samp>Installation completed successfully.</samp></p>

浏览器默认会用等宽字体（monospace）渲染 samp 元素，使其看起来像终端或控制台的输出，与普通正文形成视觉区分。

3. 典型应用场景

3.1 展示命令行输出

<pre><samp>$ ping example.com
PING example.com (93.184.216.34): 56 data bytes
64 bytes from 93.184.216.34: icmp_seq=0 ttl=56 time=11.632 ms
--- example.com ping statistics ---
3 packets transmitted, 3 packets received, 0.0% packet loss</samp></pre>

3.2 展示程序运行结果

<p>程序执行后输出：<samp>Hello, World!</samp></p>

3.3 展示系统提示信息

<p>当磁盘空间不足时，系统会提示：<samp>Error: No space left on device</samp></p>

4. 与相关元素的区别

HTML 中还有几个容易与 samp 混淆的语义化元素，它们的用途各不相同：

元素	含义	典型用途
<samp>	示例输出	程序/系统的输出结果
<code>	代码片段	源代码、命令、函数名
<kbd>	键盘输入	用户需要按下的按键或输入的命令
<var>	变量	程序中的变量名或数学表达式

一个完整的示例，展示它们如何配合使用：

<p>在终端输入 <kbd>python</kbd> 命令，运行 <code>print("Hello")</code>，程序会输出 <samp>Hello</samp>。</p>

5. 样式定制

虽然浏览器默认给 samp 使用等宽字体，但你可以通过 CSS 自定义它的外观，让它更贴合你的页面风格：

samp {
  font-family: "Courier New", Consolas, monospace;
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 4px;
  color: #d63384;
}

6. 总结

samp 是一个简单但实用的语义化标签，它让示例输出在 HTML 中有了明确的含义，既方便阅读，也有利于 SEO 和无障碍访问。在编写技术文档、教程或博客时，善用 samp 能让你的示例输出更规范、更易读。