是专门插入水平分割线的自闭合标签，语义为章节分隔，须单独成行、不可包裹内容，样式可通过style属性调整，滥用会破坏结构语义。
分割线用 <hr>，不是用 <br> 或空格
很多人刚学时会误以为换行或打很多空格就能“分隔”内容，结果页面要么没效果，要么排版错乱。<hr> 是专门用来插入水平分割线的自闭合标签，浏览器原生支持，语义清晰，样式可控。它和换行 <br>、段落 <p></p> 完全不是一回事。
实操建议：
-
<hr>必须单独成行，不能包裹文字（比如<hr>这里是分割线是无效写法） - 默认样式是浅灰色细线，带一点阴影；如果想改粗细、颜色或去掉阴影，要用 CSS（后面会提）
- 别在
<p></p>里面塞<hr>—— 段落里只该放文本、强调标签（如<strong></strong>）等内联元素，<hr>是块级元素，应放在两个<p></p>之间
一个带分割线的段落结构长这样
所谓“带分割线的段落”，实际是“段落 + 分割线 + 段落”的组合。HTML 里没有“带分割线的段落”这个单一标签，得靠多个标签配合实现。下面是最小可用示例：
<p>这是第一段文字。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <hr><p>这是第二段文字。</p>
注意：<hr> 前后不加空行也能正常显示，但加空行能提升代码可读性；浏览器会自动处理渲染间距，不用手动加 <br>。
想换个样子？用 style 属性快速调整 <hr>
默认 <hr> 看起来比较朴素，但零基础也能用 style 属性微调，无需外部 CSS 文件：
- 加粗：写成
<hr style="height: 4px;">（注意单位必须带px） - 变红：加
background-color: red;，完整写法是<hr style="height: 2px; background-color: red;"> - 去阴影（让线条更干净）：加上
border: none;，因为默认样式本质是 border，不是 background
常见错误：只写 color: red; 不生效 —— <hr> 没有 color 这个属性，得用 background-color 或 border-color。
分割线不是装饰画，别滥用
在真实网页中，<hr> 的语义是“主题或章节的分隔”，不是“为了好看随便加一条线”。搜索引擎和读屏软件会识别它的结构意义。如果只是想让两段文字离远点，优先用 CSS 的 margin（比如给 <p></p> 加 style="margin-bottom: 20px;"），而不是堆砌 <hr>。
初学者最容易忽略的一点：删掉所有 <hr> 后网页仍能正常阅读，说明它只是辅助结构——先保证内容通顺，再考虑是否需要视觉分隔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
