<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 |
瀏覽器相容性
載入中…