<hr /> 是 HTML5 中的空元素，无需闭合，因其无内容且浏览器忽略后续闭合标签；语义表示主题分隔，非纯装饰，CSS 控制需先清 border 再设新样式。
html 里加水平线，直接用 <hr> 标签就行，不需要闭合，也不用写 <hr />（xhtml 风格在现代 html5 中不必要）。
为什么 <hr> 不需要闭合
HTML5 规范里 <hr> 是“空元素”（void element），和 <img>、<br> 一样，天生没有内容，也不能有子节点。浏览器遇到 <hr> 就直接渲染一条分隔线，后面跟不跟 </hr> 它都忽略——写了反而可能被解析为两个标签（第一个自闭合，第二个被当成无效开始标签）。
- 写成
<hr></hr>：第二个</hr>会被忽略，无害但多余 - 写成
<hr />：在 HTML5 文档中合法，但没必要，且容易和 XML/XHTML 习惯混淆 - 写成
<hr>内容</hr>：内容不会显示，</hr>被当作错误标签处理
<hr> 的默认样式和兼容性
所有现代浏览器对 <hr> 都有默认样式：浅灰色、带阴影的水平线，上下带 margin。但它不是“装饰性线条”，语义上表示“主题或段落的分隔”，所以搜索引擎和读屏软件会感知其结构作用。
- CSS 重置常见：很多 CSS reset 或框架（如 Normalize.css）会把
hr的border设为none，导致线消失——检查开发者工具里border-top是否被覆盖 - 旧版 IE（≤8）对
hr的 margin 处理不一致，但如今基本可忽略 - 别用
<hr>替代视觉分割线：如果只是 UI 上要一条细线（比如卡片底部），用div+border-bottom更可控、语义更准
怎么用 CSS 控制 <hr> 的外观
直接给 hr 写 CSS 即可，重点改 border、margin 和 width。注意它默认是块级元素，宽度 100%，高度由 border 决定（不是 height）。
hr {
border: 0;
border-top: 2px dashed #999;
margin: 1rem 0;
width: 80%;
}
-
border: 0必须先清掉默认边框，否则新样式会叠加 - 想改成虚线/双线/渐变？只改
border-top-style和border-top-color就行 -
height对hr无效（除非设了border且用border-image等高级技巧） - Flex 或 Grid 容器里，
hr可能被拉伸或压缩，加align-self: center或width: fit-content更稳
真正容易被忽略的是语义和样式耦合：删掉默认 border 后没补新样式，线就没了；或者在语义不该分隔的地方硬塞 <hr>，结果结构混乱。用之前先问一句：这里真的需要一个“主题切换”的信号，还是只是画条线？
立即学习“前端免费学习笔记（深入）”；
