HTML 换行 - 绿叶网

很多新手小伙伴在写 HTML 时会遇到这样一个困惑：“我在编辑器里敲了回车换行，为什么网页上显示的文字还是挤在一行呢？”

这是因为浏览器会忽略代码中的回车符。在 HTML 中，如果想让文字掉到下一行（换行），主要有 2 种方式，但它们的含义完全不同：

使用 p 标签：用于 “分段”（语义上的隔开）。
使用 br 标签：用于 “强制换行”。

使用 p 标签换行

在 HTML 中，p 标签（即段落标签）是会自动换行的。如果想要实现文本的换行效果，你只需要将文本拆分放到不同的 p 标签即可。

示例 1：使用多个 p 标签实现换行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

页面效果如下图所示。

HTML使用p标签换行

使用 br 标签换行

在 HTML 中，我们可以使用 br 标签实现换行。br 是一个空标签，不需要有任何内容。

语法：

<br />

说明：

br，是 “break” 的缩写。在 HTML5 标准中，下面 2 种写法都是可行的。

<!--写法1（推荐）-->
<br>

<!--写法2-->
<br />

提示: 虽然浏览器允许在 body 中直接写文字并用 br 进行换行，但这不符合标准。准确来说，所有的文本都应该被包裹在容器标签（如 div、p、span 等）内部。

示例 2：使用 br 标签实现换行

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>床前明月光，疑是地上霜。<br>举头望明月，低头思故乡。</p>
</body>
</html>

页面效果如下图所示。

HTML使用br标签换行

分析：

br 标签是用来给文本 “换行” 的，而 p 标签是用来给文本 “分段” 的。如果你的内容本身就是两个段落，就没必要使用 br 标签换行那么麻烦，而是直接用两个 p 标签就可以了。

除了使用 p 标签和 br 标签，你也还可以使用 CSS 来控制文本的换行效果。更多关于 CSS 的内容，另请参阅：CSS 教程。