HTML 基础
HTML 高级教程
HTML5 特征
HTML5 示例
HTML5 参考手册

HTML 段落

在本教程中,您将学习如何在 HTML 中创建段落。

创建段落

段落元素用于在网页上发布文本。

段落是用 <p> 标签定义的。 段落标签是一个非常基本的标签,通常是您在网页上发布文本所需的第一个标签。 这是一个例子:

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

注意: 浏览器内置样式表会自动在段落内容的上方和下方创建一些空间(称为 margin< /a>),但您可以使用 CSS 覆盖它。


关闭段落元素

在 HTML 4 和更早的版本中,使用开始标签开始一个新段落就足够了。 即使您忘记了结束标记,大多数浏览器也会正确显示 HTML。 例如:

<p>这是一个段落。
<p>这是另一个段落。

上面示例中的 HTML 代码可以在大多数 Web 浏览器中运行,但不要依赖它。 忘记结束标签会产生意想不到的结果或错误。

注意:出于向前兼容性和良好编码习惯的目的,建议在段落中同时使用开始和结束标记。


创建换行符

<br> 标签用于在网页上插入换行符。

由于 <br>empty element,所以不需要对应的 </br> 标签。

<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>

注意:不要使用空段落,即 <p></p> 在您的网页中添加额外的空间。 浏览器可能会忽略空段落,因为它是逻辑标记。 改用 CSS margin 属性来调整元素周围的空间。


创建水平线

您可以使用 <hr> 标签创建水平线,以直观地分隔网页上的内容部分。 与 <br> 一样,<hr> 标签也是一个空元素。 这是一个例子:

<p>这是一个段落。</p>
<hr>
<p>这是另一个段落。</p>

管理空白

通常,浏览器将通过按键盘上的 空格键tab 键 将 HTML 代码中创建的多个空格显示为单个空格。 通过按回车键在 HTML 代码中创建的多个换行符也显示为一个空格。

以下段落将显示在一行中,没有任何多余的空格:

<p>这个段落包含  多个   空格    在源代码中。</p>
<p>
    这个段落
    包含多个制表符和换行符
    在源代码中。
</p>

插入 &nbsp; 以创建额外的连续空格,同时插入 <br> 标签以在您的网页上创建换行符,如下例所示:

<p>这个段落有多个&nbsp;&nbsp;&nbsp;空格。</p>
<p>这个段落有多个<br><br>line<br><br><br>回车。</p>

定义预格式化文本

有时,使用 &nbsp;, <br> 等来管理空间不是很方便。 或者,您可以使用 <pre> 标签来完全按照 HTML 文件中的内容显示空格、制表符、换行符等。 这对于呈现像诗歌或代码一样重要的空格和换行符的文本非常有帮助。

以下示例将在浏览器中显示源代码中的文本:

<pre>
    一闪一闪亮晶晶, 
    满天都是小星星! 
    挂在天空放光明, 
    好像许多小眼睛。
</pre>

提示: <pre> 元素中的文本通常由浏览器以等宽或固定宽度字体(例如 Courier)呈现,但您可以使用 CSS font 属性覆盖它。

Advertisements