samp仅用于标记程序运行后用户实际看到的原始输出文本，须同时满足：是程序直接生成的文本、真实显示在终端/控制台/gui中、上下文明确为“输出”；不可嵌套code，需配等宽字体与pre-wrap样式。
标签不是“用来显示程序输出”的万能容器，它只适用于**用户实际看到的、未经修饰的原始输出字符串**。用错场景会破坏语义、干扰辅助技术，甚至让屏幕阅读器把错误提示读成代码。
什么时候该用 samp？看三个硬性条件
必须同时满足以下三点，samp 才是合法选择：
- 内容是程序或系统**运行后直接生成的文本**（非人工编写的示例）
- 这段文本**真实出现在终端、浏览器控制台或 GUI 提示框里**（用户肉眼可见）
- 上下文明确表示这是“输出”，而非“输入”“代码”或“解释说明”
比如执行 git status 后终端打印的：
<samp>On branch main Your branch is up to date with 'origin/main'. nothing to commit, working tree clean</samp>
✅ 符合全部条件；❌ 把 { "error": "timeout" } 包进 samp 就不合法——那是 API 响应体，得用 <pre class="brush:php;toolbar:false;"><code class="json"></code>。</pre>
samp 和 code、pre 到底怎么分？
三者语义不可互换，混用等于在 HTML 里写错标点：
-
code：一小段**可执行/可引用的代码片段**，如document.querySelector()、ls -la -
pre：仅保留空格与换行的**纯格式容器**，无语义，常套code或samp -
samp：**只能是输出结果本身**，且不能嵌套code（W3C 明确禁止）
正确组合示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<p>运行 <code>npm install eslint</code> 后得到：</p> <samp>+ eslint@8.56.0 added 123 packages from 78 contributors</samp>
⚠️ 错误写法：<samp><code>Error: ENOENT —— samp 里塞 code 是验证失败项。
不加 CSS 的 samp 很危险
浏览器对 samp 的默认样式不可靠：有的渲染为等宽，有的继承父级字体，有的连空格都不保留。不显式声明，就等于放弃可读性：
- 必须加
samp { font-family: ui-monospace, 'SFMono-Regular', monospace; } - 多行输出要配
white-space: pre-wrap;，否则换行丢失 - 避免依赖
display: inline默认行为——长输出溢出容器时不会自动折行
没配 CSS 的 samp 在暗色主题下可能直接变成浅灰字+白底，肉眼不可读。
想“点击展开响应体”？别硬套 samp
samp 本身不提供交互能力，也不支持隐藏/显示切换。强行用 JS 控制 hidden 属性或 display，会导致语义断裂和可访问性失效：
- 优先用
<details><summary>响应头</summary><pre class="brush:php;toolbar:false;"><code>HTTP/2 200...</code></pre></details> - 若必须内联展示敏感字段（如 token），改用
<code aria-label="API key 已脱敏">•••••••• - 调试用的 console 输出，别塞 DOM —— 直接走
console.log()更安全、更轻量
真正难的从来不是怎么写标签，而是每次敲下 <samp></samp> 之前，先问一句：这串文字，此刻正躺在哪个终端里、被哪个用户的眼睛盯着看？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
