HTML Sample Element
(
<samp>
) 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).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 | 流内容 , 措词内容 ，可触及内容。 |
|---|---|
| 准许内容 | 措词内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
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.
The CSS to override the default font face would look like this:
samp {
font-family: "Courier";
}
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>
元素。
In this simple example, a paragraph includes an example of the output of a program.
<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>
The resulting output looks like this:
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:
<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>
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.
The CSS that achieves the appearance we want is:
.prompt {
color: #b00;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #00b;
}
This simply gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.
The resulting output is this:
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
samp
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持