HTML 段落
- 创建段落:HTML中的
<p>
标签用于创建段落,从新行开始,自动移除额外的空格和行。 - 换行和预格式化文本:可以使用
<br>
标签在段落内添加换行,<pre>
标签用于创建保留空格和换行的预格式化文本。 - 块级元素特性:
<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>段落中的额外空格 </p>
浏览器输出
这里,
是一个 HTML 实体,浏览器会将其解释为一个空格。这使我们能够在段落和其他 HTML 标签内创建多个空格。