<samp>: 樣本輸出元素

基線 廣泛可用

此功能已完善，可在許多裝置和瀏覽器版本上執行。它自 2015 年 7 月.

<samp> HTML 元素用於包含表示來自計算機程式的樣本（或引號）輸出的內聯文字。其內容通常使用瀏覽器的預設等寬字型（如 Courier 或 Lucida Console）渲染。

試試看

屬性

此元素僅包含 全域性屬性。

使用說明

您可以使用 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: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

這使得提示符和游標具有相當微妙的色彩，並且在示例文字中加粗了鍵盤輸入。

結果

最終的輸出如下所示：

技術摘要

內容類別 流動內容，短語內容，可感知內容。
允許的內容 短語內容.
標籤省略 無，開始標籤和結束標籤都是必須的。
允許的父級 任何接受 短語內容 的元素。
隱式 ARIA 角色 通用
允許的 ARIA 角色 任何
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-samp-element

瀏覽器相容性

BCD 表格只在瀏覽器中載入

另請參閱