<samp> 用于标记程序或系统的输出内容，如终端打印、错误消息、API 返回的 JSON；<code> 用于表示源代码或机器可读文本，如函数定义、HTML 片段、SQL 查询；二者语义不可互换，影响可访问性、SEO 和工具解析。
<samp> 和 <code> 都是 HTML 中语义明确的内联标签，但它们承担不同角色：前者专用于标记程序或系统的输出内容，后者则专用于表示计算机源代码或其他机器可读文本。混淆使用会削弱文档语义结构，影响可访问性、SEO 及未来工具（如代码分析器、屏幕阅读器）的理解。
核心语义分工
语义差异不是样式问题，而是意图表达：
- <code>：描述“人写的、供机器执行的指令”，比如函数定义、HTML 片段、SQL 查询语句；
- <samp>：描述“机器运行后产生的结果”，比如终端打印、错误消息、API 返回的 JSON 字符串、命令行输出片段。
典型使用场景对比
实际写作中，关键看这段文本在上下文中是输入还是输出：
- 写
<div class="container">—— 用<code>，这是开发者编写的 HTML 源码； - 显示终端提示：npm install --save react —— 用 <samp>，这是用户键入后系统回显的命令本身（非执行逻辑，而是呈现行为）；
- 展示运行结果：{"status":"ok","count":42} —— 用 <samp>，这是 API 调用返回的原始响应体；
- 展示一段 JS 函数：
function greet(name) { return `Hello, ${name}`; }—— 用<code>，这是可被解释执行的代码逻辑。
样式与兼容性注意事项
两者默认都渲染为等宽字体，但语义不可互换：
- 不要用
<code>包裹错误信息（如Error: ENOENT），它不是代码，而是运行结果，应使用 <samp>； - 避免嵌套滥用：例如
<code><samp>output</samp></code>是语义冲突的——输出不是代码； - 若需强调某段输出中的变量名，可用 嵌套在 内，如 File not found: filename.txt；
- 所有现代浏览器均原生支持这两个标签，无需额外 polyfill。
辅助工具与可访问性价值
正确使用带来实际好处：
- 屏幕阅读器可能对 添加“示例输出”提示，对
提示“代码片段”，帮助视障开发者区分上下文； - 静态站点生成器或文档提取工具（如 DocFX、Sphinx 插件）能基于语义自动归类代码块与运行日志；
- 未来浏览器或 IDE 插件可能为 添加复制响应内容、模拟终端粘贴等快捷操作。
