PHP小码农

Appearance

p 段落 ​

<p> 标签是 HTML 中最基础的文本容器，用于定义文本段落。每个 <p> 元素表示一段独立的文本内容，浏览器会自动在段落前后添加垂直间距来区分不同的段落。

前置知识

阅读本节前，建议先了解：h1 - h6 标题

基础概念 ​

<p> 是 "paragraph"（段落）的缩写，用于标记一个结构化的文本段落。在 HTML 中，<p> 是块级元素（block-level element），它会独占一行，并且浏览器会为其添加默认的上下外边距（margin），使段落之间有明显的视觉分隔。

段落是网页文本内容的基本组织单位。一个 <p> 元素应该包含一段主题完整的文本，不同主题的内容应分成不同的段落。

语法 ​

<p> 标签是一个双标签，需要开始标签 <p> 和结束标签 </p>：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>p 段落标签示例</title>
</head>
<body>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。段落之间会自动产生间距。</p>
  <p>这是第三个段落。每个段落都是一块独立的文本内容。</p>
</body>
</html>

详细说明 ​

p 标签的默认样式 ​

浏览器为 <p> 标签提供了以下默认样式：

属性默认值说明
displayblock块级元素，独占一行
margin-top1em段落上方间距
margin-bottom1em段落下方间距
line-heightnormal（通常为1.2~1.4）行高

p 是块级元素 ​

<p> 作为块级元素，具有以下特性：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>块级元素示例</title>
</head>
<body>
  <!-- 每个 p 独占一行 -->
  <p>这是段落一。</p>
  <p>这是段落二。</p>
  <p>这是段落三。</p>

  <!-- 相邻段落之间不会在同一行显示 -->
  <p>段落 A</p><p>段落 B</p>  <!-- 仍然会换行显示 -->
</body>
</html>

p 中可以包含的元素 ​

<p> 标签内可以包含行内元素和纯文本，但不能包含块级元素。

可以包含的内容：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>p 内可包含的元素</title>
</head>
<body>
  <!-- p 中可以包含行内元素 -->
  <p>这是一段包含 <strong>加粗</strong> 和 <em>斜体</em> 的文本。</p>

  <p>段落中可以有 <a href="#">链接</a> 和 <code>代码</code>。</p>

  <p>也支持 <mark>高亮</mark>、<small>小号文字</small>、<abbr title="HyperText Markup Language">HTML</abbr> 等行内元素。</p>

  <p>段落中还可以包含 <img src="photo.jpg" alt="照片"> 图片。</p>

  <p>甚至可以嵌入 <sub>下标</sub> 和 <sup>上标</sup>。</p>
</body>
</html>

不能包含的内容：

html
<!-- 错误！p 中不能嵌套块级元素 -->
<p>这是一个段落。
  <div>嵌套的 div</div>  <!-- 浏览器会自动关闭 p，然后打开 div -->
  <h2>嵌套的标题</h2>  <!-- 同样会导致 p 被提前关闭 -->
</p>

浏览器的容错机制

当浏览器解析到 <p> 内部的块级元素时，会自动关闭前面的 <p> 标签。这意味着上述错误代码会被浏览器解析为：

html
<p>这是一个段落。</p>
<div>嵌套的 div</div>
<h2>嵌套的标题</h2>

虽然浏览器能容错处理，但不应该依赖这种行为，应当编写正确的 HTML。

p 标签不能嵌套 ​

<p> 标签之间不能相互嵌套，一个 <p> 内部不能包含另一个 <p>：

html
<!-- 错误！p 不能嵌套 p -->
<p>外层段落
  <p>内层段落</p>  <!-- 浏览器会自动关闭外层 p -->
</p>
html
<!-- 正确：使用多个并列的 p -->
<p>第一段内容。</p>
<p>第二段内容。</p>
<p>第三段内容。</p>

空段落问题 ​

空的 <p> 标签虽然在语法上不算错误，但在语义上毫无意义，不应该用于创建间距：

html
<!-- 不推荐：用空 p 创建间距 -->
<p>段落内容。</p>
<p></p>         <!-- 错误用法：空段落不应被用来创建间距 -->
<p>另一段内容。</p>
html
<!-- 正确：使用 CSS margin 控制间距 -->
<p>段落内容。</p>
<p style="margin-bottom: 2em;">另一段内容。</p>

段间距控制 ​

使用 CSS 控制段落间距 ​

通过 CSS 可以精确控制段落的间距，这是推荐的做法：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>段落间距控制</title>
  <style>
    /* 统一设置段落间距 */
    p {
      margin-top: 0;
      margin-bottom: 1.5em;
      line-height: 1.8;
    }

    /* 第一个段落的上方不需要间距 */
    .article-content > p:first-child {
      margin-top: 0;
    }

    /* 最后一个段落的下方不需要间距 */
    .article-content > p:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="article-content">
    <h1>文章标题</h1>
    <p>这是第一段，上方没有多余间距。</p>
    <p>这是第二段，与第一段之间有 1.5em 的间距。</p>
    <p>这是第三段，下方没有多余间距。</p>
  </div>
</body>
</html>

首行缩进 ​

中文排版中常用的段落首行缩进可以通过 CSS 的 text-indent 属性实现：

css
/* 中文排版：首行缩进 2 个字符 */
p {
  text-indent: 2em;
  margin-bottom: 0.8em;
  line-height: 1.8;
}

/* 紧跟标题的段落不缩进 */
h1 + p, h2 + p, h3 + p {
  text-indent: 0;
}

实战示例 ​

文章排版 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章排版示例</title>
  <style>
    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem 1rem;
      color: #333;
      line-height: 1.8;
    }
    h1 {
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
    }
    .meta {
      color: #888;
      font-size: 0.875rem;
      margin-bottom: 2rem;
    }
    p {
      text-indent: 2em;
      margin-bottom: 1em;
    }
    /* 紧跟标题后的段落不缩进 */
    h2 + p {
      text-indent: 0;
    }
  </style>
</head>
<body>
  <h1>人工智能的发展趋势</h1>
  <p class="meta">2025年1月15日 | 科技前沿</p>

  <h2>引言</h2>
  <p>人工智能（AI）正在深刻改变我们的生活方式和工作模式。从智能语音助手到自动驾驶汽车，AI 技术已经渗透到各个行业领域。</p>

  <p>近年来，大语言模型的突破性进展使得 AI 的应用场景更加广泛。自然语言处理、图像识别、推荐系统等技术日趋成熟，为各行各业带来了前所未有的机遇。</p>

  <h2>大语言模型</h2>
  <p>大语言模型（LLM）是当前 AI 领域最受关注的技术方向之一。通过海量文本数据的训练，这些模型展现出了强大的文本生成、理解和推理能力。</p>

  <p>从 GPT 系列到开源模型，大语言模型的发展速度令人瞩目。它们不仅能够完成文本创作、翻译、摘要等任务，还在代码生成、数学推理等领域取得了显著进步。</p>

  <h2>未来展望</h2>
  <p>随着技术的不断进步，AI 将在医疗、教育、交通等领域发挥更大的作用。同时，AI 安全和伦理问题也需要社会各界共同关注和解决。</p>
</body>
</html>

p 与其他块级元素的搭配 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>p 与其他元素搭配</title>
  <style>
    .content {
      max-width: 680px;
      margin: 0 auto;
      padding: 1rem;
    }
    p {
      margin-bottom: 1.2em;
      line-height: 1.75;
    }
    blockquote {
      border-left: 3px solid #ddd;
      padding-left: 1rem;
      color: #666;
      margin: 1.5em 0;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>段落与引言</h1>

    <!-- 段落正常排列 -->
    <p>HTML 中的段落标签是构建网页文本内容的基本单位。正确使用段落标签可以让内容结构清晰，阅读体验更好。</p>

    <!-- 段落与引用块搭配 -->
    <blockquote>
      <p>语义化的 HTML 不仅是良好的编码习惯，更是对 Web 标准的尊重和对所有用户的关怀。</p>
    </blockquote>

    <!-- 继续段落 -->
    <p>在编写 HTML 时，我们应该始终关注内容的语义而非视觉表现。样式应当交给 CSS 来处理，HTML 只负责描述内容的结构和含义。</p>

    <!-- 段落与列表搭配 -->
    <p>使用段落时需要注意以下几点：</p>
    <ul>
      <li>每个段落主题应该明确</li>
      <li>段落间距通过 CSS 控制</li>
      <li>不要在段落中嵌套块级元素</li>
    </ul>
  </div>
</body>
</html>

注意事项 ​

连续空白字符的处理 ​

浏览器会将 HTML 中的连续空白字符（空格、制表符、换行符）压缩为单个空格显示。这意味着无论你在 HTML 源码中输入多少个空格或换行，浏览器只会显示一个空格：

html
<!-- 以下三种写法的显示效果完全相同 -->
<p>Hello     World</p>
<p>Hello World</p>
<p>
  Hello
  World
</p>

如果需要保留空白字符和换行格式，应使用 <pre> 标签（后续章节会详细介绍）。

标签闭合的注意事项 ​

虽然 HTML5 允许省略某些标签的结束标签，但 <p> 的结束标签 </p> 在某些情况下是必要的。当 <p> 后面紧跟以下元素时，<p> 会被自动关闭：

  • <div>、<p>、<h1>-<h6>
  • <ul>、<ol>、<dl>
  • <table>、<form>、<blockquote>
  • <hr>、<pre>、<address>
  • <section>、<article>、<aside>、<header>、<footer>、<nav>
html
<!-- 浏览器会将以下代码解析为： -->
<p>第一段
<p>第二段</p>  <!-- 第一个 p 在第二个 p 出现时自动关闭 -->

<!-- 等价于 -->
<p>第一段</p>
<p>第二段</p>

最佳实践 ​

  1. 明确主题：每个段落只表达一个主题，不要将多个不相关的内容放在同一段落中
  2. 使用 CSS 控制间距：不要使用空 <p> 或 <br> 来创建段落间距
  3. 不嵌套块级元素：段落中只放行内元素和文本
  4. 合理设置行高：中文排版建议行高设置为 1.75 ~ 2.0
  5. 保持闭合一致：虽然可以省略结束标签，但建议始终写出 </p> 以保持代码清晰
  6. 首行缩进符合习惯：中文排版中适当使用首行缩进，紧跟标题的段落除外

下一节

继续学习：hr 分隔线

参考链接 ​