在 HTML 中跳過一行

Subodh Poudel 2023年2月19日 2022年6月15日
  1. 使用 <p> 標籤跳過 HTML 中的一行
  2. 使用兩個 <br> 標籤跳過 HTML 中的一行
  3. <hr> 標記的 opacity 屬性設定為 0 以跳過 HTML 中的一行
  4. 使用 CSS margin 屬性跳過 HTML 中的一行
在 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 01em 值類似於該部分頂部和底部的邊距。

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

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

HTML 程式碼:

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

CSS 程式碼:

section {
 margin: 1em 0;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相關文章 - HTML Line