HTML samp 标签

HTML <samp> 标签代表示例输出;它用于将表示计算机程序或脚本的示例输出的内联文本括起来。默认情况下，它们的内容将在浏览器中以等宽字体显示。

要更改 <samp> 标签内容的样式和字体，我们可以使用 CSS 属性来覆盖浏览器的默认字体。

语法


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

属性

<samp> 标签支持 HTML 的全局属性和事件属性。

<samp> 标签的示例

下面的示例将说明 <samp> 标签的用法、在哪里、何时以及如何使用 <samp> 标签来显示样本输出。

使用 <samp> 标签简单示例

在下面的示例中，让我们看看 HTML 文档中 <samp> 标签的用法。


<!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>

使用带有 <samp> 标签的 <kbd>

让我们看一下下面的例子，我们将 <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>

支持的浏览器

浏览器
<address>	Yes	Yes	Yes	Yes	Yes

打印本页