code 表示可执行源码片段，如函数名、配置项、未渲染HTML；samp 表示程序运行后的真实输出，如终端反馈、错误信息、HTTP状态行；二者语义不重叠，混用损害无障碍与SEO。
code 和 samp 都渲染为等宽字体，但语义完全不重叠——混用会导致屏幕阅读器误读、SEO 语义丢失、无障碍测试失败。别靠“看起来像”选标签，得看“它到底是什么”。
什么时候该用 code：你写下来的代码本身
code 表示「可编写、可执行的源码片段」，不是运行结果，也不是输出内容。
- 函数名、方法调用：
document.querySelector()、Array.prototype.map - 配置项或键名：
package.json、timeout、res.status(200) - HTML 片段（未渲染）：
<div class="container"> - 多行代码必须嵌套在
pre中：function greet(name) { return `Hello, ${name}`; } - 错误写法：
<samp>console.log("done")</samp>—— 这是代码，不是输出
什么时候该用 samp：程序跑完后吐出来的那串文字
samp 表示「已执行、不可再编辑的原始输出」，用户在终端、控制台、CLI 工具里真实看到的内容。
- 命令行反馈：
sampnpm install successfully completed/samp - 错误信息（不含堆栈）：
sampError: Cannot find module 'lodash'/samp - HTTP 状态行：
sampHTTP/1.1 404 Not Found/samp - 退出码说明：
sampexit code 1/samp（配合前文如“执行node app.js后”） - 错误写法：
samp{"id":1,"name":"Alice"}/samp—— 这是 API 响应体，不属于终端直接呈现的“程序输出”，该用pre+code并加aria-label="API response body"
samp 不保留换行？必须配 pre 或 CSS 才能显示多行
samp 是内联元素，默认会把换行符和连续空格合并成单个空格——直接写多行文本会变成一行乱码。
立即学习“前端免费学习笔记（深入）”；
- 正确做法（推荐）：
<samp>Traceback (most recent call last): File "main.py", line 5, in <module> x / 0 ZeroDivisionError: division by zero</samp>
- 替代方案（无
pre标签时）：Error: ENOENT: no such file or directory, open 'config.json' - 禁用
pre-line：它会吃掉缩进，破坏堆栈对齐 - 旧版 Safari（≤15.4）可能不继承
pre的等宽字体，建议显式加style="font-family: monospace;" - 别用
div+white-space: pre模拟——失去语义，屏幕阅读器无法识别这是程序输出
容易被忽略的细节：上下文和转义
samp 单独存在没有意义。它必须依附于明确的运行上下文，且所有特殊字符必须实体化。
- 必须有前导说明，例如：
运行
curl -I https://example.com得到响应头：HTTP/2 200 OK server: nginx - 输出中含
<或&必须转义：Error: expected <div> but got ，否则会被解析为标签 - 样式不能只靠默认：某些 CSS 重置库会清空
samp的font-family，务必显式声明等宽字体栈 - 别给
samp加contenteditable或tabindex——浏览器不支持交互行为，辅助技术也基本忽略
真正难的不是记住哪个标签叫什么，而是每次贴一段终端文字前，先问一句：这串字，是人敲进去的？是代码里写的？还是程序跑完后机器吐出来的？答错一个，语义就断了。
