p是英文paragraph段落的缩写。 网页里所有普通正文文字都应该放在p段落元素里面。 标题h1~h6用来做标题p用来写正文内容。基础语法p是双标签元素p这里写段落的文字内容/pp开始标签这里写段落的文字内容段落的文本内容/p结束标签段落标签一定要写在body标签内部写在 head 里面页面看不到内容。浏览器默认自带效果一个p代表一个完整段落段落和段落之间会自动产生一段空白距离。文字会自动换行浏览器窗口变窄文字会自动折到下一行不需要手动写换行。不会加粗就是普通正文文字样式。基础示例多个段落复制代码保存为 html 运行看效果!DOCTYPE html html langzh-CN head meta charsetUTF-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 langzh-CN head meta charsetUTF-8 titlep与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 个空格。如果想要网页上显示多个连续空格使用nbsp;空格实体字符一个nbsp;代表 1 个空格。p我nbsp;nbsp;nbsp;爱HTML前端学习/p实际开发几乎很少用nbsp;间距交给 CSS 处理了解即可。p 段落标签可以使用全局属性p属于普通 HTML 元素可以写全局属性title、class、id属性写在开始标签内。示例 1title 属性鼠标悬浮提示p title这是一段关于小狗的介绍文字小狗性格活泼喜欢跑来跑去。/p解释鼠标移动到这段文字上方会弹出 title 里面写的提示文字。示例 2class 属性给 CSS 使用p classnote温馨提示小动物需要细心照顾。/pclass 给段落打上标记现在看不出效果后面 CSS 可以统一修改这一类段落的颜色、字体大小。示例 3id 属性页面锚点id 整个页面唯一p iddesc这里是页面描述文字/p完整带多个属性示例p classtext-info title宠物说明 idpet‑info小狗很喜欢和主人玩耍。/p多个属性写在开始标签属性之间用空格隔开。段落里面可以嵌套什么内容✅可以嵌套文字p普通文字内容/p✅可以嵌套行内标签a链接、b加粗、br换行p想要了解更多可以点击 a hrefhttps://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 brbrbr p第二句话/p❌不要用很多br来空行段落之间的间距交给 CSS 控制。错误 3忘记写结束标签/pp这是一段正文文字 h2下一个标题/h2忘记闭合/p虽然浏览器会自动补全但是属于不规范写法一定要成对写。错误 4把段落写在 head 标签中head p测试文字/p /headhead 里面放网页配置页面显示内容全部写在 body。错误 5p 里面嵌套 p、h 标题p h3小标题/h3 正文文字 /p❌p 里面不要放 h 标题标签标题要写在 p 外面。完整综合示例标题 段落 链接复制代码直接运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的家乡/title /head body h1我的家乡介绍/h1 h2家乡风景/h2 p我的家乡在海边这里空气清新大海一望无际。/p p每到傍晚海边的日落特别漂亮很多人来海边散步。/p h2家乡美食/h2 p海边城市海鲜种类丰富鱼虾贝类都很新鲜。br 很多游客专门过来品尝本地特色海鲜。 /p p classtip title拓展阅读想了解更多旅游信息可以访问 a hrefhttps://www.baidu.com target_blank百度/a查询。 /p /body /html本篇知识点总结p段落标签专门用来存放网页正文文本双标签成对使用。每一个新段落就新建一组p/p段落之间浏览器自动产生空白间距。br是强制换行单标签只用于同一段内部换行不会产生段落空隙。HTML 源码中的回车、多个空格网页只会解析成 1 个空格连续空格用nbsp;。p 支持全局属性title、class、id属性写在开始标签。p 内部可以放文字、链接、加粗等行内内容p 里面不能嵌套 p、h 标题这类块级标签。页面可见内容全部写在body里面。小练习写一篇自我介绍页面h1 写名字h2 写爱好用多个p写几段自我介绍文字其中一段内部用br换行。下节预告下一篇教程HTML 文本格式化。