应优先用 samp 标记单行程序输出样本文本（如错误信息），用 pre 渲染多行需保留格式的日志；避免 pre 套 samp 的错误嵌套，多行日志需加滚动和等宽字体控制，samp 需显式声明 monospace 字体确保跨浏览器一致。
什么时候该用 samp 而不是 pre
samp 是语义化标签，专用于标记「程序或系统输出的样本文本」，比如命令行返回值、日志片段、错误信息。它不保留换行和空格，本质是行内元素；而 pre 是块级容器，只负责按原样渲染空白符和换行——它不管内容是不是“输出”，纯样式用途。
如果你贴一段带缩进、多行、含时间戳和堆栈的 systemd 日志，pre 是必须的；但如果只想高亮其中一行 Failed to start nginx.service 作为示例说明，用 samp 更准确。
pre 套 samp 是常见但错误的嵌套
很多人写成 <pre class="brush:php;toolbar:false;"><samp>...</samp></pre>，以为能兼顾语义和格式，其实没必要，还可能触发意外样式冲突（比如某些 CSS 重置了 samp 的字体，再套 pre 就乱了）。
正确做法是：多行日志直接用 pre，需要强调某段输出语义时，单独用 samp：
Dec 05 14:22:31 server sshd[12345]: Failed password for root from 192.168.1.100 port 54321 ssh2 Dec 05 14:22:33 server sshd[12345]: Connection closed by authenticating user root 192.168.1.100 port 54321 [preauth]
如果文档中要解释「上面日志里这行表示认证失败」，就写：<samp>Failed password for root</samp>。
日志太长时，pre 需加滚动和字体控制
原始日志常带长路径、十六进制地址、超长行，直接放 pre 会撑破容器或折行错乱。必须手动限制宽度并启用横向滚动：
- 给
pre加 CSS：white-space: pre; overflow-x: auto; max-width: 100%; font-family: monospace; font-size: 0.9em; - 避免用
word-wrap: break-word——它会把/var/log/journal/xxxxxx拆成两行，破坏路径可读性 - 如果日志含 ANSI 颜色码（如
\x1b[31mERROR\x1b[0m），pre不解析，得先转义或用专门库（如ansi-to-html）处理
samp 的默认样式在不同浏览器里不一致
Chrome 默认给 samp 设 font-family: monospace，Firefox 却可能继承正文字体。如果文档里混用 samp 和 code，建议统一声明：
samp {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}
别依赖浏览器默认行为——尤其当你的日志片段要嵌入 PDF 或邮件模板时，样式丢失会让 samp 看起来和普通文字没区别。
真正麻烦的是混合场景：比如一个 pre 里既有时间戳（需等宽对齐），又有 JSON 字段（想用 samp 标记 key 名）。这时候语义优先级高于样式，老实用 pre + 内联 <span class="key">status</span> 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
