<samp>:樣本輸出元素

<samp> HTML 元素用於封裝代表電腦程式的樣本(或引用)輸出的內嵌文本。其內容通常使用瀏覽器的預設等寬字體呈現(如 Courier 或 Lucida Console)。

嘗試一下

屬性

此元素僅包括全域屬性 (en-US)

使用注意事項

你可以使用 CSS 規則來覆蓋 <samp> 元素的瀏覽器默認字體;但是,瀏覽器的偏好可能優先於你指定的任何 CSS。

覆蓋默認字體的 CSS 如下所示:

css
samp {
  font-family: "Courier";
}

備註: 如果你需要一個元素來作為你的網站或應用程式 JavaScript 代碼生成的輸出的容器,則應該使用 <output> (en-US) 元素。

範例

基本範例

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

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>

結果

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

你可以在 <samp> 區塊中嵌套 <kbd> (en-US) 元素,以呈現包含使用者輸入文字的例子。例如,考慮以下文本,展示了 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> 元素允許自定義樣本文本的特定部分的外觀,例如外殼提示符和光標。還要注意,在樣本文本中使用 <kbd> 來表示使用者在提示符處輸入的命令。

CSS

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

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

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

結果

得到的輸出是這樣的:

技術摘要

內容類型 流內容段落型內容、捫及內容。
允許的內容 段落型內容
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 generic (en-US)
允許的 ARIA 角色 任何
DOM 介面 HTMLElement (en-US)

規範

Specification
HTML Standard
# the-samp-element

瀏覽器相容性

BCD tables only load in the browser

參見