samp标签语义职责是标记程序或系统实际输出内容，如终端回显、API响应体、错误提示等；它专指运行后真实呈现的结果，不可用于命令、源码或变量名，且需保留原始格式与可访问性。
什么是 samp 标签的语义职责
samp 是 HTML 中专用于标记「程序或系统实际输出内容」的语义化标签，不是用来包裹任意代码、命令或伪代码的。它的核心作用是表示“这段文本是某次执行后屏幕上真实出现的结果”，比如终端回显、日志片段、API 响应体（纯文本形式）、错误提示字符串等。
- 它和
code、kbd、var各有分工：code表示源码片段，kbd表示用户输入，var表示变量名，而samp只对应输出结果 - 浏览器默认会用等宽字体渲染，但样式可覆盖；语义不可替代——用
div或span加 class 模拟，会丢失可访问性（如屏幕阅读器可能无法识别其输出属性） - 不要嵌套
samp在pre里再手动换行：如果输出含多行，应保留原始换行符并配合white-space: pre控制，而非靠多个samp标签拼接
什么时候该用 samp，而不是 code 或 pre
判断依据只有一个：这段文本是不是「运行后产生的结果」？
-
✅ 适合：
samp-
npm install执行后终端打印的added 123 packages in 4.2s - curl 请求返回的 JSON 片段：
{"status":"ok","count":42} - Python 脚本 print 的输出：
FileNotFoundError: No such file
-
-
❌ 不适合：
samp立即学习“前端免费学习笔记（深入）”；
- 命令本身：
ls -la→ 应用kbd或code - 函数定义：
def hello(name):→ 用code - 大段带缩进的源码 → 用
pre+code组合
- 命令本身：
注意：如果输出中混有用户可控内容（如日志里插了变量值），仍可用
samp，但需确保内容已转义，避免 XSS（例如服务端渲染时对、<code>"做 HTML 实体编码）
samp 的常见误用与修复方式
-
把命令行提示符（如 $ 或 C:\>）一起包进 samp：这是输入前缀，不属于输出。正确做法是只包裹实际输出部分
<!-- 错误 -->
<samp>$ python script.py<br>hello world</samp>
<!-- 正确 -->
<kbd>python script.py</kbd><br><samp>hello world</samp>
-
对多行输出使用多个 samp 标签：破坏语义完整性，且不利于样式统一
<!-- 错误 -->
<samp>line 1</samp><br>
<samp>line 2</samp><br>
<samp>line 3</samp>
<!-- 正确 -->
<samp>line 1<br>line 2<br>line 3</samp>
<!-- 或更推荐：用 <pre class="brush:php;toolbar:false;"><samp>…</samp>
保留原始换行 -->
-
忽略空格与制表符处理：HTML 默认折叠空白符，导致输出格式错乱
- 解决方案：给
samp 加 CSS white-space: pre 或 pre-wrap
- 若在
pre 内部使用 samp，则无需额外设置（pre 已处理空白）
与 ARIA 和可访问性的实际关联
把命令行提示符（如 $ 或 C:\>）一起包进 samp：这是输入前缀，不属于输出。正确做法是只包裹实际输出部分
<!-- 错误 --> <samp>$ python script.py<br>hello world</samp> <!-- 正确 --> <kbd>python script.py</kbd><br><samp>hello world</samp>
对多行输出使用多个 samp 标签：破坏语义完整性，且不利于样式统一
<!-- 错误 --> <samp>line 1</samp><br> <samp>line 2</samp><br> <samp>line 3</samp> <!-- 正确 --> <samp>line 1<br>line 2<br>line 3</samp> <!-- 或更推荐：用 <pre class="brush:php;toolbar:false;"><samp>…</samp>保留原始换行 -->
忽略空格与制表符处理：HTML 默认折叠空白符，导致输出格式错乱
- 解决方案：给
samp加 CSSwhite-space: pre或pre-wrap - 若在
pre内部使用samp，则无需额外设置（pre已处理空白）
samp 本身不触发特殊 ARIA 角色，但它会影响辅助技术对内容类型的判断。例如某些屏幕阅读器在遇到 samp 时，会以更平缓语速朗读，并提示“样本输出”，帮助听觉用户区分“这是结果，不是指令”。
- 不要为了“强调输出”而滥用
samp：比如把 API 文档里的响应字段名（如data）包进去——那是结构描述，不是运行时输出 - 如果输出含链接或交互元素（如点击重试的按钮），
samp不能包裹它们：语义冲突，应拆分为纯文本samp+ 独立可操作元素 - 在自动化测试或爬虫场景中，
samp是识别“预期输出块”的可靠信号，比靠 class 名（如output）更稳定
samp 的价值不在视觉，而在明确告诉所有人：“这串字符，是某个过程走完之后，实实在在吐出来的。”一旦混淆输入/输出边界，语义就塌了一半。
