专用于标记程序实际运行后输出的文本内容，如命令行返回结果、日志片段；单行输出可直接使用，多行必须嵌套在中以保留格式，不可替代表示代码或表示表单实时反馈。
什么时候该用 samp 而不是 code 或 pre
samp 专用于标记「程序实际运行后输出的文本内容」，比如命令行返回结果、日志片段、API 响应体。它和 code（表示源码）、pre（保留格式的块级容器）语义不同——浏览器默认会把 samp 渲染为等宽字体，但不会自动换行或保留空格，这点常被误用。
常见错误是把一段多行 JSON 响应直接塞进 samp 里却不加 pre 包裹，结果缩进全塌陷、换行消失。
- ✅ 正确场景：
samp套单行输出，如sampCommand not found/samp - ✅ 多行输出：必须嵌套在
pre内，pre负责格式，samp表明这是「输出」而非代码 - ❌ 不要用
samp替代code写函数名或变量名，比如sampfetchData()/samp是错的
samp 和 pre 嵌套的写法与样式控制
浏览器对 samp 默认只设了 font-family: monospace，不设 white-space，所以多行内容必须靠 pre 维持空格和换行。但 pre 自带上下外边距和可能的滚动条，容易破坏布局。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
<pre class="brush:php;toolbar:false;"><samp>HTTP/1.1 200 OK
Content-Type: application/json
{
"id": 123,
"status": "active"
}</samp>
如果想微调样式（比如去掉 pre 默认 margin 或限制高度），直接加内联 style 或 class 即可，samp 本身不响应 display 或 overflow 等属性。
- 避免给
samp单独设white-space: pre-wrap—— 它无效，语义也不对 - 若输出含 HTML 字符（如
<div>），务必先 HTML 实体转义，否则会被浏览器解析 <li>服务端渲染时，确保转义逻辑在包裹 <code>samp前完成，而不是依赖前端 JS 补救 - 把 AJAX 成功回调里
console.log(data)的内容用output展示 —— 应该用pre+samp - 在文档里写「运行后输出：
outputhello world/output」—— 这里没有表单交互，output语义错误 -
output支持for属性绑定表单控件，samp完全不参与 DOM 交互
和 output 标签的区别：别混淆用户界面反馈和程序输出
output 是表单中实时计算结果的语义容器（比如滑块拖动后显示数字），而 samp 是静态展示某次执行的原始输出流。两者不可互换。
典型误用：
兼容性与无障碍注意事项
samp 在所有现代浏览器中都支持，包括 IE9+，但屏幕阅读器通常不会特别提示「这是程序输出」，只是读出文字。如果输出内容关键（比如错误码、状态值），建议额外加 aria-label 或紧邻说明文字。
例如：
<p>curl 命令返回结果：</p> <pre class="brush:php;toolbar:false;"><samp aria-label="curl 命令的标准输出，包含 HTTP 状态码和 JSON 数据">...</samp>
- 不要依赖
samp自身触发任何 JS 事件（它不响应 click/focus） - 若输出需复制，得在外层
pre上手动加复制逻辑，samp不提供原生能力 - 打印样式表里记得重置
samp的背景色，否则深色主题下浅灰底可能影响可读性
pre，或者把调试日志当源码用 code 包 —— 语义一错，后续维护和无障碍就都绕弯路。
