<samp>: 示例输出元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<samp> HTML 元素用于包含代表计算机程序示例(或引用)输出的内联文本。其内容通常使用浏览器的默认等宽字体(如 Courier 或 Lucida Console)进行渲染。

试一试

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>
samp {
  font-weight: bold;
}

属性

此元素仅包含全局属性

用法说明

您可以使用 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: #bb0000;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #0000bb;
}

这会为提示符和光标提供相当微妙的着色,并使示例文本中的键盘输入加粗。

结果

最终的输出是:

技术摘要

内容类别 流式内容语句内容、明显内容。
允许内容 短语内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任意
DOM 接口 HTMLElement

规范

规范
HTML
# the-samp-element

浏览器兼容性

另见

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