迹忆客 专注技术分享

本文将探讨几种在 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;
}