在 HTML 中開始新行

Sushant Poudel 2023年2月19日
  1. 在 HTML 中使用 <br> 標籤換行
  2. 在 HTML 中使用 <pre> 標籤換行
  3. 在 HTML 中使用 <p> 標籤換行
在 HTML 中開始新行

本文將討論在 HTML 程式碼中斷行的三種方法。打破線路通常意味著從那裡開始新的線路。

在 HTML 中使用 <br> 標籤換行

我們可以使用 <br> 標籤在 HTML 程式碼中換行。在 HTML 程式碼的 <body> 中,我們輸入一些我們選擇的內容,當我們想要更改行時,我們在內容之後使用標籤 <br> 並再次開始輸入內容。我們也可以使用標籤 <br/> 標籤代替 <br>,這會產生與上面相同的結果。此外,如果我們想插入兩個換行符,我們可以輸入 <br> 標籤兩次。這意味著我們希望有多少換行符,我們必須輸入 <br> 標籤相同的次數。

例如,在 HTML 正文中,編寫你選擇的文字。在要換行的文字後使用 <br> 標籤。這會將你剩餘的讀者轉移到另一行。在文字中的任意位置連續使用該標籤兩次。

下面的示例在 HTML 程式碼中的特定文字之後建立一個新行。在下面程式碼中 HTML 正文中的第一句話之後,標記 <br> 將換行。結果,剩餘的文字切換到下一行。完成這一行後,<br/> 標籤被使用了兩次,暗示該行被斷開了兩次。

示例程式碼:

<body>
Hi, I am here to learn how to break the line in HTML. <br> In this method, I'm using the br tag. <br/> <br/> I would like to be a good programmer in the future.
</body>

輸出:

Hi, I am here to learn how to break the line in HTML.
In this method, I'm using the br tag.
 
I want to be a good programmer in the future.

在 HTML 中使用 <pre> 標籤換行

我們還可以在 HTML 正文中使用 <pre> 標記來換行。這種方法與上面解釋的方法略有不同。<pre> 元素有助於完全按照鍵入的方式顯示文字。在 <pre> 標籤內,我們可以在任何需要的地方按下回車鍵並關閉標籤,從而在不同的行中輸入文字。因此,當我們輸入時,它會在單獨的行中顯示文字。但是如果我們不使用 <pre> 標籤,無論我們在文字中按多少次回車,文字都將顯示在同一行中,沒有任何換行符。

例如,在 HTML 正文中編寫一個 <pre> 標記。然後鍵入所需的文字並通過在你想要插入換行符的任何位置按 Enter 來換行。寫完文字後,關閉 </pre> 標籤並關閉 <body> 標籤。

下圖在 HTML 程式碼中建立了一個換行符。鍵入所需文字後,通過在 HTML 正文中的文字中按 Enter 鍵插入換行符。<pre> 標籤有助於以與輸入相同的方式顯示輸出。當省略 <pre> 標籤時,所有文字將出現在同一行中。這表明 <pre> 標籤有助於插入換行符。

示例程式碼:

<body>
    <pre>
        Hi, I am here to learn how to break the line in HTML. 
        In this method, I'm using the pre tag.
        I would like to be a good programmer in the future. 
    </pre>
</body>

輸出:

在 HTML 中使用 <p> 標籤換行

我們還可以使用 <p> 標記在 HTML 程式碼中換行。這個標籤決定了文字的段落。它是一個塊級元素;因此,它總是從新行開始。因此,在開始正文中的每一行之前編寫 <p> 標記並在結束後編寫 </p> 有助於打破這一行。

例如,寫下標籤 <p> 並輸入你想要的文字,當你完成教科書時,寫下標籤 </p>。然後不斷重複相同的過程,直到你願意為止。完成所有文字的編寫後,不要忘記關閉 HTML 的 body 標記。

下圖還建立了一個新行。當輸入標籤 <p> 時,段落開始,當輸入 </p> 時,段落結束。我們知道新段落總是從新行開始,所以當我們再次在文字中使用相同的標籤時,出現在下一行,表示新行。

示例程式碼:

<body>
    <p> Hi, I am here to learn how to break the line in HTML. </p> 
    <p>In this method I'm using the p tag.</p> 
    <p>I would like to be a good programmer in the future.</p> 
</body>
</html>

輸出:

作者: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn