应使用 samp 标签表示程序或系统的实际输出结果，如终端命令执行后的文字；code 用于源代码、变量名等，“hello”输出须用 samp 而非 code，ls -la 输入应为 kbd，HTML 标签用 code，samp 内不可嵌套 kbd 或 code，需转义 HTML 字符。
什么时候该用 samp 而不是 code
samp 表示程序或系统的**实际输出结果**，比如终端里跑完命令后打印的那几行文字；code 是泛指源代码片段、变量名、函数名这类“写出来的代码”。混淆两者会导致语义错误，影响可访问性（屏幕阅读器会据此朗读不同语气）和 SEO。
常见误用场景：
- 把
console.log("hello")的输出"hello"包在code里 —— 应该用samp - 把 Bash 命令
ls -la本身写成samp—— 这是输入，该用kbd - 把 HTML 标签如
<div>当作“输出”渲染 —— 它本质是标记，用code更准确
samp 和 kbd 搭配使用的典型流程
一个完整的命令交互示例，包含用户输入、系统响应、关键提示，三者语义必须分离：
<p>运行命令：<kbd>curl -I https://example.com</kbd></p> <p>返回结果：<samp>HTTP/2 200<br>server: nginx<br>content-type: text/html</samp></p> <p>注意其中 <code>200</code> 表示请求成功。</p>
说明：
立即学习“前端免费学习笔记（深入）”；
-
kbd仅包裹用户主动敲击的内容（含组合键如<kbd>Ctrl</kbd>+<kbd>C</kbd>） -
samp必须是真实输出文本，不能带 HTML 标签（否则需转义，如） -
code用于代码结构体（函数、标签、属性名），不参与交互流程
样式兼容与默认表现差异
浏览器对这三者的默认样式基本一致（等宽字体、无衬线），但语义不可互换。CSS 中可通过属性选择器区分：
kbd { background: #f0f0f0; padding: 2px 4px; border-radius: 3px; }
samp { color: #2a7e19; }
code { font-size: 0.95em; }
注意事项：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要给
samp加white-space: pre-wrap以外的强制换行控制 —— 输出内容本身可能含换行，应由内容决定 - 若
samp内含长路径或堆栈（如/usr/local/bin/node: line 2: exec: node: not found），建议用pre+samp组合保留缩进和换行 - IE8 及更早版本不支持
samp，但现代项目基本无需考虑；若需兼容，可用span加role="text"替代（非推荐，仅应急）
容易被忽略的嵌套边界
samp 内部不能出现 kbd 或 code，因为输出内容就是纯文本流。反例：
❌ 错误：<samp>Error: Cannot find module <code>fs</code></samp>
✅ 正确：<samp>Error: Cannot find module 'fs'</samp> —— 单引号是输出的一部分，不是语义标记
如果输出中恰好包含 HTML 标签字符串（比如调试时打印 DOM 字符串），必须转义：
✅ 正确：<samp><div class="app">Loading...</div></samp>
否则浏览器会尝试解析并破坏结构。这个转义动作常被跳过，导致页面显示异常或 DOM 树错乱。
