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