samp标签专用于标记程序实际运行后用户在终端、控制台等环境中原样看到的输出结果，如错误信息或命令反馈；不可用于源码、api响应体或虚构示例，多行输出须嵌套在pre中以保留格式。
samp 不是用来“让文字变等宽”的样式开关，它只在内容确实是程序运行后用户真实看到的输出时才合法。用错就等于把错误堆栈当源码、把终端回显当命令输入——语义崩了，可访问性直接掉线。
什么时候必须用 samp，而不是 code 或 pre
判断唯一标准：这段文本是不是程序执行后，用户在终端、控制台或浏览器 DevTools 里**原样看到的结果**？
- ✅ 正确：
samp包裹npm install执行后打印的added 123 packages in 4.2s - ✅ 正确：
samp包裹 Python 报错信息NameError: name 'x' is not defined - ❌ 错误：
samp包裹fetch("/api/users")—— 这是代码，该用code - ❌ 错误：
samp包裹 API 返回的{"id":1,"name":"Alice"}—— 这是响应体，不是用户代理直接呈现的“程序输出”，该用code+class="json" - ❌ 错误：
samp包裹教程里虚构的Success: uploaded in 127ms—— 非真实输出，只是说明文字
多行输出不加 pre 就会塌成一行
samp 是内联元素，浏览器默认会合并换行符和多余空格。写成 <samp>Line1\nLine2</samp>，结果就是 Line1 Line2（中间一个空格）。
- 必须用
<pre class="brush:php;toolbar:false;"><samp>...</samp></pre>组合，靠pre保留空白符 -
pre已自带等宽字体，但套samp是为了语义准确 —— 屏幕阅读器能读出“这是程序输出”，而单用pre只知道“这是预格式化文本” - 旧版 Safari 对
pre > samp的字体继承不稳定，建议显式加style="font-family: ui-monospace, monospace;" - 别用多个
samp标签拼接多行：<samp>line1</samp><samp>line2</samp>—— 语义断裂，样式难统一
samp 里怎么安全嵌套强调或变量
samp 允许嵌套短语级标签，但禁止块级元素或交互控件。
- ✅ 允许：
<samp>Processing <var>input.txt</var>... <strong>Done.</strong></samp> - ✅ 允许：
<samp>Error: <em>file not found</em></samp> - ❌ 禁止：
<samp><div>Fatal error</div></samp>—— 浏览器会自动修正 DOM，div被移出，语义丢失 - ❌ 禁止：
<samp><button>Copy</button></samp>——samp不支持交互，tabindex和contenteditable基本无效 - 敏感内容（如 token）不能直接放进去 ——
samp没有隐藏机制，右键“查看页面源代码”就能看到全量文本
样式必须手动加，浏览器默认几乎没用
浏览器对 samp 的默认样式仅可能设 font-family: monospace，不保证换行、不保留空格、无背景、无内边距。上线前不加 CSS，等于裸奔。
- 至少加这两条：
white-space: pre-wrap（保留换行+自动折行）或white-space: pre（严格保留所有空白，禁用折行） - 显式声明字体栈：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace，避免依赖 UA 默认 - 别用
text-indent: -9999px或clip隐藏内容 —— 屏幕阅读器也读不到，违背语义初衷 - 如果要点击展开/收起，优先用
<details><summary></summary><samp>...</samp></details>，原生语义完整，无需 JS
最难处理的其实是那种既要语义正确、又要动态控制可见性、还得兼容 IE11 以下老环境的场景 —— 这时候 samp 往往得让位给更务实的方案，比如服务端渲染时转义后塞进 code，再靠 JS 控制显示逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
