HTML 段落

学习目标

掌握  标签的核心作用与默认行为
理解 HTML 对空白字符（空格、换行）的处理规则
学会合理使用   和 <hr> 实现换行与分隔
避免常见错误（如嵌套段落、滥用对齐属性）
用 CSS 替代已废弃的 align 属性，实现现代样式控制

什么是 HTML 段落

在 HTML 中，段落是通过  标签定义的块级文本容器，用于将内容划分为逻辑清晰、易于阅读的独立区块。

基本语法：

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

浏览器默认行为：

自动在段落前后添加垂直间距（margin）
每个  占据一整行（display: block）
压缩多余空白：多个空格 → 1 个；多行换行 → 合并为一行

这种“空白折叠”机制源于 HTML 的设计理念：关注内容结构，而非排版细节。

如何处理空白字符

HTML 会自动规范化用户输入的空白，确保内容在不同设备上一致显示：

<p>
    这段文字包含    
    多个空格和
    换行。
</p>

浏览器实际渲染效果：

这段文字包含多个空格和换行。

关键规则：

输入	渲染结果
多个连续空格	显示为一个空格
手动换行	被忽略，文本连成一行
制表符	转换为一个空格

若需保留原始格式（如诗歌、代码），应使用 <pre> 标签（见后文对比）。

实现换行

  标签

当需要在同一段落内强制换行（而非开启新段落），使用  ：

<br> 或 <br />（XHTML 风格，但 HTML5 中两者等效）

使用场景：

地址书写（姓名、街道、城市分行）
诗歌或歌词分行
表单中的简短提示

<p>
  张三<br>
  北京市海淀区<br>
  邮编：100000
</p>

不要滥用  ！
若频繁换行，可能意味着应拆分为多个段落或使用列表（<ul>/<ol>）。

内容分隔

<hr> 水平线

<hr>（Horizontal Rule）用于在语义上分隔不同主题的内容区块，提供视觉分割。

默认样式：

一条横跨容器宽度的细线
前后带有默认 margin

正确用法示例：

<h2>技术文章</h2>
<p>介绍前端开发最佳实践...</p>

<hr>

<h2>社区活动</h2>
<p>本周编程马拉松报名开启...</p>

语义化意义：<hr> 不仅是装饰线，更表示“主题切换”。
错误用法：仅为了美观而随意插入，无内容逻辑分隔。

段落对齐

从 align 到 CSS

旧版 HTML 支持 align 属性控制段落对齐：

<!-- 已废弃，不推荐 -->
<p align="center">居中对齐</p>

为什么被弃用

违反“结构与样式分离”原则
无法复用，维护困难
不支持响应式设计

现代替代方案（CSS）

<style>
  .text-center { text-align: center; }
  .text-right  { text-align: right; }
</style>

<p class="text-center">居中对齐（推荐）</p>
<p style="text-align: right;">右对齐（内联，仅限临时）</p>

最佳实践：在 CSS 文件中定义通用类，如 .text-left, .text-center。

常见错误

1. 嵌套段落

<!-- 错误：不能在 <p> 内再放 <p> -->
<p>
  外层段落
  <p>内层段落</p> <!-- 浏览器会自动关闭外层 p！ -->
</p>

正确做法：用 <div> 或其他容器包裹多个段落：

<div>
  <p>段落一</p>
  <p>段落二</p>
</div>

2. 用 p 包裹非文本

<!-- 错误：图片不属于“段落文本” -->
<p>
  <img src="logo.png" alt="Logo">
</p>

正确做法：

图片单独使用 <img>
若需组合，用 <figure> + <figcaption>：

<figure>
  <img src="chart.png" alt="销售趋势图">
  <figcaption>图1：2024年Q1销售数据</figcaption>
</figure>

3. 用段落模拟标题或按钮

<!-- 错误：这不是段落，是标题！ -->
<p style="font-size: 24px; font-weight: bold;">重要通知</p>

✅ 正确做法：使用语义化标签：

<h2>重要通知</h2>

p vs pre

何时保留原始格式

特性	`<p>`	`<pre>`
空白处理	压缩空格与换行	保留所有空白与换行
字体	默认等宽？否	默认等宽字体（如 Consolas）
用途	普通正文段落	代码、诗歌、ASCII 艺术等

<pre> 示例：

<pre>
function hello() {
    console.log("Hello, world!");
}
</pre>

提示：展示代码时，通常结合 <code> 使用：<pre><code>...</code></pre>

重点总结

要点	说明
`<p>` 作用	定义语义化文本段落，自动添加间距
空白折叠	多空格 / 换行 → 单空格 + 单行
换行	用 `<br>` 实现段内换行
分隔内容	用 `<hr>` 表示主题切换
对齐方式	禁用 `align`，改用 CSS `text-align`
禁止嵌套	`<p>` 内不能包含其他块级元素（包括另一个 `<p>`）
语义优先	只用于真实段落文本，勿作布局容器

思考题

为什么浏览器要“压缩”HTML 中的多余空格和换行？这对 Web 开发有何历史意义？
在响应式设计中，如何用 CSS 让段落在移动端自动调整行高和字间距以提升可读性？
如果用户从 Word 复制带格式文本到网页，如何避免因隐藏换行符导致的段落合并问题？有哪些前端处理策略？