应使用 samp 标签标记程序运行时的实际输出内容，如终端打印、日志片段、命令返回值；它语义区别于 code（源码）和 pre（格式化容器），默认等宽字体但不保留换行与空格，适合单行纯输出文本。
什么时候该用 samp 标签而不是 code 或 pre
samp 专用于标记「程序运行时产生的实际输出内容」，比如终端打印、日志片段、命令返回值。它和 code（表示源码）、pre（保留格式的块级容器）语义不同——浏览器默认把 samp 渲染为等宽字体，但不换行、不保留空格，也不自带缩进。
常见误用是拿它套整段日志或堆栈跟踪，结果换行丢失、缩进塌陷。真正适合的场景是：单行命令输出、状态提示、HTTP 响应头字段值这类「纯输出文本」。
- ✅ 正确：
<samp>File not found: /etc/config.yaml</samp> - ❌ 错误：
<samp>Traceback (most recent call last):<br> File "main.py", line 12, in <module></samp>（含换行和缩进，该用pre+code）
samp 的样式行为和兼容性注意点
所有现代浏览器都支持 samp，但它没有强制样式继承——如果父元素设了 font-family: sans-serif，samp 会照常继承，不会自动切回等宽字体。必须显式重置：
samp {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace;
}
另外，samp 是行内元素，不能直接包裹多行内容。若输出含换行符（如 \n），需配合 white-space: pre 才能生效，但这样已超出 samp 原始语义，建议改用 pre + code 组合。
立即学习“前端免费学习笔记（深入）”；
嵌套使用 samp 和 kbd 表达交互流程
当文档要模拟用户操作链路（输入 → 输出），可让 kbd 和 samp 配合，体现「人机对话」感：
<kbd>curl -I https://api.example.com/v1/status</kbd> → <samp>HTTP/2 200</samp>
这种写法比全用 code 更准确：前者强调「这是你敲的命令」，后者强调「这是系统吐出来的响应」。注意不要反着嵌套——samp 里套 kbd 逻辑不通，系统输出不会包含键盘按键。
- ✅ 合理：
<samp>Connection refused</samp> (来自 <code>telnet的错误输出) - ❌ 混乱：
<samp><kbd>Ctrl+C</kbd> interrupted</samp>（中断动作是用户行为，不是系统输出）
服务端渲染或 JS 动态插入时的转义风险
如果 samp 内容来自用户输入或 API 返回（比如日志接口），必须对 HTML 特殊字符做转义，否则可能被注入脚本。浏览器不会自动转义 samp 里的内容：
危险示例：<samp><script>alert(1)</script></samp> —— 会真实执行
安全做法：
- 后端模板中用
html.escape()（Python）或htmlspecialchars()（PHP）转义 - 前端 JS 插入时用
textContent而非innerHTML - 避免拼接字符串：
el.innerHTML = '<samp>' + raw + '</samp>'→ 改用el.textContent = raw，再包裹samp元素
很多人只记得转义 pre 或 code，却忽略 samp 同样裸奔——它只是语义标签，不提供任何安全防护。
