HTML - <pre> 标签

HTML <pre> 标签用于定义一段预格式化的文本，该文本将完全按照 HTML 代码中编写的格式显示。此标签内的空白字符将按原样显示，这意味着 <pre> 标签保留了文本空格、换行符、制表符和其他格式化字符。

语法

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

属性

HTML pre 标签支持 HTML 的全局和事件属性。还有一些特定的属性，如下所示。

HTML pre 标签属性

这些属性不适用于新的网站。

属性	值	描述
cols	数字	用于指定 pre 元素的可见宽度。
width	数字（像素）	用于指定元素的宽度。
wrap	soft hard	它指定文本如何换行，是 soft 还是 hard。

HTML pre 标签示例

在以下示例中，我们将看到使用案例，以及如何在何处使用 HTML pre 标签来表示我们想要的内容。

使用 pre 标签预格式化段落

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

<!DOCTYPE html>
<html>
<body>
    <h2>Simply Easy Learning</h2>
    <pre> 
        Hi, Welcome to tutorialspoint,
        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	是	是	是	是	是

html_tags_reference.htm

打印页面