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