samp 标签语义化表示程序输出结果，需配合 pre 保留换行空格，不可替代 code（源码）或 kbd（按键），避免嵌套与 xss 风险。
用 samp 标签包裹程序输出内容
samp 是 HTML 中语义化表示「程序输出样本」的标签，专用于展示命令行、控制台或脚本执行后的真实输出结果（比如 python script.py 运行后打印的几行文本）。它不改变样式，默认是等宽字体，但关键在语义——告诉浏览器和辅助工具“这是运行结果”，而非代码本身或用户输入。
常见错误是把输出和代码混用 code 或 pre：比如把 print("Hello") 的输出 Hello 也套进 code，这会丢失语义区分。输出不是源码，不该用 code。
实操建议：
- 只包裹纯输出文本，不含提示符（如
$、>>）；若需保留提示符，用span单独标记，或改用pre+code组合 - 多行输出可直接换行，
samp允许包含br，但更推荐配合pre使用（见下一条） - 避免嵌套
samp—— 输出里再出现“输出”应另起标签，不层层包裹
多行输出必须配合 pre 才能保留换行和空格
samp 本身是行内元素，遇到换行符或多个空格会被浏览器合并为单个空格。所以像 Python print("A\nB") 的实际输出 A↵B，光用 <samp>A\nB</samp> 会显示成 A B（同一行）。
正确做法是用 pre 包裹 samp，利用 pre 的空白符保留特性：
<pre class="brush:php;toolbar:false;"><samp>Traceback (most recent call last):
File "test.py", line 3, in <module>
x / 0
ZeroDivisionError: division by zero</module></samp>
注意：pre 已自带等宽字体，里面再套 samp 主要是强化语义。如果只要视觉效果，单用 pre 也行，但语义不明确。
容易踩的坑：
- 误用
div+white-space: pre替代pre：虽能显示换行，但失去 HTML 内置语义和默认样式一致性 - 在
pre外再套code：变成<pre class="brush:php;toolbar:false;"><code><samp>...</samp></code></pre>，冗余且可能触发语法校验警告 - 缩进用空格还是 Tab？保持和真实终端一致即可，
pre会原样渲染
与 code、kbd 的分工要清晰
HTML 中这三个标签常被混淆：
-
code：表示「源代码片段」，比如函数调用fetch("/api/data")或变量名user_id -
samp：表示「程序执行后吐出来的结果」，比如 API 返回的 JSON 字符串{"status":"ok"}或错误信息Connection refused -
kbd：表示「用户实际按下的键」，比如快捷键<kbd>Ctrl+C</kbd>，不是命令本身，也不是输出
一个完整场景示例（Node.js 脚本运行）：
<p>执行命令：<code>node app.js</code></p> <p>输出结果：</p><pre class="brush:php;toolbar:false;"><samp>Server listening on port 3000 Connected to database Ready.</samp>
中断操作：按 Ctrl+C
如果把输出写成 <code>Server listening...，搜索引擎和屏幕阅读器无法区分这是代码还是运行反馈，影响可访问性。
现代框架中注意 SSR/SEO 场景下的语义保留
在 React/Vue 等框架中动态插入输出内容时，容易忽略语义标签。比如用 v-html 或 dangerouslySetInnerHTML 渲染字符串，若原始数据含换行，直接塞进 samp 会丢失格式。
实操要点：
- 服务端渲染时，确保输出字符串中的
\n被转义为 HTML 换行（即用pre包裹），而不是靠 JS 后续处理 - 若输出来自 API，返回字段应明确区分
command、output、error，前端分别用code、samp、samp（或加 class 标识错误） - 不要依赖 CSS 强制让
samp变成块级并保留空白——这绕过了语义，且在无样式环境下失效
最易被忽略的是：当输出内容含 HTML 字符（如 <div>OK</div>）时，samp 不做转义，必须由开发者手动 textContent 插入或实体化 <，否则造成 XSS 或解析错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
