samp标签专用于标记程序或系统实际输出的文本，如终端命令结果、报错信息、API返回JSON等，不可用于代码、输入或变量名，须配合pre实现多行输出。
什么是 samp 标签，它该用在哪儿
samp 是语义化 HTML 标签，专用于标记「程序或系统实际输出的文本」——比如终端命令执行后打印的内容、浏览器控制台报错信息、API 返回的 JSON 片段等。它不是用来包裹任意代码或变量名的，也不是 code 或 pre 的替代品。
常见误用：把函数调用写成 <samp>fetch()</samp>，或者把 HTML 标签当输出内容（如 <samp><div></div></samp>）。这些都不符合语义，屏幕阅读器和搜索引擎会误解上下文。
samp 和 code、kbd、var 怎么区分
它们都属于短语级语义标签，但含义严格不同：
-
samp：只用于「运行结果」，例如File not found: config.json、200 OK、{"status":"success"} -
code：源码片段，比如const x = 42;、<p class="highlight"></p> -
kbd：用户输入的操作，例如<kbd>Ctrl+C</kbd>、<kbd>npm install</kbd> -
var：变量占位符，比如文档中写“传入<var>timeout</var>（毫秒）”
混用会导致可访问性下降。比如把错误堆栈用 code 包裹，就丢失了「这是运行时输出」这一层关键信息。
样式默认行为和兼容性注意点
浏览器对 samp 默认仅设为等宽字体（font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace），不加粗、不换行、无背景。它不会自动触发 white-space: pre，所以换行和连续空格会被合并 —— 这和你预期中「终端输出」的样子不一致。
如果要真实还原输出效果，得手动加样式：
samp {
white-space: pre;
font-family: var(--mono-font, ui-monospace);
}
另外注意：samp 不支持嵌套交互元素（如 <a></a> 或 <button></button>），也不能作为 contenteditable 容器。想高亮其中某段输出？只能靠 CSS ::before/::after 或 JS 拆分 DOM，不能直接往里面塞 span 做语义破坏。
一个真实可用的终端输出示例
假设你在写一篇 Node.js 调试文档，展示 node --version 命令的实际返回：
<p>运行命令：<code>node --version</code></p> <p>输出结果：<samp>v20.11.1</samp></p>
这里 node --version 是用户输入（适合用 kbd），而 v20.11.1 是系统吐出来的字符串，必须用 samp。如果输出带多行，比如 npm ls --depth=0 的结果，就得配合 pre + samp：
<pre class="brush:php;toolbar:false;"><samp>my-app@1.0.0 ├── express@4.18.2 └── lodash@4.17.21</samp>
注意顺序：pre 控制空白和换行，samp 提供语义 —— 反过来（samp 包 pre）是无效的，HTML 规范不允许。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
