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

打印页面