HTML 初学者 - 第 2 课 - 标签 p、div 及其区别。标签 br

11/10/2025, by Ivan

在上一课中，我们创建了第一个 HTML 文档，这意味着你已经知道如何在文本编辑器中编写 HTML 代码，并通过浏览器查看修改后的效果（通常按 F5 键刷新页面）。

在本课中，我们将继续处理文本，并学习如何使用标签来包裹文本：span、p、div。同时，我们还会学习 br 标签。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
     
  </body>
</html>

这就是我们将要继续操作的代码。

我们来添加几行文本：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <p>第一行文字在 P 标签中</p>
    <p>第二行文字在 P 标签中</p>
    <div>第一行文字在 DIV 标签中</div>
    <div>第二行文字在 DIV 标签中</div>
  </body>
</html>

如果你在浏览器中打开该文档，会看到 p 标签中的内容会分别显示在不同的行上，但两者还是有区别的。浏览器默认为 P 标签设置了上下外边距（margin），而 DIV 标签中的内容则是紧贴在一起的。实际上，p 是段落标签，而 div 是区块（容器）标签。也就是说，如果我们需要包裹文本，就应该使用 P 标签；如果我们需要定义一个区域，比如给该区域设置背景色或边框，就使用 DIV 标签。

在网站中，如果有文本内容，它必须放在 p 或 h1–h6 标签中，除非该文本是服务性内容（用于结构或装饰）。因此，文本的正确结构应该是这样的：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <div>
          <p>第一行文字在 P 标签中</p>
      <p>第二行文字在 P 标签中</p>
    </div>
  </body>
</html>

因此，结构应为 body>div>p。记住：不能在 p 标签中嵌套 div 标签。像 body>p>div 这样的结构是错误的。

现在我们来看看如何将文本换行。有时一个段落太长，我们可以选择将其分成多个段落，或者使用换行标签 br。<br /> 是单标签，因此在右尖括号前加斜杠。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <div>
      <p>HTML 语言由英国科学家蒂姆·伯纳斯-李于 1989—1991 年间在瑞士日内瓦的欧洲核子研究组织开发。HTML 被设计为一种用于科学和技术文档交换的语言，适合非排版专业人士使用。HTML 通过定义一小组结构和语义元素（描述符）成功解决了 SGML 的复杂性问题。描述符也常被称为“标签”。借助 HTML 可以轻松创建相对简单但美观的文档。除了简化文档结构，HTML 还引入了超文本支持。多媒体功能是后来添加的。最初，HTML 被设想和创建为一种用于结构化和格式化文档的语言，与显示设备无关。理想情况下，带有 HTML 标记的文本应能够在不同技术条件的设备上正确显示（现代计算机的彩色屏幕、掌上电脑的单色屏幕、手机的小屏幕或语音阅读设备）。然而，现代 HTML 的使用方式与最初的目标相去甚远。例如，<TABLE> 标签最初用于创建文档中的表格，但如今经常被用来排版页面。随着时间的推移，HTML 的跨平台理念被现代多媒体和图形设计需求所取代。</p>
    </div>
  </body>
</html>

这段文字太长了。即使我们在文本编辑器中换行，在 HTML 中也不会起作用：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <div>
          <p>HTML 语言由英国科学家蒂姆·伯纳斯-李于 1989—1991 年间在瑞士日内瓦的欧洲核子研究组织开发。
      HTML 被设计为一种用于科学和技术文档交换的语言，适合非排版专业人士使用。
      HTML 通过定义一小组结构和语义元素（描述符）成功解决了 SGML 的复杂性问题。
      描述符也常被称为“标签”。借助 HTML 可以轻松创建相对简单但美观的文档。
      除了简化文档结构，HTML 还引入了超文本支持。多媒体功能是后来添加的。
      最初，HTML 被设想和创建为一种用于结构化和格式化文档的语言，与显示设备无关。
      理想情况下，带有 HTML 标记的文本应能够在不同技术条件的设备上正确显示（现代计算机的彩色屏幕、掌上电脑的单色屏幕、手机的小屏幕或语音阅读设备）。
      然而，现代 HTML 的使用方式与最初的目标相去甚远。例如，<TABLE> 标签最初用于创建文档中的表格，但如今经常被用来排版页面。
      随着时间的推移，HTML 的跨平台理念被现代多媒体和图形设计需求所取代。</p>
    </div>
  </body>
</html>

这样做在浏览器中并不会产生任何变化，此时我们就需要使用 <br /> 标签。让我们在每一行的末尾添加它：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <div>
      <p>HTML 语言由英国科学家蒂姆·伯纳斯-李于 1989—1991 年间在瑞士日内瓦的欧洲核子研究组织开发。<br /> 
      HTML 被设计为一种用于科学和技术文档交换的语言，适合非排版专业人士使用。<br />
      HTML 通过定义一小组结构和语义元素（描述符）成功解决了 SGML 的复杂性问题。<br /> 
      描述符也常被称为“标签”。借助 HTML 可以轻松创建相对简单但美观的文档。<br />
      除了简化文档结构，HTML 还引入了超文本支持。<br />
      多媒体功能是后来添加的。<br />
      最初，HTML 被设想和创建为一种用于结构化和格式化文档的语言，与显示设备无关。<br />
      理想情况下，带有 HTML 标记的文本应能够在不同技术条件的设备上正确显示（现代计算机的彩色屏幕、掌上电脑的单色屏幕、手机的小屏幕或语音阅读设备）。<br />
      然而，现代 HTML 的使用方式与最初的目标相去甚远。例如，<TABLE> 标签最初用于创建文档中的表格，但如今经常被用来排版页面。<br />
      随着时间的推移，HTML 的跨平台理念被现代多媒体和图形设计需求所取代。</p>
    </div>
  </body>
</html>

现在浏览器就能理解需要换行了，这要归功于 <br /> 标签。

我们也可以把文本分成多个段落，使用 p 标签：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <div>
      <p>HTML 语言由英国科学家蒂姆·伯纳斯-李于 1989—1991 年间在瑞士日内瓦的欧洲核子研究组织开发。<br /> 
      HTML 被设计为一种用于科学和技术文档交换的语言，适合非排版专业人士使用。<br />
      HTML 通过定义一小组结构和语义元素（描述符）成功解决了 SGML 的复杂性问题。<br /> 
      描述符也常被称为“标签”。借助 HTML 可以轻松创建相对简单但美观的文档。<br />
      除了简化文档结构，HTML 还引入了超文本支持。<br />
      多媒体功能是后来添加的。<br />
      </p>
      <p>
      最初，HTML 被设想和创建为一种用于结构化和格式化文档的语言，与显示设备无关。<br />
      理想情况下，带有 HTML 标记的文本应能够在不同技术条件的设备上正确显示（现代计算机的彩色屏幕、掌上电脑的单色屏幕、手机的小屏幕或语音阅读设备）。<br />
      然而，现代 HTML 的使用方式与最初的目标相去甚远。例如，<TABLE> 标签最初用于创建文档中的表格，但如今经常被用来排版页面。<br />
      随着时间的推移，HTML 的跨平台理念被现代多媒体和图形设计需求所取代。</p>
    </div>
  </body>
</html>

刷新浏览器页面后，你会看到文本被分成了两个段落。

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

HTML 初学者 - 第 2 课 - 标签 p、div 及其区别。标签 br