HTML <samp> 標籤

HTML <samp> 標籤代表示例輸出；它用於包含表示來自計算機程式或指令碼的示例輸出的內聯文字。它們的內容預設情況下將在瀏覽器中以等寬字型顯示。

要更改<samp>標籤內容的樣式和字型，我們可以使用 CSS 屬性覆蓋瀏覽器的預設字型。

語法

<samp>.....</samp>

HTML samp 標籤示例

以下示例將說明 samp 標籤的使用，何時何地以及如何使用 samp 標籤來顯示示例輸出。

使用<samp>標籤建立 samp 元素

在以下示例中，讓我們看看<samp>標籤在 HTML 文件中的用法。

<!DOCTYPE html>
<html>
<body>
   <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>
   <body>
</html>

使用 CSS 樣式化 samp 元素

考慮以下示例，我們正在建立一個 HTML 文件並使用<samp>標籤，我們還使用 CSS 屬性來覆蓋<samp>內容的預設字型樣式。

<!DOCTYPE html>
<html>
<head>
   <style>
      samp {
         font-weight: bold;
         font-family: courier;
         font-style: italic;
      }
   </style>
</head>
<body>
   <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>
   <body>
</html>

將<kbd>與<samp>標籤一起使用

讓我們看一下下面的示例，我們在這裡將<kbd>標籤巢狀在<samp>塊中，以呈現一個包含使用者輸入文字的示例。將此文字視為 Linux（或 macOS）控制檯會話的轉錄。

<!DOCTYPE html>
<html>
<head>
   <style>
      .prompt {
         color: #b00;
      }

      samp>kbd {
         font-weight: bold;
      }

      .cursor {
         color: #00b;
      }
   </style>
</head>
<body>
   <pre>
      <samp>
         <span class="prompt">John@interwebz:~$</span>
         <kbd>md5 -s "Hello world"</kbd>
         MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
      
         <span class="prompt">John@interwebz:~$</span>
         <span class="cursor"></span>
      </samp>
   </pre>
</body>
</html>

標籤
samp	是	是	是	是	是

html_tags_reference.htm

列印頁面