专栏：一个零基础小白的 C# 成长 100 天
学习阶段：HTML 基础
难度：⭐⭐
关键词：HTML、段落、p 标签、网页排版、前端基础
一、写在前面
在上一篇文章中，我们学习了 HTML 标题标签，知道了 <h1> 到 <h6> 可以用来定义不同级别的标题。
但是，一篇完整的网页只有标题显然是不够的。
文章中还需要大量的正文内容，例如：
- 这是第一段文字。
- 这是第二段文字。
- 这是第三段文字。
在 HTML 中，我们通常使用 <p> 标签来表示一个段落。
今天这篇文章，我们就从最基础的 <p> 标签开始，详细学习 HTML 段落的使用方法。
二、什么是 HTML 段落？
HTML 中的段落使用 <p> 标签定义。
p 是英文 paragraph 的缩写，意思就是“段落”。
最基本的写法如下：
<p>这是一个 HTML 段落。</p>
浏览器显示时，会把 <p> 标签中的内容作为一个独立的段落进行展示。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 段落</title>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
</body>
</html>
浏览器最终会看到三个独立的文本段落。
三、<p> 标签的基本结构
我们可以把 <p> 标签拆开来看：
<p>段落内容</p>
其中：
<p>
表示段落开始。
而：
</p>
表示段落结束。
中间的内容就是段落正文。
例如：
<p>我正在学习 HTML。</p>
可以理解为：
开始一个段落
↓
我正在学习 HTML。
↓
结束这个段落
因此，HTML 中大多数段落都采用：
<p>内容</p>
这样的形式。
四、为什么不直接写文字？
刚开始学习 HTML 时，很多初学者可能会产生一个疑问：
既然我要显示文字，直接写文字不就可以了吗？
例如：
你好，我正在学习 HTML。
我希望以后成为一名程序员。
我正在努力学习编程。
看起来好像没有问题。
但实际上，这并不是一个规范的 HTML 文档结构。
更推荐使用 <p> 对不同的内容进行语义化划分：
<p>你好，我正在学习 HTML。</p>
<p>我希望以后成为一名程序员。</p>
<p>我正在努力学习编程。</p>
这样不仅结构更加清晰，也更符合 HTML 的语义化思想。
五、多个 <p> 标签有什么效果？
我们可以连续写多个段落：
<p>第一段：HTML 是一种用于创建网页的标记语言。</p>
<p>第二段：HTML 通过标签描述网页的结构。</p>
<p>第三段：我们可以使用不同的标签创建标题、段落、图片和链接。</p>
浏览器会将它们显示为三个独立的段落。
通常情况下，浏览器会在不同 <p> 元素之间保留一定的上下间距。
因此我们不需要手动给每一个段落添加空格。
六、<p> 标签与换行有什么区别？
这是 HTML 初学者非常容易混淆的一个知识点。
例如：
<p>第一段内容</p>
<p>第二段内容</p>
这是两个独立的段落。
而：
第一行内容<br>
第二行内容
则是在同一个文本内容中进行换行。
它们虽然都可能产生“换行”的视觉效果，但是语义完全不同。
1. <p> 表示段落
<p>这是第一段。</p>
<p>这是第二段。</p>
表示：
这里存在两个不同的段落。
2. <br> 表示换行
<p>
第一行内容<br>
第二行内容
</p>
表示：
这是同一个段落，只是在中间换了一行。
因此可以简单记住：
<p>用于划分段落，<br>用于文本换行。
七、实际案例：制作一篇简单文章
下面我们通过一个完整案例来理解 <p> 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一篇 HTML 文章</title>
</head>
<body>
<h1>我的 HTML 学习之路</h1>
<p>HTML 是我学习编程接触到的第一门网页技术。</p>
<p>刚开始学习的时候，我对各种标签并不了解。</p>
<p>随着学习不断深入，我逐渐认识了标题、段落、图片、链接等 HTML 标签。</p>
<p>我相信只要坚持学习，就一定能够掌握更多的编程知识。</p>
</body>
</html>
这个网页的基本结构就是：
网页
│
├── 标题
│
├── 段落 1
│
├── 段落 2
│
├── 段落 3
│
└── 段落 4
这就是最简单的 HTML 文章结构。
八、<p> 标签中可以放什么？
<p> 标签主要用于放置段落文本，但段落中也可以包含其他行内容元素。
例如：
<p>
我正在学习 <strong>HTML</strong>，
并且希望以后能够成为一名程序员。
</p>
这里：
<strong>HTML</strong>
用于强调 HTML。
也就是说，HTML 标签可以进行组合使用。
例如：
<p>
HTML 是网页的基础，
<strong>CSS</strong> 负责网页样式，
JavaScript 负责网页交互。
</p>
这样就可以构建出更加丰富的网页内容。
九、段落中的空格为什么没有按照我们输入的显示？
这是 HTML 初学者经常遇到的问题。
例如我们写：
<p>
HTML CSS JavaScript
</p>
很多人可能认为浏览器会显示多个连续空格。
但实际情况下，HTML 对普通文本中的连续空白通常会进行合并处理。
最终视觉效果可能类似：
HTML CSS JavaScript
而不是：
HTML CSS JavaScript
因此，不要使用大量空格来控制网页排版。
真正的网页布局应该交给 CSS 来完成。
十、如何控制段落的字体、颜色和间距？
HTML 负责网页结构，而 CSS 负责网页样式。
例如：
<p class="content">
HTML 是构建网页的重要基础。
</p>
然后使用 CSS：
.content {
color: #333;
font-size: 18px;
line-height: 1.8;
}
这样就可以控制段落的：
- 字体颜色
- 字体大小
- 行高
- 间距
- 对齐方式
- 字体样式
例如：
p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
}
表示所有 <p> 段落都使用统一的样式。
十一、为什么推荐 HTML + CSS 分离？
有些初学者可能会直接这样写：
<p style="color: red; font-size: 20px;">
HTML 学习之路
</p>
这种写法虽然可以使用，但当网页越来越复杂之后，维护起来会比较麻烦。
更推荐将结构和样式分开。
HTML：
<p class="article-text">
HTML 学习之路
</p>
CSS：
.article-text {
color: red;
font-size: 20px;
}
这样做的好处是：
HTML 负责“内容是什么”，CSS 负责“内容长什么样”。
这也是前端开发中非常重要的思想。
十二、常见错误
错误一：忘记结束标签
错误：
<p>这是一个段落。
虽然浏览器可能仍然能够进行容错处理，但不推荐这样写。
正确：
<p>这是一个段落。</p>
错误二：使用大量 <br> 模拟段落
例如：
<p>第一段</p>
<br>
<br>
<br>
<p>第二段</p>
通常没有必要。
如果只是想控制段落之间的距离，更推荐使用 CSS：
p {
margin-bottom: 20px;
}
错误三：使用空格控制页面布局
例如：
<p>这是 一段文字</p>
不要依赖这种方式控制页面布局。
网页排版应该使用 CSS。
十三、<p> 和 <br> 对比
| 标签 | 作用 | 使用场景 |
|---|---|---|
<p> | 定义段落 | 文章正文 |
<br> | 强制换行 | 同一段内容内部换行 |
简单来说：
<p>第一段</p>
<p>第二段</p>
代表两个段落。
而：
<p>
第一行<br>
第二行
</p>
代表同一个段落中的两行文字。
十四、实战：制作个人介绍页面
下面我们做一个简单的小项目。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人介绍</title>
<style>
body {
width: 800px;
margin: 40px auto;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>我的个人介绍</h1>
<p>
大家好，我是一名正在学习编程的初学者。
</p>
<p>
目前我正在学习 HTML，希望通过不断练习掌握网页开发的基础知识。
</p>
<p>
在学习 HTML 之后，我还计划继续学习 CSS、JavaScript 以及 C#。
</p>
<p>
虽然学习编程的过程中会遇到很多问题，但是我相信坚持下去就一定能够取得进步。
</p>
</body>
</html>
这个案例同时使用了：
HTML
↓
网页结构
CSS
↓
网页样式
这是后续学习前端开发必须掌握的基础。
十五、知识点总结
今天我们主要学习了 HTML 的段落标签 <p>。
核心知识可以总结为：
<p>
定义一个段落
</p>
重点记住以下几个知识点：
① <p> 是什么？
<p> 是 HTML 中用于定义段落的标签。
② p 是什么意思？
p 是：
paragraph
也就是“段落”。
③ <p> 和 <br> 有什么区别？
<p>
表示一个段落
<br>
表示换行
④ 段落样式由谁控制？
HTML 负责结构：
<p>文章内容</p>
CSS 负责样式：
p {
line-height: 1.8;
}
十六、给零基础小白的练习
学完今天的内容，不要只看代码，一定要自己敲一遍。
建议完成下面这个练习：
练习要求：
创建一个 index.html 文件，完成一个简单的“自我介绍”网页。
要求包含：
- 一个
<h1>标题 - 至少 5 个
<p>段落 - 使用
<br>完成一次段落内部换行 - 使用 CSS 设置段落字体大小
- 使用 CSS 设置段落行高
- 使用 CSS 设置段落之间的间距
例如：
<h1>我的编程学习之路</h1>
<p>
大家好，我是一名编程初学者。
</p>
<p>
我正在学习 HTML、CSS 和 C#。
</p>
<p>
我的目标是成为一名优秀的程序员。
</p>
不要急着追求代码写得多复杂。
对于零基础学习者来说，能够自己敲出来、运行起来，比单纯看懂代码更加重要。
十七、写在最后
今天我们学习了 HTML 中非常基础，但又非常重要的 <p> 标签。
虽然它看起来很简单：
<p>这是一个段落。</p>
但是网页中的大量文字内容，实际上都离不开段落。
从标题：
<h1>网页标题</h1>
到段落：
<p>网页正文。</p>
我们已经开始逐渐构建出一个真正网页的基本结构。
对于正在学习编程的零基础小白来说，不要小看这些基础标签。
HTML 就像盖房子的骨架，只有基础打牢，后面的 CSS、JavaScript 以及更复杂的 Web 开发才能真正学得明白。
下一篇文章，我们将继续学习一个非常实用的 HTML 知识点：
HTML 文本格式化——如何让网页中的文字变粗、变斜、突出显示？
继续坚持，今天的学习也算完成了一小步。💪
📌 本文核心知识
HTML 段落
│
├── <p> 定义段落
│
├── <br> 强制换行
│
├── HTML 负责网页结构
│
└── CSS 负责网页样式
一个零基础小白的 C# 成长 100 天，继续前进！
如果这篇文章对你有帮助，欢迎 点赞、收藏、评论，一起记录从零基础到程序员的成长过程。
扫一扫
2927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
