samp 标签专用于标记程序或系统的真实输出结果，如命令行返回、日志片段、api 响应体（纯文本），需手动处理换行与空格，并严格区别于 code、kbd、var 的语义用途。
用 samp 标签包裹纯文本输出内容
samp 是语义化标签，专用于标记程序或系统的**真实输出结果**，比如命令行返回、日志片段、API 响应体（纯文本时）。它不负责格式化，也不自动换行或保留空格——这点常被忽略。
常见错误是把代码逻辑、输入命令甚至带语法高亮的内容塞进 samp。它只该放“运行后你眼睛看到的那一串字符”，例如：
<samp>File not found: config.json</samp>
如果输出含多行，需手动用 <br> 换行，或配合 white-space: pre 的 CSS；否则所有换行和缩进都会被浏览器合并为单空格。
别和 code、kbd、var 混用
语义混淆是最大坑。这几个标签分工明确：
-
code：表示一段**源代码**（如console.log("hello")） -
kbd：表示用户**输入的按键或命令**（如npm install --save-dev） -
var：表示一个**变量名或参数占位符**（如<var>filename</var>） -
samp：仅表示程序**执行后吐出来的结果字符串**（如<samp>installed 12 packages</samp>）
混用会导致无障碍阅读器误读、SEO 语义失真，也影响后续样式统一维护。
在终端模拟场景中需配合 CSS 控制换行与字体
纯 samp 默认使用等宽字体，但不会保留换行、制表符或连续空格。若要还原真实终端输出效果，必须加样式：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
samp {
white-space: pre;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
}
注意：pre 值会保留所有空白符，但也会禁用自动折行——长输出可能撑破容器。更稳妥的是 pre-wrap，它既保留换行/空格，又允许折行：
samp { white-space: pre-wrap; }
另外，某些旧版 Safari 对 samp 的默认字体继承不一致，显式声明 font-family 更可靠。
服务端渲染或动态插入时注意 HTML 转义
如果 samp 内容来自用户输入、日志文件或 API 响应，里面可能含 、<code>>、& 等字符。直接 innerHTML 插入会触发解析，导致截断或 XSS 风险。
正确做法是先转义再插入：
- 前端 JS 动态写入：用
textContent而非innerHTML - 服务端模板（如 EJS、Jinja）：启用自动转义，或手动调用
escape()类函数 - Node.js 中可借助
he.escape()库处理特殊字符
比如原始输出是 user <admin> logged in</admin>，不转义会变成 user <admin> logged in</admin>，浏览器以为 <admin></admin> 是未闭合标签，后续内容可能消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
