HTML的<pre>标签怎么用？

HTML的<pre>标签用于定义预格式化文本块，它保留web浏览器忽略的文本空间、换行符、制表符和其他格式化字符。<pre> 标签的一个常见应用就是用来表示计算机的源代码。下面本篇文章就来给大家介绍一下<pre>标签，希望对大家有所帮助。

<pre>元素中的文本以固定宽度字体显示，但可以使用css更改。<pre>标签需要开始和结束标签。

语法：

<pre> 内容... </pre>

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

下面的示例说明了HTML中的<pre>标签：

示例1：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>pre标签</title>
	</head>

<body>
<pre>
    &lt;html&gt;
	&lt;head&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
	&lt;/script&gt;
	&lt;/head&gt;
	
	&lt;body&gt;
	
	  &lt;script type=&quot;text/javascript&quot;&gt;
	    xmlDoc=<a href="https://www.html.cn/">HTML中文网</a>(&quot;Hello World！&quot;);
	    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
	  &lt;/script&gt;
	
	&lt;/body&gt;
	
    &lt;/html&gt;
</pre>
</body>

</html>

在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。

效果图：

示例2：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>pre标签</title>
		<style> 
            pre { 
                font-family: Arial; 
                color: #009900; 
                margin: 25px; 
            }  
        </style>
	</head>

	<body>
		<pre>
			Hello world!
			&lt;pre&gt;标签元素可定义预格式化的文本。
		
		</pre>
	</body>

</html>

输出：