原来是yy啊我刚开始写网页那阵子，最常被前辈挑剔的不是"功能不对"，而是"你这一页字全挤在一起，看着就难受"。当时我还没意识到，问题根本不是 CSS 写得少，而是最基础的文本结构标签压根没用对。段落用 <p>，换行用 <br>，分隔用 <hr>，这三个标签看起来简单到不值一提，但恰恰是它们决定了用户打开页面之后，正文内容在屏幕上如何组织、如何被阅读。这篇东西就围绕这三个标签展开，我会把各自的语义、默认样式、典型用法、容易踩的坑以及组合实战一次讲透。适合刚接触 HTML 的同学，也适合写过一段时间但总觉得排版不舒服、又说不清原因的人。
1. 从"排版不舒服"说起：为什么网页正文需要专门的标签
很多人第一次写 HTML 时都干过这样的事：在代码里敲了一堆空格和回车，信心满满地打开浏览器，结果发现页面上根本不像自己排的那样——多个空格变成了一个，换行也完全消失。这不是浏览器抽风，而是 HTML 处理空白的规则天生如此。
1.1 浏览器对空白符的处理机制
在 HTML 源码里，连续输入的多个空格、Tab、换行，在最终渲染时绝大多数情况下都会被折叠成一个空格。我举个非常直观的例子：
html复制<p>我 喜欢
在学习 HTML 时 泡一杯茶</p>
浏览器实际显示出来的是：我 喜欢 在学习 HTML 时 泡一杯茶。中间那些精心留出来的空格和换行，全部被吞掉了。
这个机制背后是有历史原因的。HTML 设计的初衷是给内容做"标记"，而不是像 Word 那样做"精确排版控制"。渲染引擎拿到一份 HTML 后，关心的是标签结构，不是源码里你用空格把文字顶到了哪一列。与其说这是缺陷，不如说是特性：正因为空白符会被统一折叠，一份内容里混了多少个空格都不影响阅读，文档才有跨平台的一致性。
有例外吗？有。<pre> 标签会保留原始空白，CSS 里的 white-space: pre 也能做到类似效果。但绝大多数正文场景，你依赖的应该是标签本身，而不是靠敲空格和回车来排位置。
1.2 语义标签与纯视觉控制的差异
明白了空白会被折叠，自然就理解为什么需要一个专门的标签来表达"这是一段"。
你可以用 <div> 加一堆 CSS 人为地制造出段落的样子，我也见过不少项目里全是 <div> 和 <br> 堆出来的"伪段落"。它们在视觉上也许差不多，但本质差很多：搜索引擎在理解页面结构时，会倾向于把 <p> 里的内容当成一个有意义的文本块；屏幕阅读器遇到 <p> 会明确告诉视障用户"接下来是一段"；而一坨 <div> 加手动间距，在语义上就是一堆意义不明的盒子。
用个生活化的比喻：<p> 等于书里的章节段落，<div> 等于搬货用的纸箱。纸箱能装东西，但你不能靠一堆纸箱拼出一本书的目录结构。基础标签不"基础"，它们才是页面结构的骨架。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. p 标签：段落到底是怎样"立"起来的
<p> 是 HTML 里最常用的文本结构标签，全称 paragraph，段落。没有它，一篇文章在浏览器里就是一团混沌，有了它，内容才能被分成一块块有呼吸感的文本。
2.1 基本写法与默认样式
<p> 是一个成对出现的标签，开始和结束都不能少：
html复制<p>这是第一段内容。</p>
<p>这是第二段内容。</p>
<p> 是块级元素，默认占满一整行，不会跟其他行内元素挤在一起。最值得关注的是它的默认间距：绝大多数浏览器会给 p 加上大约 1em 的上下外边距。在默认字号 16px 的情况下，两个相邻 p 之间看起来会有大约 16px 的间隔。
这个默认间距不是随便定的，它正是段落"段落感"的主要来源。你不需要写任何 CSS，连续几个 p 就能自动形成一种"一段一段隔开"的阅读节奏。
html复制<p>前端入门最容易被忽视的，其实是内容结构。</p>
<p>很多同学能背出各种标签的名字，却不知道什么时候该用哪一个。</p