<samp>:样本输出元素

<samp> HTML 元素用于包含表示计算机程序的示例（或引用）输出的内联文本。其内容通常使用浏览器的默认等宽字体（例如导游或 Lucida Console）呈现。

¥The <samp> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).

Try it

属性

¥Attributes

该元素仅包含全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

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

¥You can use a CSS rule to override the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.

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

¥The CSS to override the default font face would look like this:

css

samp {
  font-family: "Courier";
}

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

¥Note: If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the <output> element.

示例

¥Examples

基本示例

¥Basic example

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

¥In this simple example, a paragraph includes an example of the output of a program.

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>

结果

¥Result

包括用户输入的示例输出

¥Sample output including user input

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

¥You can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:

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> 来表示用户在示例文本中的提示符处输入的命令。

¥Note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of <kbd> to represent the command the user entered at the prompt in the sample text.

CSS

实现我们想要的外观的 CSS 是：

¥The CSS that achieves the appearance we want is:

css

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

这为提示和光标提供了相当微妙的着色，并增强了示例文本中的键盘输入。

¥This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.

结果

¥Result

结果输出是这样的：

¥The resulting output is this:

技术总结

¥Technical summary

内容类别	流量内容，措辞内容，可触及的内容。
允许的内容	措辞内容.
标签遗漏	无，开始和结束标记都是强制性的。
允许的父级	任何接受措辞内容的元素。
隐式 ARIA 角色	`generic`
允许的 ARIA 角色	任何
DOM 接口	`HTMLElement`

规范

Specification
HTML Standard # the-samp-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

相关元素：<kbd>, <code>, <pre>
<output> 元素：脚本生成的输出的容器