如何用HTML samp标签展示长尾词的代码输出示例？

本文共计1146个文字，预计阅读时间需要5分钟。

python程序实际运行后，用户在终端、控制台或浏览器中看到的原始输出结果，例如：

常见误用场景包括：把 API 返回的 JSON 字符串直接套 samp、把日志文件内容整段包进去、或者用它替代 code 来显示函数调用——这些都违背语义，会干扰屏幕阅读器对内容类型的判断。

• ✅ 正确：<samp>npm install</samp> 退出码 1（终端命令执行后的反馈）
• ❌ 错误：<samp>fetch('/api/users')</samp>（这是代码，不是输出）
• ❌ 错误：<samp>{"id":1,"name":"Alice"}</samp>（API 响应体，不属于用户代理呈现的“程序输出”）

samp 必须配合 pre 才能显示多行输出

samp 是内联元素，不保留换行和多余空格。如果输出含堆栈跟踪、多行日志或命令回显，直接写 <samp>Line1\nLine2</samp> 会被浏览器压成一行，视觉上完全不可读。

正确做法是用 pre 包裹 samp，利用 pre 的空白符保留能力，同时保持语义准确：

立即学习“前端免费学习笔记（深入）”；

<pre><samp>Traceback (most recent call last): File "main.py", line 3, in <module> print(undefined_var) NameError: name 'undefined_var' is not defined </samp></pre>

• 不要反过来把 pre 套在 code 外面来模拟输出——那只是视觉模仿，语义错位
• 若输出中需强调某部分（如错误类型 NameError），可用 strong 嵌套在 samp 内，但避免用 CSS 类强行加粗
• 注意：某些旧版 Safari 对 pre > samp 的等宽字体继承不稳定，建议加 style="font-family: monospace;" 显式声明

samp 不支持交互，也不能嵌套块级元素

samp 仅承载语义，不代表可点击、可复制或可编辑。浏览器不会给它默认添加任何交互行为，也不支持 contenteditable 或 tabindex 等属性生效（即使 HTML 规范说它支持全局属性，实际可访问性支持极弱）。

它只能包含纯文本或其他短语级内联标签，比如 em、strong、var，但绝不能包含 div、p、ul 这类块级元素。

• ✅ 允许：<samp>Processing <var>input.txt</var>... Done.</samp>
• ❌ 无效：<samp><div>Fatal error</div></samp>（解析时会被浏览器自动修正，语义丢失）
• ❌ 危险：<samp><script>alert(1)</script></samp>（若内容来自用户输入且未转义，有 XSS 风险）

浏览器渲染和可访问性的真实表现

所有主流浏览器默认用等宽字体渲染 samp，但这个样式可以被 CSS 覆盖——而一旦覆盖，就只剩语义，没有视觉提示。辅助技术（如 NVDA、VoiceOver）会识别 samp 并可能用略带机械感的语音朗读，提示这是“机器生成的结果”，而非人工描述。

但要注意：这个提示效果高度依赖用户代理实现，不能当作功能保障。如果你的文档目标读者包含大量视障用户，务必确保上下文已明确说明这是输出示例（比如前文写“运行后终端显示如下：”），不能只靠 samp 标签本身传递全部信息。

• 不要指望 samp 自动触发复制按钮或高亮功能——这些得自己用 JS 实现
• 在 dark mode 下，等宽字体颜色若没做适配，可能对比度不足，需额外检查 WCAG AA 标准
• 若输出中含 ANSI 转义序列（如 \x1b[31mERROR\x1b[0m），samp 不会解析它们，必须先转换为 HTML 标签或纯文本