用于语义化段落，每段表达完整意思；仅限同一语义块内强制换行（如地址、诗歌）；滥用破坏结构与可访问性，重置css后需设p { margin: 1em 0; }恢复呼吸感。
HTML 文字排版不是靠堆标签，而是靠理解每个标签的语义边界和浏览器默认行为——p 不是“换行键”，br 不是“分段工具”，section 也不是“多套一层 div”。
什么时候该用 p，而不是连续写多个 br
连续用 br 模拟段落，会导致结构扁平、屏幕阅读器无法识别逻辑断点、CSS 难以统一控制间距。真正该用 p 的场景是：每段表达一个完整意思（比如一句说明、一个步骤、一个观点）。br 只适合同一语义块内的强制分行，例如地址、诗歌、签名档。
- ✅ 正确：
<p>北京市朝阳区建国路1号</p>（单一段落） - ✅ 正确：
<p>床前明月光，<br>疑是地上霜。</p>（古诗，语义未断） - ❌ 错误：
<p>第一段</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <br><br><p>第二段</p>（br在块级元素间无效，且破坏语义）
p 的默认 margin 被重置后怎么救回来
全局重置 CSS（如 * { margin: 0; padding: 0; }）会干掉 p 的天然呼吸感，导致所有段落贴在一起。不加 margin 不是“干净”，是“窒息”。
- 最简修复：
p { margin: 1em 0; }——1em会随字体大小缩放，比固定像素更健壮 - 移动端需注意：
@media (max-width: 768px) { p { margin: 0.8em 0; } }，避免小屏下段距过大撑开视口 - 别只设
margin-bottom：上下都留空才能让段落“悬浮”在视觉流中，单侧留白易造成节奏断裂
首行缩进该用 text-indent 还是空格
用中文全角空格或 填充首行，是早期 hack，现在纯属反模式：不可选、不可复制、缩进值难统一、响应式下易错位。
- 正确做法：
p { text-indent: 2em; }，单位必须是em或rem，确保与字体联动 - 例外情况：如果整篇用左对齐+无缩进（如新闻稿、UI 文案），就别硬加
text-indent，强行缩进反而干扰扫读 - 注意兼容性：
text-indent在所有现代浏览器中行为一致，但若父容器用了direction: rtl，缩进方向会反转，需测试
长文本里怎么避免“一堵墙”效应
大段文字没结构，用户一眼扫过去就放弃。光靠 p 不够，得配合层级和视觉锚点。
- 每 3–5 个
p包进一个<section></section>，并配一个h2或h3，既强化语义，也给 CSS 提供隔离上下文 - 超长无空格字符串（如 base64、长 URL）必须加
word-break: break-word;或overflow-wrap: break-word;，否则直接撑破容器 - 别忽略
line-height: 1.6;：16px 字体配 25.6px 行高，是多数人眼追踪最舒服的节奏，比调margin更影响可读性
最难的部分从来不是记住哪个标签怎么写，而是判断：这句话值不值得独占一个 p？这个换行是语义切分，还是视觉停顿？这段文字，机器能不能听懂它为什么在这儿？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
