在 HTML 中跳過一行

1. 使用 <p> 標籤跳過 HTML 中的一行
2. 使用兩個 <br> 標籤跳過 HTML 中的一行
3. 將 <hr> 標記的 opacity 屬性設定為 0 以跳過 HTML 中的一行
4. 使用 CSS margin 屬性跳過 HTML 中的一行

本文將探討幾種在 HTML 中跳過或新增一行的方法。

使用 <p> 標籤跳過 HTML 中的一行

在 HTML 中跳過一行的最簡單方法是使用 <p> 標籤。 <p> 標籤是一個段落元素，在 HTML 中建立段落。

段落是塊級元素，表示 HTML 文件中的文字塊。我們總能在兩段之間找到一個空行。

這就是如何識別兩個段落。使用 <p> 元素會自動跳過一行。

讓我們用一個簡單的例子來實現它。

首先，建立一個 <p> 標籤並在標籤內寫一些你選擇的文字。接下來，建立另一個 <p> 標籤並在其中寫入一些段落內容。

下面的程式碼片段在兩個文字之間新增了一個空行。這就是我們如何在 HTML 中的文字之間跳過一行。

示例程式碼：

<p>
 The first paragraph
</p>
<p>
 The second paragraph
</p>

使用兩個 <br> 標籤跳過 HTML 中的一行

我們也可以使用 <br> 標籤來跳過 HTML 中的一行。 <br> 是一個換行元素，用於換行。

使用兩次時它將建立一個空白行，因為它會中斷兩個連續的行。標籤沒有結束標籤；它被稱為空標籤。

<br> 標籤的一個應用是在寫詩時將文字指向一個新行。

看下面的例子，我們實現了 <br> 標籤來跳過一首詩的兩節之間的一行。第一行末尾的 <br> 標記將換行並指向下一行。

在第二行之後，我們使用了兩個 <br> 標籤。第一個斷線並指向第三行。

然後，第二個 <br> 標記斷開第三行並建立一個空行。在那之後，我們在每行的末尾使用一個 <br> 標籤寫了另一首詩節。

因此，該示例演示瞭如何使用兩個 <br> 標籤在文字之間跳過一行。

示例程式碼：

<p>
 got out of the bed at four, not seven<br>
 after meditation, it was like heaven<br>
 <br>
 kept myself up, coding till eleven<br>
 lately i've been doing Java, I 'll be using Maven
</p>

將 <hr> 標記的 opacity 屬性設定為 0 以跳過 HTML 中的一行

這個方法將實現一個技巧來跳過 HTML 中的一行。訣竅是使用 <hr> 標籤並使其不可見。

<hr> 標籤建立一條水平線。我們可以將水平線的 CSS opacity 屬性設定為 0。

結果，水平線佔用的空間看起來像一個空白行。

例如，寫下你選擇的文字。接下來，使用 <hr> 標籤建立一條水平線。

使用 style 屬性以內聯方式應用 CSS 樣式。將 opacity 屬性設定為 0。在 <hr> 之後，再寫一行。

這裡，opacity 屬性的 0 值使水平線完全透明。值 0 使元素完全透明，值 1 使其完全不透明。

因此，該示例演示瞭如何使用 <hr> 標記和 opacity 屬性在文字之間跳過一行。

示例程式碼：

The line before blank line
<hr style="opacity:0">
The line after blank line

使用 CSS margin 屬性跳過 HTML 中的一行

現在，我們將討論使用 CSS margin 屬性在 HTML 中跳過一行的最終方法。

我們可以使用 <section> 標籤來表示要在跳過的行之後寫入的文字部分。然後，我們可以將邊距應用到該部分的頂部，以便出現空白。

例如，寫下你選擇的文字。接下來，建立一個 <section> 元素並在其中寫入一些文字。

在 CSS 中，選擇 section 元素並將其 margin 屬性設定為 1em 0。1em 值類似於該部分頂部和底部的邊距。

結果，將在文字的頂部和底部建立大小與字型大小相等的空白區域。

這就是我們如何使用 CSS margin 屬性在 HTML 中建立空行的方法。

HTML 程式碼：

This is the first line
<section>This is the line after the skipped line</section>

CSS 程式碼：

section {
 margin: 1em 0;
}