samp标签专用于标记程序真实运行后用户在终端、控制台等环境中实际看到的原始输出文本，如错误提示、命令回显、HTTP响应头等；不可用于源码、输入命令或虚构示例，多行输出须嵌套在pre中以保留格式。
什么是 <samp> 标签，它该用在哪儿
<samp> 是 HTML 中语义化标签之一，专用于标记「程序输出」或「系统反馈内容」——比如命令行执行结果、终端打印日志、API 返回的 JSON 片段、编译器报错信息等。它不是用来包裹任意代码或变量名的，也不是 <code> 或 <pre> 的替代品。
常见误用：把用户输入（input）、函数调用（console.log()）或源码片段塞进 <samp>。这会破坏语义，影响可访问性（如屏幕阅读器可能错误地将其读作“输出”）。
<samp> 和 <code>、<pre> 的区别在哪
三者常被混用，但语义和默认行为不同：
-
<samp>表示「程序运行时产生的输出」，浏览器默认用等宽字体，不保留换行和空格（除非配合white-space: pre） -
<code>表示「一段计算机代码」，语义是“这段文字是代码”，不隐含执行结果 -
<pre>只负责「保留空白与换行」，无语义，纯样式作用；可嵌套<samp>或<code>
正确组合示例：
立即学习“前端免费学习笔记（深入）”；
<pre><samp>Error: Cannot find module 'fs-extra'</samp></pre></p>
<p>错误写法：<code><samp>const x = 1;</samp></code>（这是源码，该用 <code><code></code>）</p>
<H3>实际写文档时怎么用才靠谱</H3>
<p>写技术文档展示命令执行效果时，<code><samp></code> 要严格对应真实输出流：</p>
<ul>
<li>终端命令结果（如 <code>npm install</code> 后的 success 提示）→ 用 <code><samp></code></li>
<li>HTTP 响应体（如 <code>{"status":"ok"}</code>）→ 用 <code><samp></code> + <code><pre></code> 保证格式</li>
<li>错误堆栈（<code>TypeError: Cannot read property 'map' of undefined</code>）→ <code><samp></code> 更准确，比 <code><code></code> 更利于语义解析</li>
<li>避免嵌套其他交互元素（如 <code><button></code> 或 <code><a></code>），<code><samp></code> 是纯文本容器</li>
</ul>
<p>样式上建议加一点 CSS 防止折行破坏结构：</p>
<pre class="brush:php;toolbar:false;">samp { white-space: pre; font-family: var(--font-mono); }
容易被忽略的兼容性和可访问性细节
<samp> 在所有现代浏览器中都支持，但有两个隐形坑：
- 部分旧版屏幕阅读器对
<samp>的朗读提示不一致（有的读作“sample”，有的直接跳过），若内容关键，建议加aria-label明确说明，例如：<samp aria-label="Terminal output">Done in 2.4s</samp> - 如果输出含 Unicode 符号（如 ✅、⚠️）或 ANSI 颜色控制字符（\x1b[32m），
<samp>本身不处理渲染，需前端额外清理或转义 - 不要指望
<samp>自动高亮语法——它不带语言标识，也不能被 Prism.js 或 Highlight.js 识别，要高亮得靠外部库+<code>嵌套
真正要用好 <samp>，关键是分清“谁输出的”和“输出的是什么”。不是所有等宽文字都该套这个标签。
