samp标签仅提供语义，不控制换行、不保留空格、不强制等宽字体；必须配合css（如font-family: monospace和white-space: pre）及pre元素才能正确呈现格式与语义。
直接说结论：samp 标签本身不控制换行、不保留空格、不强制等宽字体，它只负责告诉浏览器“这段文字是程序运行后吐出来的原始输出”——语义正确了，样式和格式得你亲手补。
为什么写了 samp 却没看到等宽字体？
浏览器对 samp 的默认样式极弱，现代 CSS 重置（如 normalize.css）甚至会抹掉它仅有的 font-family: monospace。它不是“样式开关”，而是“语义声明”。
- 必须显式设置
samp { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; } - 如果父容器用了
font-family: sans-serif，samp会照常继承，不会自动切换 - 旧版 Safari 对
pre > samp的字体继承不稳定，建议在samp上加内联style="font-family: monospace;"或独立规则
多行输出塌成一行？别怪 samp，它本就不是干这个的
samp 是内联元素，和 span 一样，天然忽略换行符和多余空格。写 <samp>Line1\nLine2</samp>，浏览器渲染出来就是 Line1 Line2（中间一个空格）。
- 正确做法：用
<pre class="brush:php;toolbar:false;"><samp>...</samp></pre>组合，pre负责保留空白与缩进，samp负责语义标注 - 不要用多个
samp拼接：<samp>line1</samp><samp>line2</samp>—— 语义断裂，无法被屏幕阅读器识别为连续输出 - 避免在
samp内写<br>：W3C 不鼓励，且破坏内联语义
哪些内容真该用 samp，哪些只是看着像？
判断标准只有一条：这段文本是不是用户在终端、DevTools 或日志文件里**原样看到的程序输出**？不是代码、不是输入、不是人工构造的说明文字。
- ✅ 合法：
<samp>TypeError: Cannot read property 'x' of undefined</samp>（V8 引擎真实报错） - ✅ 合法：
<samp>Compiled successfully.</samp>（Webpack CLI 输出） - ❌ 错误：
<samp>{"id":1,"name":"Alice"}</samp>→ 这是 API 响应体，该用<code class="json"> - ❌ 错误：
<samp>$ npm start</samp>→ 这是用户输入，该用<kbd></kbd> - ❌ 错误：
<samp>[成功] 已上传 127ms</samp>→ “[成功]” 是人工添加的状态标识，污染语义；只保留已上传 127ms才合规
嵌套、转义与可访问性陷阱
samp 允许嵌套短语级标签（如 <var></var>、<strong></strong>），但边界非常清晰——它不处理交互、不隐藏内容、不自动转义。
- 允许：
<samp>Processing <var>input.txt</var> <strong>Done.</strong></samp> - 禁止：
<samp><div>Fatal error</div></samp>→ 浏览器会自动修正 DOM，div被移出，语义丢失 - 危险：
<samp><script>alert(1)</script></samp>→ 后端或 API 返回的内容若未 HTML 转义，会真实执行 - 敏感值（如 token、路径）不能直接放进去：
samp没有隐藏机制，右键“查看源代码”就能看到全量文本
最难的从来不是怎么写标签，而是判断“这到底算不算程序输出”——同一段文本，在调试文档里是 samp，在接口文档里就得是 code。语义边界模糊，但浏览器和屏幕阅读器认得非常死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
