<samp>表示程序或系统的输出结果，<code>表示计算机可执行的代码片段；二者语义不同，影响屏幕阅读器理解、seo及未来语义化解析。
html 中 <samp> 和 <code> 的语义区别到底在哪
二者都渲染为等宽字体，但浏览器默认样式几乎一样，真正差别在语义和辅助技术处理上。<code> 表示「计算机可执行的代码片段」，<samp> 表示「程序或系统的输出结果」——比如命令行回显、日志打印、API 返回体。用错不会报错，但会影响屏幕阅读器理解、SEO 微数据提取，以及未来可能的语义化解析。
-
<code>适合：console.log()、fetch()调用、CSS 类名.btn-primary、jsON key"id" -
<samp>适合：终端输出404 Not Found、http 响应头Content-Type: application/json、错误栈中的TypeError: Cannot read Property 'x' of undefined - 别把整个 HTML 示例块包进
<samp>——那是代码，不是输出；也别把npm install的执行结果截图文字写成<code>——那是输出，不是指令
实际项目里为什么几乎没人用 <samp>
因为多数开发者只关注视觉效果，而 <samp> 没有独立样式优势，又不像 <code> 那样常被 CSS 重置（比如 pre code { font-size: .9em; }）。更关键的是：文档生成工具（如 JSDoc、Docusaurus）、静态站点生成器（如 Hugo、Astro）默认不识别 <samp>，也不会给它加语法高亮或 hover 提示。
- 如果你在写技术文档且需要区分「输入」和「输出」，
<samp>是唯一语义正确的选择；否则，用<code>加文字说明（如"输出："）更省事 - 某些 Markdown 解析器（如 Remark）不支持
<samp>内联标签，直接写会原样输出字符串，导致语义丢失 - VS Code 或 webstorm 的 HTML 校验默认不警告
<samp>误用，但 W3C Validator 会提示「<samp>should only contain text that is a sample output from a program or script」
怎么快速判断该用 <code> 还是 <samp>
问自己一句：这段文字在真实运行环境中，是「人敲进去的」，还是「机器吐出来的」？前者用 <code>，后者用 <samp>。注意边界情况：
- API 请求体（JSON）是人写的 →
<code>{"name": "Alice"}</code></li> <li>API 响应体（JSON）是服务端返回的 → <code><samp>{"id": 123, "status": "ok"}</samp></li> <li>Shell 命令本身（<code>ls -la）→
<code>ls -la</code></li> <li>执行后终端显示的文件列表 → <code><samp>drwxr-xr-x 2 user staff 64 Jan 1 10:00 Documents</samp></li> <li>正则表达式字面量 <code>/d+/g是代码 →
<code>/d+/g</code></li> <li>正则匹配结果 <code>"123"是输出 →
<samp>123</samp></li> </ul> <H3>兼容性和样式微调的现实约束</H3> <p>所有现代浏览器都支持 <code><samp>，但它的默认
font-family依赖系统等宽字体链，且没有<code>那样常被 reset.css 影响。如果你统一设置了code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular; }，那视觉上就真没区别了——这时候语义就是唯一价值。立即学习“前端免费学习笔记（深入）”；
- 不要指望靠
samp实现「灰色背景+圆角」——那是设计需求，该用<span class="output">+ CSS - SSR 框架（如 Next.js）中，
<samp>在服务端渲染时不会触发任何特殊逻辑，跟<span>一样轻量 - 最常被忽略的一点：当
<samp>包含换行符或缩进时，HTML 空白符处理规则会让它塌缩成单行——必须配合white-space: pre才能保留格式，而<code>常因父级<pre>自带该行为
语义标签的力气不在渲染上，而在它让一段文本在脱离上下文后依然能被准确归类——这点在自动化文档抽取、无障碍导航、甚至未来 LLM 解析网页结构时，都会悄悄起作用。
- 不要指望靠