应使用<p>包裹逻辑完整段落，<br>仅用于同一语义块内强制换行；<strong>表重要性（含SEO/无障碍语义），<b>仅表视觉加粗；段落间距需显式设置margin恢复可读性。
直接用 <p> 分段、<strong> 强调、<br> 段内换行，就能解决 90% 的基础排版需求；但错用 <b> 替代 <strong>、滥用 <br> 代替段落、忽略 lang 属性，会让页面在 SEO、无障碍和维护性上埋坑。
什么时候该用 <p>，而不是反复敲 <br>
浏览器会把连续空格、换行符全部压缩成一个空格，所以编辑器里回车几十次，网页照样显示为一行。想靠空行分段？没用。必须显式用 <p> 包裹每一段逻辑完整的文本——比如一句说明、一个步骤、一条条款。
<br> 只适合同一语义块内的强制换行，例如：
- 古诗分行（整首仍是一个段落）
- 地址（北京市朝阳区建国路1号
邮编：100022） - 签名档或短标语的多行对齐
混用风险高：三个以上 <br> 基本意味着该拆成多个 <p> 或改用列表。
立即学习“前端免费学习笔记（深入）”；
<strong> 和 <b> 不是同一件事
视觉效果一样，但语义完全不同。<strong> 告诉浏览器“这段内容重要”，屏幕阅读器会加重语气，搜索引擎也认这个权重；<b> 只是“我想加粗”，没有额外含义。
- 用
<strong>：错误提示（<strong>密码不能为空</strong>）、必填项标识、安全警告 - 用
<b>：纯视觉需要且无语义场景，比如商品名出现在广告文案中（但更推荐用 CSS class 控制）
重置样式后如果 <strong> 看不出加粗，不是标签错了，而是 CSS 把 font-weight 覆盖了——检查是否全局设了 strong { font-weight: normal; }。
段落间距消失后怎么快速恢复可读性
很多 reset.css 或自定义样式会清掉 <p> 默认的 margin，结果所有段落贴在一起，阅读吃力。
最简修复就是补一句：
p { margin: 1em 0; }
注意两点：
-
1em是相对单位，等于当前字体大小，比写死16px更健壮 - 移动端小屏下，过大的
margin会撑开页面，建议配合媒体查询缩小：@media (max-width: 768px) { p { margin: 1em 0; } }
别只加 margin-top——上下都设，否则首段顶头、末段贴底，节奏感全乱。
<hr> 和 <blockquote> 的真实使用边界
<hr> 不是装饰线，它代表主题切换或内容分隔，比如章节之间、表单前后、评论区与正文之间。不要用它当“分割线素材”塞满页面——语义越稀释，机器越难理解结构。
<blockquote> 是长引用，必须有来源依据。如果只是想缩进几行文字，别硬套它；如果是转述别人观点但没引原文，用 <p> + CSS 更合适。
容易被忽略的一点：<blockquote> 内部可以嵌套 <p>，但不能反过来。它的语义层级高于段落，不是“加个边框的 <p>”。
