<p>标签需显式包裹逻辑段落，因HTML压缩空白符致回车无效；<br>仅用于同一语义块内换行，如地址；语义强调用<strong>，纯样式加粗用<b>；重置CSS后应设p { margin: 1em 0; }恢复可读间距。
直接用 <p> 就能分段，但光靠它排不好版；真正影响可读性的，是语义选择、换行控制和默认样式干扰。
为什么 <p> 不能靠回车或空格分段
HTML 解析器会把连续空白符（包括换行、制表、多个空格）压缩成单个空格。你在编辑器里敲十次回车，浏览器照样显示为一行。
- 错误写法：
<p>第一段</p><p>第二段</p>写在同一行也没问题，但手敲回车不生效 - 正确做法：必须显式用
<p>包裹每一段逻辑完整的文本 - 注意：不要用多个
<br>模拟段落——它只是强制换行，不产生语义分隔，也不带默认间距
<br> 和 <p> 的使用边界在哪
<br> 是行内换行，<p> 是块级分段。混用会导致结构混乱、CSS 难控制、屏幕阅读器误读。
- 适合
<br>：地址、诗歌、签名档等「同一语义块内需分行」的场景，例如北京市<br>朝阳区<br>建国路1号 - 适合
<p>：每段表达独立观点、事实或步骤，如说明文档、新闻正文、用户协议条款 - 危险信号：如果用了 3 个以上
<br>，大概率该拆成<p>或用列表
<strong> 和 <b> 到底该选哪个
视觉效果一样，但语义不同。<strong> 告诉浏览器“这段内容重要”，会被屏幕阅读器加重语气；<b> 只是“想加粗”，无额外含义。
立即学习“前端免费学习笔记（深入）”；
- 用
<strong>：错误提示、必填项说明、安全警告（如<strong>密码必须包含特殊字符</strong>） - 用
<b>：仅需视觉强调且无语义权重，比如商品名在广告文案中（但更推荐用 CSS class） - 兼容性无差别，但 SEO 和无障碍支持只认
<strong>的语义
段落间距被 CSS 覆盖后怎么恢复自然呼吸感
重置样式（如 * { margin: 0; padding: 0; }）会干掉 <p> 默认的上下 margin，导致段落贴在一起，阅读吃力。
- 最简修复：
p { margin: 1em 0; }—— 1em 约等于当前字体大小，符合排版惯例 - 进阶控制：用
line-height: 1.6;提升段内行距，margin-bottom: 1.5em;加大段间空隙 - 易忽略点：移动端小屏下，过大的
margin会撑开页面，建议配合@media (max-width: 768px)缩小到1em
真正难的不是记住标签怎么写，而是判断哪段文字该独立成块、哪处换行只是视觉需要、哪个强调该被机器听见——这些决定，比语法本身更影响最终体验。
