HTML系列教程:7_HTML 段落 <p> 标签零基础详细讲解
2026/8/28 7:50:42 网站建设 项目流程

p是英文paragraph(段落)的缩写。 网页里所有普通正文文字,都应该放在<p>段落元素里面。 标题<h1>~<h6>用来做标题;<p>用来写正文内容。

基础语法

<p>双标签元素

<p>这里写段落的文字内容</p>
  • <p>:开始标签
  • 这里写段落的文字内容:段落的文本内容
  • </p>:结束标签

段落标签一定要写在<body>标签内部,写在 head 里面页面看不到内容。

浏览器默认自带效果

  1. 一个<p>代表一个完整段落,段落和段落之间会自动产生一段空白距离
  2. 文字会自动换行:浏览器窗口变窄,文字会自动折到下一行,不需要手动写换行。
  3. 不会加粗,就是普通正文文字样式。

基础示例:多个段落

复制代码保存为 html 运行看效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>段落演示</title> </head> <body> <h2>小猫介绍</h2> <p>小猫是很可爱的小动物,性格温顺安静,很多家庭把小猫当做宠物来饲养。</p> <p>小猫一天大部分时间都在睡觉,喜欢晒太阳,喜欢玩小玩具。</p> <p>小猫爱吃猫粮、小鱼干,好奇心很强。</p> </body> </html>

代码解释:

  1. <h2>是小标题;下面三段文字分别放在 3 个独立的<p></p>里面。
  2. 三个段落,浏览器渲染后,每两段中间会自动空一行,不需要我们手动敲空格或者换行标签制造空隙
  3. 如果浏览器窗口拉窄,每一段内部文字会自动换行。

✔记住:写新的一段文字,就新建一对<p> </p>


段落内部换行:<br>换行标签

有时候同一段文字里面,想要强制换到下一行,但是不想产生段落的大空白,就用<br>标签。<br>是单标签(空元素),没有结束标签。

⚠分清重点(新手最容易混淆)

  • <p>:代表新段落→ 换行 +中间有空隙
  • <br>:只是单纯强制换行,不会产生上下空白,文字紧紧挨着。

示例对比:

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>p与br对比</title> </head> <body> <h3>使用 br 在同一段内换行</h3> <p>床前明月光<br> 疑是地上霜<br> 举头望明月<br> 低头思故乡 </p> <h3>使用p标签分段(段落之间有空隙)</h3> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </body> </html>

解释运行效果:

  1. 第一部分,全部在同一个<p>里面,<br>只做换行,四句诗紧紧挨在一起,中间没有大空隙。
  2. 第二部分,每一句诗一个独立<p>,四句诗每两行中间会空一大段距离。

使用原则: ✅段落之间分隔,优先用<p>✅同一段落内部需要强制换行,才用<br>❌不要大量滥用<br>去制造空白间距,后期用 CSS 控制间距。


HTML 源码中的回车、空格不起作用!

非常重要知识点:在 HTML 代码里面,不管你敲多少回车换行、多少个空格,网页浏览器只会显示 1 个空格。

示例:

<p>我 爱 HTML前端学习</p>

代码里面敲了很多空格,网页页面只会看到:我 爱 HTML前端学习,只有 1 个空格。

如果想要网页上显示多个连续空格,使用&nbsp;空格实体字符,一个&nbsp;代表 1 个空格。

<p>我&nbsp;&nbsp;&nbsp;爱HTML前端学习</p>

实际开发几乎很少用&nbsp;,间距交给 CSS 处理,了解即可。


p 段落标签可以使用全局属性

<p>属于普通 HTML 元素,可以写全局属性:titleclassid,属性写在开始标签内

示例 1:title 属性,鼠标悬浮提示

<p title="这是一段关于小狗的介绍文字">小狗性格活泼,喜欢跑来跑去。</p>

解释:鼠标移动到这段文字上方,会弹出 title 里面写的提示文字。

示例 2:class 属性(给 CSS 使用)

<p class="note">温馨提示:小动物需要细心照顾。</p>

class 给段落打上标记,现在看不出效果,后面 CSS 可以统一修改这一类段落的颜色、字体大小。

示例 3:id 属性(页面锚点,id 整个页面唯一)

<p id="desc">这里是页面描述文字</p>

完整带多个属性示例:

<p class="text-info" title="宠物说明" id="pet‑info">小狗很喜欢和主人玩耍。</p>

多个属性写在开始标签,属性之间用空格隔开。


段落里面可以嵌套什么内容?

  1. ✅可以嵌套文字
<p>普通文字内容</p>
  1. ✅可以嵌套行内标签:<a>链接、<b>加粗、<br>换行
<p>想要了解更多,可以点击 <a href="https://www.baidu.com" target="_blank">百度搜索</a> 获取资料。 </p>

p 标签里面,不能嵌套块级标签,不能嵌套另一个 p 标签!错误示范:

<!--错误!p里面不能放p--> <p> 第一段文字 <p>又一个段落</p> </p>

浏览器会自动把内层的 p 拆开,语法错乱。

<p>是块级元素,p 里面只放文字、链接、加粗这类行内内容,不要嵌套 h、div、p。


新手高频错误汇总

错误 1:不写 p 标签,直接在 body 写大段文字

<body> 小猫是很可爱的小动物。 小猫喜欢睡觉。 </body>

虽然浏览器也能显示,但是不符合 HTML 规范,正文文字尽量包裹在<p>标签。

错误 2:混淆 p 和 br,滥用 br 制造段落空隙

<p>第一句话</p> <br><br><br> <p>第二句话</p>

❌不要用很多<br>来空行,段落之间的间距交给 CSS 控制。

错误 3:忘记写结束标签</p>

<p>这是一段正文文字 <h2>下一个标题</h2>

忘记闭合</p>,虽然浏览器会自动补全,但是属于不规范写法,一定要成对写。

错误 4:把段落写在 head 标签中

<head> <p>测试文字</p> </head>

head 里面放网页配置,页面显示内容全部写在 body。

错误 5:p 里面嵌套 p、h 标题

<p> <h3>小标题</h3> 正文文字 </p>

❌p 里面不要放 h 标题标签,标题要写在 p 外面。


完整综合示例(标题 + 段落 + 链接)

复制代码直接运行

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的家乡</title> </head> <body> <h1>我的家乡介绍</h1> <h2>家乡风景</h2> <p>我的家乡在海边,这里空气清新,大海一望无际。</p> <p>每到傍晚,海边的日落特别漂亮,很多人来海边散步。</p> <h2>家乡美食</h2> <p>海边城市海鲜种类丰富,鱼虾贝类都很新鲜。<br> 很多游客专门过来品尝本地特色海鲜。 </p> <p class="tip" title="拓展阅读">想了解更多旅游信息,可以访问 <a href="https://www.baidu.com" target="_blank">百度</a>查询。 </p> </body> </html>

本篇知识点总结

  1. <p>段落标签,专门用来存放网页正文文本,双标签,成对使用。
  2. 每一个新段落就新建一组<p></p>;段落之间浏览器自动产生空白间距。
  3. <br>是强制换行单标签;只用于同一段内部换行,不会产生段落空隙。
  4. HTML 源码中的回车、多个空格网页只会解析成 1 个空格;连续空格用&nbsp;
  5. p 支持全局属性titleclassid,属性写在开始标签。
  6. p 内部可以放文字、链接、加粗等行内内容;p 里面不能嵌套 p、h 标题这类块级标签
  7. 页面可见内容全部写在<body>里面。

小练习:写一篇自我介绍页面,h1 写名字,h2 写爱好,用多个<p>写几段自我介绍文字,其中一段内部用<br>换行。

下节预告

下一篇教程:HTML 文本格式化。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询