如何在HTML的`
`标签中换行文本？

在本文中，我们将学习如何在HTML的<pre>标签中换行文本。HTML的`

`标签用于显示预格式化的文本块。


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


`
`标签也需要一个闭合标签（`
`），就像许多其他HTML元素一样。


语法


以下是`
`标签的基本语法。


<pre>
   Enter text here…
</pre>



当您通过`
`标签在网页中显示文本时，它将以您编写时的格式显示。也就是说，空格和缩进等所有设置都会保持不变。


如今，该标签最常用的用途是表示编程代码。为此，它与``一起使用。


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


示例


以下是一个在HTML的`
`标签中换行文本的示例程序。


<!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>



示例


以下是一个我们没有使用`
`标签的示例程序。


<!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的`
`标签中换行文本的示例程序。


<!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>






	
	

        

         
更新于：2023年11月24日

         

            

             
            

            

               
 839 次浏览

            

         

      





	





   
启动您的职业生涯

   
完成课程获得认证

   开始学习
   

   





   
   

        







   

      

         
广告