在 HTML 中跳过一行
-
使用
<p>
标签跳过 HTML 中的一行 -
使用两个
<br>
标签跳过 HTML 中的一行 -
将
<hr>
标记的opacity
属性设置为0
以跳过 HTML 中的一行 -
使用 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;
}
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