samp标签仅用于标记程序真实生成、用户在终端/控制台实际看到的原始输出，须满足来源、场景、语义三重条件；不达标则导致语义错误、无障碍障碍与SEO受损。

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

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

关键看内容来源和角色：

• code 用于命令本身或代码字面量，比如 git clone https://example.com/repo 或 fetch("/api")
• pre 是纯格式容器，只保留换行与空格，不带语义；常和 code 或 samp 配合使用
• samp 只包裹程序运行后“吐出来”的原始字符串，比如终端里那一行 -rw-r--r-- 1 user staff 1024 Jan 1 12:34 index.html，或控制台中 console.log("done") 真实打印出的 done
• API 响应体（如 {"status":"ok"}）不属于终端输出——它是数据载体，不是系统反馈文本；若你强调“这就是服务端返回的原始字符串”，且上下文明确为展示原始响应，则可用 samp；但若在讲解结构，用 code + 注释更合适

多行输出怎么写才不丢格式也不破语义

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

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 正确做法：用 pre 包裹整个输出块，再把纯文本内容放进 samp ——

  <samp>Error: ENOENT: no such file or directory, open 'config.json'</samp>

• 错误做法：sampError: ENOENT/sampsampno such file/samp（屏幕阅读器可能读成两条独立输出）
• 若需高亮某部分（如错误码 ENOENT），可在 samp 内嵌 strong 或 em，但禁止嵌套 div、p 等块级标签

为什么加了 samp 还是不像终端？样式要怎么补

浏览器默认只给 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 本身不表达成功/失败

最容易被忽略的一点：所有 samp 内容必须是纯输出，一旦混入解释性文字（比如 sampResponse: {"ok":true}/samp 里的 “Response:”），整个标签就语义污染了——那部分得拆出来用普通 span 或 strong。