HTML 段落

提示

1. 创建段落：HTML中的<p>标签用于创建段落，从新行开始，自动移除额外的空格和行。
2. 换行和预格式化文本：可以使用<br>标签在段落内添加换行，<pre>标签用于创建保留空格和换行的预格式化文本。
3. 块级元素特性：<p>标签是块级元素，占据其父元素的全部宽度，可以包含其他元素如<strong>，并可使用 添加额外空格。

HTML <p> 标签用于创建段落。例如，

<p>学习 HTML 很有趣。</p>

浏览器输出

如我们所见，段落以 <p> 开始并以 </p> 结束。

HTML 段落总是从新行开始。为了演示这一点，让我们创建一个带有两个段落的网页。

<p>段落 1：简短段落</p>

<p>段落 2：长段落，这是一个长段落，包含足够的文本来填充网站中的整行。</p>

浏览器输出

上述 HTML 代码包含两个段落。每个段落即使在第一个段落后有足够的空间，也会从新行开始。

注意： 默认情况下，浏览器会在段落上下自动添加空白（边距）。可以使用 CSS 改变空白和其他设计方面。

HTML 段落和空格

段落会自动从我们的文本中移除额外的空格和行。例如，

<p>段落标签会移除所有额外的空格。段落标签也会移除所有额外的行。</p>

浏览器输出

在这里，输出

• 移除了单词之间的所有额外空格
• 移除了句子之间的额外行

注意： 在 HTML 中，我们可以添加额外的空格和行，这一点我们将在本教程后面讨论。

在段落中添加换行

我们可以使用 HTML 换行标签 <br> 在段落中添加换行。例如，

<p>
  我们可以使用 <br />
  HTML br 标签 <br />
  来添加换行。
</p>

浏览器输出

注意：<br> 标签不需要像 <p> 标签那样的闭合标签。

HTML 中的预格式化文本

正如我们所讨论的，段落无法保留额外的行和空间。如果我们需要创建使用多个空格和行的内容，我们可以使用 HTML <pre> 标签。

<pre> 标签创建预格式化文本。预格式化文本将按照 HTML 文件中的方式显示。例如，

<pre>
  这段文本  
    将会 
      按照
      
      它编写的方式 
        显示
</pre>

浏览器输出

段落内的其他元素

可以在一个 HTML 元素内包含另一个元素。这对于 <p> 标签也是成立的。例如，

<p>我们可以使用其他标签，如 <strong>强调文本的 strong 标签</strong></p>

浏览器输出

在上述示例中，我们在 <p> 标签内使用了 <strong> 标签。

浏览器会自动将 <strong> 标签内的内容加粗。

段落是块级元素

<p> 标签是块级元素。它从新行开始，并占

据其父元素的全部宽度。

注意： 请注意哪些元素是行内级别的，哪些是块级别的。在我们学习 CSS 时，这将很重要。

在段落内添加额外空间

正如之前讨论的，我们通常不能在段落内添加额外的空白。然而，我们可以使用一种叫做 不换行空格 的 HTML 实体来添加额外的空格。例如，

<p>段落中的额外空格 &nbsp;&nbsp;</p>

浏览器输出

这里，  是一个 HTML 实体，浏览器会将其解释为一个空格。这使我们能够在段落和其他 HTML 标签内创建多个空格。