samp专用于标记程序运行后真实输出的文本，如终端回显、错误提示等；不可替代code（源码）或pre（格式容器），多行输出须用pre包裹samp，且需转义特殊字符、避免嵌套错误。
samp 是唯一语义正确的选择，不是 code，也不是 pre 单独用——它专为“程序运行后吐出来的那几行字”而生。
为什么不能用 code 包程序输出？
浏览器和屏幕阅读器会把 code 当作“可编写、可执行的源码”，但 console.log("user_id: 123") 的输出 user_id: 123 不是代码，是结果。用错标签会导致：
- 辅助技术误读为“这段文字是 JS 函数”，而非“这是命令执行后的反馈”
- 搜索引擎无法区分文档里的示例代码和真实运行日志
- 语法高亮插件（如 Prism.js）可能跳过该节点，因为没匹配到
pre上下文
多行输出必须套 pre，但 samp 不能丢
samp 是行内元素，不保留换行符或缩进；直接写 <samp>Line1\nLine2</samp> 会被压成一行。正确组合是：
<pre class="brush:php;toolbar:false;"><samp>On branch main<br>Your branch is up to date with 'origin/main'.<br>nothing to commit, working tree clean</samp>
注意几点：
- 用
<br>替代原始换行符（\n）更可控，避免模板引擎吞掉空白 - 别在
samp外层加style="display: block"—— 破坏语义，且部分无障碍工具会忽略样式强制的块级行为 - 若输出含用户输入提示（如
$ git status），提示符用<kbd>$ git status</kbd>，输出部分才用<samp></samp>
和 pre+code 混用时，顺序与转义不能错
当你要同时展示命令、输入、输出三段内容，常见结构是：
<pre class="brush:php;toolbar:false;"><kbd>$ python3 hello.py</kbd><br><samp>Hello, world!<br>The script ran successfully.</samp>
关键约束：
-
samp必须和kbd并列在pre内，不能嵌套在code里（<pre class="brush:php;toolbar:false;"><code><samp>...</samp></code></pre>是无效嵌套） - 所有 HTML 特殊字符（
、<code>>、&）必须手动转义，否则浏览器会解析为标签 ——samp不提供自动转义 - 别给
samp加font-family：它默认继承等宽字体，显式设置反而可能覆盖父级pre的字体栈
最容易被忽略的是：输出内容里混入全角空格、零宽空格（\u200b）或制表符变体，会导致视觉对齐正常但复制粘贴失效。检查方式很简单——把内容粘进 VS Code，打开「显示所有字符」，一眼就能揪出异常空白符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
