samp标签专用于标记程序或系统实际输出的样本文本,如终端命令执行后的原始返回内容,须与kbd(用户输入)、code(代码字面量)配合使用以准确表达交互语义。

samp 标签用于表示程序或系统输出的样本文本,比如终端命令执行后的返回内容。它语义明确,告诉浏览器和辅助技术“这是计算机生成的输出”,而非用户输入或普通描述。
正确使用 samp 标签标记命令行输出
只用在真实、具体的程序输出片段上,不要包裹整段说明文字或用户输入(用户输入应使用 kbd)。
- ✅ 正确:运行 ls -l 后终端显示的文件列表行 —— -rw-r--r-- 1 user staff 1024 Jan 1 12:34 index.html
- ❌ 错误:输入 ls -l 并回车(这是操作指令,该用 kbd)
- ❌ 错误:这个命令会列出当前目录下的所有文件(这是解释性文字,不用语义标签)
配合 kbd 和 code 实现完整命令交互语义
真实终端场景包含输入与输出,HTML5 提供了一套协作标签:
- kbd:包裹用户键入的命令(如 git status)
-
code:包裹代码片段、路径、文件名等字面量(如
package.json) -
samp:仅包裹命令执行后实际返回的原始输出(如 On branch main
nothing to commit, working tree clean)
示例组合:
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
curl -I https://example.com
HTTP/2 200
server: nginx
content-type: text/html; charset=utf-8
样式与可访问性注意事项
浏览器默认将 samp 渲染为等宽字体(如 monospace),但不强制等宽。若需确保视觉一致性,建议加简单 CSS:
samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
它本身不改变语义结构,但对屏幕阅读器有意义 —— 某些读屏工具会略作停顿或提示“样本输出”,帮助用户区分内容类型。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










