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

列印頁面