<samp>: 示例输出元素
<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;
}
这会为提示符和光标提供相当微妙的着色,并使示例文本中的键盘输入加粗。
结果
最终的输出是:
技术摘要
规范
| 规范 |
|---|
| HTML # the-samp-element |
浏览器兼容性
加载中…