<samp>：樣本輸出元素

嘗試一下

<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 如下所示：

samp {
  font-family: "Courier";
}

範例

基本範例

在這個簡單的例子中，段落包含了一個程式輸出的例子。

<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>

結果

包含使用者輸入的樣本輸出

你可以在 <samp> 區塊中嵌套 <kbd> 元素，以呈現包含使用者輸入文字的例子。例如，考慮以下文本，展示了 Linux（或 macOS）控制台會話的副本：

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> 元素允許自定義樣本文本的特定部分的外觀，例如外殼提示符和光標。還要注意，在樣本文本中使用 <kbd> 來表示使用者在提示符處輸入的命令。

CSS

實現我們想要的外觀的 CSS 是：

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

這使提示符和光標具有相對較細微的顏色，並在樣本文本中加粗鍵盤輸入。

結果

得到的輸出是這樣的：

技術摘要

規範

瀏覽器相容性

參見

• 相關元素：<kbd>、<code>、<pre>
• <output> 元素：用於腳本生成的輸出的容器