HTML 段落与换行

学习 p/br/hr/pre 等文本结构标签 · 难度：入门 · +10XP

HTML 段落与换行

在 HTML 中，文本的段落和换行由专门的标签控制。浏览器会忽略 HTML 源代码中的多余空格和换行，你需要用标签来告诉浏览器在哪里分段、在哪里换行。

核心标签

标签	含义	特点	典型用途
<p>	段落（Paragraph）	块级元素，前后自动留白，独占一行	正文段落、文章内容
<br>	换行（Line Break）	空元素（无需闭合标签），强制换行	地址、诗歌、短文本内的换行
<hr>	水平分割线（Horizontal Rule）	块级元素，绘制一条横线，表示主题切换	文章章节之间的分隔
<pre>	预格式化文本（Preformatted）	保留空格和换行，使用等宽字体	代码块、ASCII 艺术、表格文本

<p> 段落标签详解

<!-- 基本用法 -->
<p>这是第一段文字。HTML 中的段落使用 <p> 标签来定义。</p>
<p>这是第二段文字。每个段落之间浏览器会自动添加间距。</p>
<!-- 浏览器会合并多余空格 -->
<p>这里    有很多    空格，但浏览器    只显示一个。</p>
<!-- 段落内可以包含行内元素 -->
<p>这是一段包含 <strong>加粗文字</strong>、<em>斜体文字</em>和<a href="#">链接</a>的段落。</p>
<!-- 段落不能嵌套块级元素 -->
<!-- ❌ 错误：<p>文字<div>块元素</div>更多文字</p> -->
<!-- ✅ 正确：用 div 包裹多个段落 -->
<div>
  <p>第一段</p>
  <p>第二段</p>
</div>

<br> 换行标签详解

<!-- 在段落内强制换行 -->
<p>武鸣大学城<br>
广西壮族自治区南宁市<br>
武鸣区里建大道<br>
邮编：530100</p>
<!-- 诗歌示例 -->
<p>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>
<!-- ❌ 不要用 <br> 来制造段落间距，应该用 <p> 或 CSS margin -->
<!-- ❌ 错误做法 -->
文字第一行<br><br>
文字第二行
<!-- ✅ 正确做法 -->
<p>文字第一行</p>
<p>文字第二行</p>

<hr> 水平线标签详解

<p>这是第一节的内容。</p>
<hr>
<p>这是第二节的内容，主题已经切换。</p>
<!-- CSS 美化水平线 -->
<hr style="border: none; border-top: 2px dashed #ccc; height: 0; margin: 30px 0;">

<pre> 预格式化标签详解

<pre>
function hello(name) {
    console.log("Hello, " + name + "!");
    return true;
}
</pre>
<!-- 配合 <code> 使用（语义更清晰） -->
<pre><code>
const fruits = ["苹果", "香蕉", "橙子"];
fruits.forEach(fruit => console.log(fruit));
</code></pre>

空白处理规则总结

情况	普通 HTML 中	<pre> 标签中
多个空格	合并为 1 个空格	完全保留
换行符	合并为空格	完全保留
Tab 制表符	合并为 1 个空格	完全保留
前后空白	被修剪	完全保留

???? 练习任务

1. 写一篇短文，至少包含 3 个 <p> 段落
2. 在文末使用 <hr> 分隔，然后添加一个包含换行 (<br>) 的地址信息
3. 在文章中插入一段代码，使用 <pre><code> 展示
4. 用 CSS 自定义 <hr> 的外观（颜色、粗细、虚线样式）
5. 观察：在 <p> 里写 10 个连续空格，浏览器实际显示几个？