p是英文paragraph(段落)的缩写。 网页里所有普通正文文字,都应该放在<p>段落元素里面。 标题<h1>~<h6>用来做标题;<p>用来写正文内容。
基础语法
<p>是双标签元素
<p>这里写段落的文字内容</p><p>:开始标签这里写段落的文字内容:段落的文本内容</p>:结束标签
段落标签一定要写在
<body>标签内部,写在 head 里面页面看不到内容。
浏览器默认自带效果
- 一个
<p>代表一个完整段落,段落和段落之间会自动产生一段空白距离。 - 文字会自动换行:浏览器窗口变窄,文字会自动折到下一行,不需要手动写换行。
- 不会加粗,就是普通正文文字样式。
基础示例:多个段落
复制代码保存为 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>代码解释:
<h2>是小标题;下面三段文字分别放在 3 个独立的<p></p>里面。- 三个段落,浏览器渲染后,每两段中间会自动空一行,不需要我们手动敲空格或者换行标签制造空隙。
- 如果浏览器窗口拉窄,每一段内部文字会自动换行。
✔记住:写新的一段文字,就新建一对
<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>解释运行效果:
- 第一部分,全部在同一个
<p>里面,<br>只做换行,四句诗紧紧挨在一起,中间没有大空隙。 - 第二部分,每一句诗一个独立
<p>,四句诗每两行中间会空一大段距离。
使用原则: ✅段落之间分隔,优先用
<p>✅同一段落内部需要强制换行,才用<br>❌不要大量滥用<br>去制造空白间距,后期用 CSS 控制间距。
HTML 源码中的回车、空格不起作用!
非常重要知识点:在 HTML 代码里面,不管你敲多少回车换行、多少个空格,网页浏览器只会显示 1 个空格。
示例:
<p>我 爱 HTML前端学习</p>代码里面敲了很多空格,网页页面只会看到:我 爱 HTML前端学习,只有 1 个空格。
如果想要网页上显示多个连续空格,使用 空格实体字符,一个 代表 1 个空格。
<p>我 爱HTML前端学习</p>实际开发几乎很少用
,间距交给 CSS 处理,了解即可。
p 段落标签可以使用全局属性
<p>属于普通 HTML 元素,可以写全局属性:title、class、id,属性写在开始标签内。
示例 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>多个属性写在开始标签,属性之间用空格隔开。
段落里面可以嵌套什么内容?
- ✅可以嵌套文字
<p>普通文字内容</p>- ✅可以嵌套行内标签:
<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>本篇知识点总结
<p>段落标签,专门用来存放网页正文文本,双标签,成对使用。- 每一个新段落就新建一组
<p></p>;段落之间浏览器自动产生空白间距。 <br>是强制换行单标签;只用于同一段内部换行,不会产生段落空隙。- HTML 源码中的回车、多个空格网页只会解析成 1 个空格;连续空格用
。 - p 支持全局属性
title、class、id,属性写在开始标签。 - p 内部可以放文字、链接、加粗等行内内容;p 里面不能嵌套 p、h 标题这类块级标签。
- 页面可见内容全部写在
<body>里面。
小练习:写一篇自我介绍页面,h1 写名字,h2 写爱好,用多个
<p>写几段自我介绍文字,其中一段内部用<br>换行。
下节预告
下一篇教程:HTML 文本格式化。