<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> 元素:指令碼生成的輸出容器