必须用 而非 或纯文本，仅当内容是程序真实运行后用户在终端、控制台或 devtools 中原样看到的输出字符串时才合法；它语义化声明“这是程序吐出的结果”，多行输出须配合 使用，且需手动设置等宽字体 css。
什么时候必须用 ，而不是 或纯文本
只在内容是程序真实运行后、用户在终端、控制台或 DevTools 里**原样看到的输出字符串**时才用 。它不是“看起来像输出就行”，而是语义上声明“这串文字是程序吐出来的结果”。
✅ 正确：Error: Cannot find module 'fs'（Node.js 控制台实际打印）
✅ 正确：HTTP/2 200（curl -I 命令返回的状态行）
❌ 错误：fetch('/api/users')（这是代码，该用 ）<br>❌ 错误：<samp>{"id":1,"name":"Alice"}</samp>（这是 API 响应体，该用 <pre class="brush:php;toolbar:false;"><code class="json">）<br>❌ 错误：<samp>Success: uploaded in 127ms</samp>（虚构示例，无真实执行上下文）</code></pre>
必须配合 才能显示多行输出
是内联元素，浏览器默认会把换行符 \n 和多余空格压缩成单个空格。直接写 Line1\nLine2，页面上就是 “Line1 Line2”。
正确做法是用 包裹：<pre class="brush:php;toolbar:false;"><samp>Traceback (most recent call last):<br>File "main.py", line 3, in <module><br> print(undefined_var)<br>NameError: name 'undefined_var' is not defined</module></samp>
注意：<samp> 是合法嵌套；反过来 <samp><pre class="brush:php;toolbar:false;"> 是 HTML 规范禁止的。<br>旧版 Safari 对 <pre class="brush:php;toolbar:false;"> > <samp> 的字体继承不稳定，建议显式加 style="font-family: ui-monospace, monospace;"</samp>
嵌套与转义：哪些能放进去，哪些不能
允许嵌套短语级标签，但禁止块级元素或交互控件：
✅ 允许：Processing input.txt Done.
✅ 允许：Connection refused
❌ 禁止：
❌ 禁止：（ 不支持交互，tabindex 和 contenteditable 基本无效）
如果内容来自用户输入或 API（比如日志接口），必须对 、& 做 HTML 实体转义：
危险：<script>alert(1)</script> → 会真实执行
安全：后端用 html.escape()（Python）或 htmlspecialchars()（PHP）转义；前端 JS 动态插入时用 textContent 或先转义
样式不能靠默认，但别用 display: block 强行改语义
浏览器对 的默认样式几乎为零：只可能设 font-family: monospace，不保留空格、不换行、无背景、无 padding。
必须手动加 CSS 才能可靠呈现：
{ font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace; }
若输出含换行且需视觉换行，不要给 加 display: block —— 这破坏内联语义，干扰可访问性树。
真正需要换行时，坚持用 <samp> 组合，并配 white-space: pre-wrap（仅当需折行时）；<br>敏感内容（如 token、密码）别直接塞进 <samp> —— 没隐藏机制，右键“查看源代码”就全暴露</samp></samp>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
