<samp>-程序输出示例

samp 标签在HTML中用于标识计算机程序的输出示例，通常以等宽字体显示，便于区分代码运行结果与普通文本。它不改变文本的语义，仅用于视觉呈现。

samp 标签的基本用法

samp 标签包裹的内容会被浏览器默认渲染为等宽字体（如 Courier New），表示这是程序或系统的输出内容。例如：

<p>程序运行结果：<samp>Hello, World!</samp></p>

实际效果：
程序运行结果：<samp>Hello, World!</samp>

与其他标签的对比

samp 与 <code>、<kbd> 标签功能相似但用途不同：

• <code>：标记代码片段（如函数名、变量）。
• <kbd>：标记用户键盘输入。
• <samp>：标记程序输出。

示例对比：

<code>console.log()</code> 输出：<samp>Success</samp>，按<kbd>Enter</kbd>继续。

效果：
<code>console.log()</code> 输出：<samp>Success</samp>，按<kbd>Enter</kbd>继续。

结合其他标签增强语义

samp 可与 <pre> 标签组合显示多行程序输出，保留格式：

<pre><samp>
System check complete.
Total files: 42
Memory usage: 64MB
</samp></pre>

效果：
<pre><samp> System check complete. Total files: 42 Memory usage: 64MB </samp></pre>

实际应用场景

命令行输出模拟

<div class="terminal">
  <samp>$ npm install vue</samp><br>
  <samp>+ vue@3.2.47</samp><br>
  <samp>added 1 package in 2s</samp>
</div>

通过CSS添加背景色和圆角边框后，可模拟终端效果。

错误提示

<p>编译错误：<samp>SyntaxError: Unexpected token '}'</samp></p>

交互式示例

结合JavaScript动态更新 samp 内容：

<button onclick="runDemo()">运行示例</button>
<samp id="demo-output"></samp>

<script>
  function runDemo() {
    document.getElementById('demo-output').textContent = '计算结果：42';
  }
</script>

样式自定义

默认样式可通过CSS覆盖：

samp {
  font-family: 'Consolas', monospace;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

无障碍访问建议

为增强可访问性，可配合 aria-live 属性实现动态内容提示：

<samp aria-live="polite" id="live-output">就绪</samp>

当内容通过JavaScript更新时，屏幕阅读器会播报变化。