结论：网页排版应基于语义化标签而非视觉堆砌，用于逻辑段落（自带间距），仅限段内强制换行（如地址、诗歌）；滥用或错用标题层级会破坏语义、可访问性与seo。

直接说结论：排版不是靠 <font></font> 或一堆 <br> 堆出来的，而是用语义清晰、浏览器默认样式合理、CSS 可控性强的标签组合——<p></p>、<h1></h1>–<h6></h6>、<strong></strong>、<em></em>、<hr>、<br> 这几个就够绝大多数场景。

什么时候该用 <p></p> 而不是连续 <br>

常见错误是把整段文字硬塞进一个 <p></p> 里，再靠多个 <br> 换行；或者反过来，为每“一行”都套一个 <p></p>。这两种都破坏语义。

正确做法是：

• <p></p> 表示一个逻辑完整的段落（比如一句话、几句话组成的观点单元），浏览器会自动加上下 margin，视觉上自然分隔
• <br> 只用于段落内部强制换行，比如诗歌、地址、歌词——它不产生新段落，也不带间距
• 连续多个 <br> 是典型信号：你其实该拆成多个 <p></p>，或改用 <div> + CSS 控制 <p>示例对比：</p> <pre class="brush:php;toolbar:false;">&lt;p&gt;第一段内容。&lt;/p&gt; &lt;p&gt;第二段内容。&lt;/p&gt; &lt;p&gt;第三段内容。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg&quot; alt=&quot;html-ppt-to-pdf&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;overflowclass&quot;&gt;html-ppt-to-pdf&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;将使用 `&lt;section class=&quot;slide&quot;&gt;` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill3458&quot; title=&quot;html-ppt-to-pdf&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>✅ 语义正确，间距可控；而下面这种写法：</p> <pre class="brush:php;toolbar:false;">&lt;p&gt;第一段内容。&lt;br&gt;&lt;br&gt;第二段内容。&lt;br&gt;&lt;br&gt;第三段内容。&lt;/p&gt;</pre> <p>❌ 语义混乱，margin 失效，后期想调间距或加背景色会出问题。</p> <h3> <code><strong></strong> 和 <b></b> 到底怎么选

  它们都让文字变粗，但浏览器渲染效果一样 ≠ 语义一样。搜索引擎、读屏软件、代码审查工具都会区分。

  关键判断点：

  • 想表达「重要性/强调」（比如警告、关键参数、法律条款重点）→ 用 <strong></strong>
  • 纯视觉加粗，无额外含义（比如产品名、品牌词、已约定俗成的缩写）→ 可用 <b></b>，但更推荐用 CSS 的 font-weight
  • <b></b> 在 HTML5 中已被降级为“无语义的粗体”，W3C 明确建议优先用 <strong></strong>

  别写：<b>注意：此操作不可逆</b>；改成：<strong>注意：此操作不可逆</strong> —— 读屏软件会加重语气朗读，SEO 也会识别这个强调权重。

  <hr> 不是装饰线，是语义分隔符

  很多人把 <hr> 当作画横线的工具，随手插在两段文字中间，甚至用 CSS 改成虚线、渐变、带 icon 的 fancy 分割线。这容易踩两个坑：

  • 滥用会稀释语义：只有当内容主题明显切换（比如从「使用说明」跳到「注意事项」）时，才该用 <hr>
  • 可访问性风险：屏幕阅读器会播报 “horizontal rule”，如果只是视觉分隔，应改用 <div> + border 或 margin <li>现代项目中，<code><hr> 的默认样式（浅灰、细线）常被重置，若没同步更新语义理解，团队协作时容易误判结构

  替代方案更安全：

  • 单纯视觉分隔 → <div class="divider"></div> + CSS
  • 章节切换 → 用 <section></section> 包裹，配合 heading（<h2></h2> 等）天然形成语义边界

  标题层级错乱为什么比样式难看更致命

  <h1></h1>–<h6></h6> 不是字号调节器。跳着用（比如 <h2></h2> 后直接 <h4></h4>）、嵌套反逻辑（<h3></h3> 在 <h2></h2> 外）、一个页面多个 <h1></h1>，都会导致：

  • SEO 权重分散：搜索引擎以 <h1></h1> 为页面核心主题，多个 <h1></h1> 会让算法困惑
  • 无障碍失效：读屏软件靠 heading 层级生成导航树，错乱后用户无法快速跳转
  • CSS 维护困难：用 h2 + h3 写样式时，层级断裂会让选择器失效或意外命中

  实操建议：

  • 每个页面只设一个 <h1></h1>（通常是主标题或 Logo 文字）
  • 子内容严格按逻辑递进：<h2></h2> → <h3></h3> → <h4></h4>，不跳不回
  • 用浏览器开发者工具的「Accessibility」面板实时检查 heading 结构是否连贯

  最易被忽略的一点：CMS 或富文本编辑器导出的 HTML 常偷偷插入 <h2></h2>，而你写的正文里又用了 <h2></h2>，结果页面出现三个 <h2></h2> 并列——这种隐性结构污染，比样式 bug 更难定位。