结论：网页排版应基于语义化标签而非视觉堆砌，<p>用于逻辑段落（自带间距），<br>仅限段内强制换行（如地址、诗歌）；滥用<br>或错用标题层级会破坏语义、可访问性与SEO。
直接说结论：排版不是靠 <font> 或一堆 <br> 堆出来的，而是用语义清晰、浏览器默认样式合理、CSS 可控性强的标签组合——<p>、<h1>–<h6>、<strong>、<em>、<hr>、<br> 这几个就够绝大多数场景。
什么时候该用 <p> 而不是连续 <br>
常见错误是把整段文字硬塞进一个 <p> 里，再靠多个 <br> 换行；或者反过来，为每“一行”都套一个 <p>。这两种都破坏语义。
正确做法是：
-
<p>表示一个逻辑完整的段落（比如一句话、几句话组成的观点单元），浏览器会自动加上下 margin，视觉上自然分隔 -
<br>只用于段落内部强制换行，比如诗歌、地址、歌词——它不产生新段落，也不带间距 - 连续多个
<br>是典型信号：你其实该拆成多个<p>，或改用<div>+ CSS 控制
示例对比：
立即学习“前端免费学习笔记（深入）”；
<p>第一段内容。</p> <p>第二段内容。</p> <p>第三段内容。</p>
✅ 语义正确，间距可控；而下面这种写法：
<p>第一段内容。<br><br>第二段内容。<br><br>第三段内容。</p>
❌ 语义混乱，margin 失效，后期想调间距或加背景色会出问题。
<strong> 和 <b> 到底怎么选
它们都让文字变粗，但浏览器渲染效果一样 ≠ 语义一样。搜索引擎、读屏软件、代码审查工具都会区分。
关键判断点：
- 想表达「重要性/强调」（比如警告、关键参数、法律条款重点）→ 用
<strong> - 纯视觉加粗，无额外含义（比如产品名、品牌词、已约定俗成的缩写）→ 可用
<b>，但更推荐用 CSS 的font-weight -
<b>在 HTML5 中已被降级为“无语义的粗体”，W3C 明确建议优先用<strong>
别写：<b>注意：此操作不可逆</b>；改成：<strong>注意：此操作不可逆</strong> —— 读屏软件会加重语气朗读，SEO 也会识别这个强调权重。
<hr> 不是装饰线，是语义分隔符
很多人把 <hr> 当作画横线的工具，随手插在两段文字中间，甚至用 CSS 改成虚线、渐变、带 icon 的 fancy 分割线。这容易踩两个坑：
- 滥用会稀释语义：只有当内容主题明显切换（比如从「使用说明」跳到「注意事项」）时，才该用
<hr> - 可访问性风险：屏幕阅读器会播报 “horizontal rule”，如果只是视觉分隔，应改用
<div>+ border 或 margin - 现代项目中，
<hr>的默认样式（浅灰、细线）常被重置，若没同步更新语义理解，团队协作时容易误判结构
替代方案更安全：
- 单纯视觉分隔 →
<div class="divider"></div>+ CSS - 章节切换 → 用
<section>包裹，配合 heading（<h2>等）天然形成语义边界
标题层级错乱为什么比样式难看更致命
<h1>–<h6> 不是字号调节器。跳着用（比如 <h2> 后直接 <h4>）、嵌套反逻辑（<h3> 在 <h2> 外）、一个页面多个 <h1>，都会导致：
- SEO 权重分散：搜索引擎以
<h1>为页面核心主题，多个<h1>会让算法困惑 - 无障碍失效：读屏软件靠 heading 层级生成导航树，错乱后用户无法快速跳转
- CSS 维护困难：用
h2 + h3写样式时，层级断裂会让选择器失效或意外命中
实操建议：
- 每个页面只设一个
<h1>（通常是主标题或 Logo 文字） - 子内容严格按逻辑递进：
<h2>→<h3>→<h4>，不跳不回 - 用浏览器开发者工具的「Accessibility」面板实时检查 heading 结构是否连贯
最易被忽略的一点：CMS 或富文本编辑器导出的 HTML 常偷偷插入 <h2>，而你写的正文里又用了 <h2>，结果页面出现三个 <h2> 并列——这种隐性结构污染，比样式 bug 更难定位。
