怎样显示程序执行结果_SAMP标签模拟系统反馈文本-html教程-PHP中文网

samp标签仅用于标记程序真实生成、用户在终端中实际看到的原始输出文本，需同时满足来源真实、场景明确、角色为“输出”三条件；否则应选用code或pre。

怎样显示程序执行结果_samp标签模拟系统反馈文本

samp 标签不是“让文本看起来像终端输出”的样式工具，它只在满足三个硬性条件时才该用：内容是程序真实生成的、用户真正在终端/控制台里看到的、上下文明确为“输出”——不达标就别硬套，否则语义错乱、辅助技术误读、SEO 反效果。

关键看内容来源和角色：

samp 只包裹程序运行后“吐出来”的原始字符串，比如 ls -l 执行后终端里那一行 -rw-r--r-- 1 user staff 1024 Jan 1 12:34 index.html
code 用于命令本身或代码字面量，比如 git commit -m "init" 或 fetch("/api")
pre 是格式容器，负责保留换行缩进；samp 是语义容器，负责声明“这是输出”。二者常配合：<pre class="brush:php;toolbar:false;"><samp>Traceback (most recent call last):</samp></pre>
API 响应体（如 {"status":"ok"}）不属于终端输出，不该用 samp —— 它是数据载体，不是系统反馈文本

samp 是内联元素，自身不保留换行。直接写多行会塌成一行，但又不能靠多个 samp 拼接（语义断裂）：

正确做法：用 pre 包裹整个输出块，再把纯文本内容放进 samp —— <pre class="brush:php;toolbar:false;"><samp>Error: ENOENT: no such file or directory, open 'config.json'</samp></pre>
错误做法：<samp>Error: ENOENT</samp><br><samp>no such file...</samp>（语义割裂，屏幕阅读器可能读成两条独立输出）
若需高亮某部分（如错误码 ENOENT），可在 samp 内嵌 strong 或 em，但禁止嵌套 div、p 等块级标签

浏览器默认只给 samp 设等宽字体，但真实终端还有背景色、边距、圆角、文字颜色等。这些必须靠 CSS 补齐，且建议写死字体栈：

基础样式建议：samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; background-color: #f6f6f6; padding: 4px 6px; border-radius: 3px; }
不要只依赖 font-family: monospace —— 不同系统 fallback 差异大，SFMono-Regular（macOS）、Consolas（Windows）必须显式列出
避免用 white-space: pre-wrap 单独作用于 samp —— 它对内联元素支持不稳定；真正需要换行控制，请交给外层 pre
错误信息可用 samp.output-error 类 + 红色文字 + ❗图标，但状态含义必须由外层 div role="alert" 承担，samp 本身不表达成功/失败