语义化标签排版更可靠易维护：用于逻辑段落，仅限纯视觉换行；标题层级须严格递进，唯一且逐级下分；表示主题变更，非装饰线。
直接用语义化标签做排版，比写内联样式更可靠、更易维护。HTML 本身不是排版工具，但 <p></p>、<h1></h1>～<h6></h6>、<br>、<hr> 这些标签天然带结构和默认间距，能快速搭出清晰可读的文本骨架。
什么时候该用 <p></p> 而不是 <br>
用 <p></p> 划分逻辑段落（比如新闻稿的一段、产品介绍的一块），浏览器会自动加前后边距；用 <br> 只是强制换行，不产生语义，也不带间距——比如地址里“上海市
浦东新区
张江路123号”，这种纯视觉换行才适合 <br>。
常见错误：把所有换行都堆 <br>，结果段落之间没空隙、打印时错位、屏幕阅读器无法识别段落边界。
- ✅ 正确：
<p>第一段内容</p> <p>第二段内容</p> - ❌ 错误：
<p>第一段内容<br>第二段内容</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>
<h1></h1> 到 <h6></h6> 的层级不能跳着用
标题不是“字号越大越醒目”就行。<h1></h1> 应全页唯一，代表页面主主题；<h2></h2> 是它的子模块；<h3></h3> 再往下一层……跳级（比如 <h2></h2> 后直接 <h5></h5>）会破坏文档大纲，影响 SEO 和辅助技术解析。
实际开发中容易忽略的是：CSS 改了字号/颜色，不代表语义就变了。即使 <h3></h3> 看起来比 <h2></h2> 大，只要标签没改，结构仍是错的。
- ✅ 推荐结构：
<h1>产品首页</h1> <h2>核心功能</h2> <h3>实时同步</h3> - ❌ 避免：
<h1>产品首页</h1> <h3>核心功能</h3>（缺<h2></h2>）
<hr> 不是装饰线，是内容分隔符
<hr> 的语义是“主题变更”，比如从正文切换到作者信息、从条款列表切换到联系方式。它不该被 CSS 改成虚线、渐变或图标——那已超出其本意，应该用 <div> + CSS 边框替代。
<p>兼容性上，<code><hr> 在所有浏览器中都稳定支持，且自带 margin，比手写 <div style="border-top:1px solid #ccc"></div> 更轻量、更语义明确。
- ✅ 合理使用：
<p>这是最后一段正文</p> <hr> <p>© 2026 公司版权所有</p> - ❌ 滥用：
<hr>放在两个<h3></h3>之间却无实质内容切换
真正难的不是记住标签怎么写，而是判断哪段文字该有段落语义、哪处该用标题层级、哪里需要明确的内容断点——这些决定一旦写进 HTML，后期靠 CSS 很难补救。
