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