HTML - pre 标签

HTML <pre> 标签于定义一个预格式化文本块，该文本块将完全按照 HTML 代码中编写的方式呈现。此标签内的空格显示为写入，这意味着此<pre> 标签保留文本空格、换行符、制表符和其他格式字符。

语法


<pre>.....</pre>

属性

<pre> 标签于支持 HTML 的全局属性和事件属性。下面列出了一些特定属性。

<pre> 标签示例

在下面的示例中，我们将看到用例，在哪里以及如何使用 <pre> 标签来表示我们想要的内容。

使用 <pre> 标签的预格式化段落

在下面的示例中，我们将创建一个 HTML 文档并演示 <pre> 标签的用法。


<!DOCTYPE html>
<html>
<body>
		<h2>Simply Easy Learning</h2>
		<pre> 
				Hi, Welcome to qikepu ,
				we make things easy for the users, 
				Users can learn here in the easy way. 
		</pre>
</body>
</html>

在 <pre> 标签中渲染 ASCII 艺术

考虑另一种情况，我们将使用 <pre> 标签来渲染 ASCII 艺术。


<!DOCTYPE html>
<html>
<body>
		<pre> 
/*
 * 											 .::::.
 * 										 .::::::::.
 * 										:::::::::::
 * 								 ..:::::::::::'
 * 							'::::::::::::'
 * 								.::::::::::
 * 					 '::::::::::::::..
 * 								..::::::::::::.
 * 							``::::::::::::::::
 * 							 ::::``:::::::::' 			 .:::.
 * 							::::' 	':::::' 			.::::::::.
 * 						.::::' 		 :::: 		.:::::::'::::.
 * 					 .:::' 			:::::  .:::::::::' ':::::.
 * 					.::' 			 :::::.:::::::::' 		 ':::::.
 * 				 .::' 				::::::::::::::' 				``::::.
 * 		 ...::: 					::::::::::::' 						 ``::.
 * 		````':. 				 ':::::::::' 								 ::::..
 * 											 '.:::::' 									 ':'````..
 */									 
		</pre> 
</body>
</html>

创建其他语言

让我们看一下下面的例子，我们正在创建一个 HTML 文档并使用 <pre> 标签来编写一个 C 程序。


<!DOCTYPE html>
<html>
<body>
	 <pre >
			#include <stdio.h>
			int main() { 	 
				 int number1, number2, sum;   
				 printf("Enter two integers: ");
				 scanf("%d %d", &number1, &number2);
		  
				 // calculate the sum
				 sum = number1 + number2; 	 
				 printf("%d + %d = %d", number1, number2, sum);
				 return 0;
			}
	 </pre>
</body>
</html>

如果必须在 <pre> 标签中显示保留字符，例如 <、> 和 “，则必须使用相应的 HTML 实体对字符进行转义（HTML 实体是一段称为”字符串“的文本，以与号（&）开头，以分号（;)）结尾）。<pre> 元素内的文本以固定宽度的字体显示;但是，可以使用CSS进行更改。

支持的浏览器

浏览器
<pre>	Yes	Yes	Yes	Yes	Yes

打印本页