如何在 HTML 中将文本包裹在 <pre> 标签中?

htmlweb developmentfront end technology更新于 2024/7/4 9:16:17

在本文中，我们将学习如何在 HTML 中将文本包裹在 <pre> 标签中。HTML <pre> 标签用于呈现预先格式化的文本块。

预先格式化的文本是指已经格式化且不应进一步格式化的文本。

与许多其他 HTML 元素一样，<pre> 标签也需要一个结束标签 (</pre>)。

语法

以下是 <pre> 标签的基本语法。

<pre>
   Enter text here…
</pre>

当您通过 <pre> 标签在网页中显示文本时，它将以您在该格式中编写的格式显示。例如，空格和缩进等。所有设置都会更改，并以相同的形式显示。

如今，此标签最流行的用途是代表编程代码。为此，此标签与 <code> 一起使用。

编程代码由空格和缩进表示，只有这样才有意义。这就是为什么使用 <pre> 标签来代表编程代码的原因。现在它已成为一种标准，每个人都遵循它。

示例

以下是在 HTML 中使用 <pre> 标签包装文本的示例程序。


<!DOCTYPE html>
<html>
<head><title>pre</title></head>
<body>
   <pre>
      function trigger()
      {
         document.getElementById("hover")
         .addEventListener("mouseover",popup);
         function popup()
         {
            alert("Welcome to my WebPage !!!");
         }
      }
   </pre>
</body>
</html>

示例

以下是未使用 <pre> 标签的示例程序。


<!DOCTYPE html>
<html><head><title>pre</title></head>
<body>
   To
   Date: 25/Jan/2020
   The principal
   NMA College
   Hyderabad
   Subject: "APPLICATION FOR SICK LEAVE."
   Sir/madam
   Respectfully I bag to say that I am suffering from
   fiver and body pain. So my doctor suggest me totally
   bad rest for 10 days.
   That is on 25/Jan/2019 to5/Feb/2019.
                  I will think of going only if you accept my request.
                  I will highly obliged.
                  Thanking You
                  Your faithfully
                  Lokesh B
                  10th class
</body>
</html>

示例

以下是在 HTML 中使用 <pre> 标签包装文本的示例程序。


<!DOCTYPE html>
<html><head><title>pre</title></head>
<body>
   <pre>
      To
      Date: 25/Jan/2020
                     The principal
                     NMA College
                     Hyderabad
      Subject: "APPLICATION FOR SICK LEAVE."
      Sir/madam
      Respectfully I bag to say that I am suffering from
      fiver and body pain. So my doctor suggest me totally
      bad rest for 10 days.
      That is on 25/Jan/2019 to5/Feb/2019.
      I will think of going only if you accept my request.
                           I will highly obliged.
                           Thanking You
                           Your faithfully
                           Lokesh B
                           10th class
   </pre>
</body>
</html>