<samp>: 样本输出元素

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

<samp> HTML 元素用于包含表示来自计算机程序的样本（或引号）输出的内联文本。其内容通常使用浏览器的默认等宽字体（如 Courier 或 Lucida Console）渲染。

试试看

属性

此元素仅包含 全局属性。

使用说明

您可以使用 CSS 规则覆盖浏览器对 <samp> 元素的默认字体样式；但是，浏览器的首选项可能会优先于您指定的任何 CSS。

覆盖默认字体的 CSS 代码如下所示：

css
samp {
  font-family: "Courier";
}

注意：如果您需要一个元素作为您的网站或应用程序的 JavaScript 代码生成的输出的容器，您应该使用 <output> 元素。

示例

基本示例

在这个简单的示例中，一段文字包含程序输出的示例。

html
<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>

结果

包含用户输入的示例输出

您可以将 <kbd> 元素嵌套在 <samp> 块中，以呈现包含用户输入文本的示例。例如，考虑以下文本，它展示了 Linux（或 macOS）控制台会话的转录：

HTML

html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

请注意 <span> 的使用，它允许自定义示例文本中特定部分的外观，例如 shell 提示符和光标。还请注意 <kbd> 的使用，它代表用户在示例文本中提示符处输入的命令。

CSS

实现我们想要的外观的 CSS 代码如下：

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

这使得提示符和光标具有相当微妙的色彩，并且在示例文本中加粗了键盘输入。

结果

最终的输出如下所示：

技术摘要

内容类别 流动内容，短语内容，可感知内容。
允许的内容 短语内容.
标签省略 无，开始标签和结束标签都是必须的。
允许的父级 任何接受 短语内容 的元素。
隐式 ARIA 角色 通用
允许的 ARIA 角色 任何
DOM 接口 HTMLElement

规范

规范
HTML 标准
# the-samp-element

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅