samp标签有什么用？HTML计算机输出示例全解析-html教程-PHP中文网

samp标签专用于标记计算机实际输出的原始文本，如终端报错、api响应体；必须转义html特殊字符，显式设置等宽字体，并避免混入解释性文字。

samp标签有什么用？html计算机输出示例全解析

标签不是用来“加等宽字体”的样式工具，它是语义标记——告诉浏览器和辅助技术：“这段文字是程序或系统实际输出的结果”，比如终端报错、命令回显、API 响应体原始文本。用错地方，可访问性就崩了。

什么时候必须用 `samp`，而不是 `code` 或 `pre`

关键看内容性质：

code：包裹源码、函数名、变量名等“人类写的代码”——比如 console.log()、fetch()
pre：只管保留换行与空格，不带语义；常和 code 套用，但本身不说明“这是什么”
samp：只用于“计算机吐出来的结果”，且是用户代理（如终端、浏览器控制台）**实际呈现的原始输出**——比如 Error: Cannot find module 'fs'、{"status":"ok","count":42}
API 响应体如果直接贴进页面展示，且你强调“这就是服务端返回的原始字符串”，那适合用 samp；但如果在讲解响应结构，用 code + 注释更合适

`samp` 里要手动转义特殊字符

它只是个语义容器，不自动做 HTML 转义。如果你把未处理的 API 返回值塞进去，<script>alert(1)</script> 会真执行。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

服务端返回的 JSON 字符串，需先对 、<code>>、& 做 HTML 实体转义，再放进 samp
前端 JS 动态插入时，别用 innerHTML；改用 textContent 或框架的安全插值机制（如 React 的 {JSON.stringify(data)}）
常见漏转场景：错误信息含 HTML 标签（如后端返回 <div>Internal Error</div>），直接塞进 samp 就 XSS

样式不能靠浏览器默认，得自己写 CSS

虽然多数浏览器给 samp 设了 font-family: monospace，但这不是规范强制要求，CSS 重置后可能失效。

必须显式声明：samp { font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
单行输出建议加 white-space: nowrap; overflow-x: auto; 防折断
多行输出要配合 pre 使用：<pre class="brush:php;toolbar:false;"><samp>...</samp></pre>，否则换行符会被忽略
别给 samp 加 onclick 或 tabindex——它不是交互元素，加了反而误导屏幕阅读器