<br> 无语义且不可控，仅适用于同段内强制换行；<p> 是语义化段落容器，自带结构、可访问性、SEO优势及CSS精准控制能力。
直接用 <p> 包裹语义段落，配合 margin-block、line-height 和 text-indent 控制呼吸感与缩进，比手动敲 <br> 或塞空格靠谱得多。
为什么不能用 <br> 代替 <p> 分段
浏览器把整块没分段的内容当一个逻辑单元处理，屏幕阅读器无法跳段、SEO 抓不到重点、响应式下文字还容易挤成一团。更麻烦的是：<br> 只是换行符，不带任何语义，也不能被 CSS 统一控制间距。
- 同一段内强制换行（如地址、诗行）才用
<br> - 每个自然语义单元——比如“问题描述”“解决步骤”——必须独立套一层
<p> - 嵌套
<div>进<p>是非法 HTML，部分浏览器会自动闭合<p>导致结构错乱
margin-block 比 margin-top/margin-bottom 更稳
旧写法依赖两个属性，容易漏设或冲突；margin-block 一次性控制上下间距，且继承自父级字体大小，适配不同字号更自然。
- 推荐写法：
margin-block: 1.2em;（等效于margin-top: 1.2em; margin-bottom: 1.2em;） - 避免只设
margin-bottom：首段顶边会贴死容器上边缘 - 禁用
padding替代段距：那是“段内墙距”，不是“段间路距”
超长无空格文本（如 base64、路径、JSON 片段）怎么不撑破容器
默认 <p> 对连续无空格字符串不折行，直接横向溢出。不能全局加 word-break: break-all——中文会被切成单字，英文单词也被硬拆。
立即学习“前端免费学习笔记（深入）”；
- 对含该类内容的
<p>或其子容器，加overflow-wrap: break-word; - 若需保留原始换行（如日志、API 返回的 \n 字符串），必须用
white-space: pre-wrap; - 纯中文段落可加
word-break: keep-all;防止断在字中间；英文/URL 则靠overflow-wrap: break-word;主动断词
lang 属性漏写会让中英文混排折行失效
仅在 <html lang="zh"> 设根语言远远不够。浏览器和屏幕阅读器按每个文本节点的 lang 值决定断行策略、字体回退、标点悬挂——比如 RFC 编号、英文术语、阿拉伯语短句。
- 示例：
<p>参见 <span lang="en">RFC9110</span></p> - 表格单元格里尤其容易踩坑：Bootstrap 等框架常给
<td>设white-space: nowrap，得单独重置为normal或pre-wrap -
text-overflow: ellipsis和pre-wrap不兼容，写了也无效，别白费劲
最常被忽略的是语义层级断裂：比如 <section> 里没 <h2>，或者标题跳级（<h1> 后直接 <h3>），AT 用户根本找不到上下文，Lighthouse 也会直接扣分。
