在 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