samp标签语义上表示程序输出，浏览器默认用等宽字体渲染，但样式可能被CSS重置覆盖；需检查计算样式或显式设置font-family: monospace，推荐pre+samp组合确保格式与语义准确。
用 samp 标签包裹程序输出时，为什么文字没变等宽？
因为 samp 本身不强制样式，它只是语义标签；浏览器默认用 font-family: monospace 渲染，但这个行为可能被 CSS 重置或覆盖。常见干扰项包括：全局设置了 body { font-family: sans-serif }、CSS 重置库清除了内联元素的默认字体、或者父容器指定了 font-family 且未在 samp 上显式继承。
实操建议：
- 检查开发者工具中
samp元素的计算样式，确认font-family是否为monospace - 如需稳定效果，直接加内联样式：
<samp style="font-family: monospace;">error: file not found</samp> - 更推荐统一定义：
samp { font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; } - 注意：不要只靠
samp实现视觉效果——若目标是“看起来像终端”，pre+samp组合更可靠
samp 和 code、pre 混用时怎么选？
三者语义不同，混用会导致可访问性下降或语义混乱。例如把一段 Python 脚本用 samp 包裹，屏幕阅读器会误读为“这是程序运行结果”，而实际是代码本身。
判断依据：
立即学习“前端免费学习笔记（深入）”；
-
code：表示「源代码片段」，比如print("hello") -
samp：表示「执行后的真实输出」，比如hello（不含引号，无语法高亮，就是终端里打印出来的那行） -
pre：仅负责「保留换行与空格」，无语义，常作为容器配合samp使用，如<pre><samp>Traceback (most recent call last):<br> File "test.py", line 1, in <module><br> 1/0<br>ZeroDivisionError: division by zero</samp></pre> - 嵌套规则：允许
pre>samp，也允许samp内含code（如输出里带了命令名），但禁止code>samp
表单错误提示里该不该用 samp？
不该。除非错误文本明确来自后端程序执行的原始响应（比如调用 CLI 工具返回的 stderr），否则属于 UI 层提示，用 span 或带 role="alert" 的元素更合适。
典型误用场景：
-
<span class="error"><samp>邮箱格式不正确</samp></span>→ 错误。这是前端校验文案，不是程序输出 -
<div aria-live="polite"><samp>curl: (7) Failed to connect to api.example.com port 443: Connection refused</samp></div>→ 正确。这是真实 curl 命令执行失败的 stderr 输出 - 辅助技术依赖语义：用错标签会让屏幕阅读器读成“样本输出”，造成理解偏差
- SEO 和结构化数据提取也会因语义失准而忽略关键信息
服务端渲染 HTML 时动态插入 samp 输出要防什么？
重点防字符转义缺失导致 XSS 或 DOM 解析失败。因为 samp 内容是纯文本输出，但用户输入或日志内容可能含 、<code>& 等符号。
必须处理：
- 所有动态插入到
samp中的内容，先做 HTML 实体转义：将→ <code><，&→&，"→" - 不要用
innerHTML直接注入未过滤的字符串，尤其来自stderr或日志文件的原始行 - Node.js 后端可用
he.escape()，PHP 可用htmlspecialchars()，Python 可用html.escape() - 如果输出本身含 ANSI 颜色码（如
\x1b[31merror\x1b[0m），需额外清洗或用专用库转义+渲染
samp 不是“看起来像输出”的样式开关，而是告诉机器“这行字是程序吐出来的”。一旦脱离这个前提，它就退化成一个没意义的 span，还可能拖累可访问性和维护性。 
