<hr /> 是 HTML5 中表示主题分隔的语义化空标签，仅写为 <hr /> 即可；align、size、color 等属性已废弃，须用 CSS 控制样式，且其语义强调内容段落间的主题转换而非单纯视觉分隔。
直接用 <hr> 标签，别加结束标签，也别写成 <hr />（XHTML 风格在现代 HTML5 中非必须）——这是最简、最语义、最兼容的做法。
为什么不能用 align、size、color 这些属性
这些是 HTML4 时代的内联属性，align 控制左右居中、size 控制粗细、color 改颜色，但在 HTML5 中全部被废弃。浏览器可能仍能解析，但 W3C 不再支持，校验会报错，且不同浏览器渲染不一致。比如 <hr size="3" color="red"> 在 Chrome 可能有效，在 Safari 可能完全忽略。
真正该做的只有两件事：
- 删掉所有旧属性，只留
<hr> - 用 CSS 控制外观：改高度用
height，改颜色用background-color或border-top，改宽度和居中用width+margin: auto
border-top 和 background 两种写法的区别
默认 <hr> 渲染依赖浏览器内置样式（通常是 border-bottom: 1px solid #ccc），所以直接覆盖 border-top 更可靠，尤其在重置样式后不会意外消失。
立即学习“前端免费学习笔记（深入）”；
常见组合对比：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 要一条细实线：
hr { height: 0; border-top: 1px solid #666; margin: 16px 0; } - 要一条带背景色的块状线：
hr { height: 2px; background: #007bff; border: none; margin: 24px 0; } - 虚线必须用
border-top：hr { height: 0; border-top: 1px dashed #999; }（background无法实现虚线）
注意：height: 0 配合 border-top 是为了防止边框叠加在默认高度上造成双线；而用 background 时必须设 border: none，否则边框和背景会同时出现。
响应式场景下怎么避免水平线撑宽容器
在移动端或 flex/grid 容器里，<hr> 默认是块级元素、100% 宽，容易顶到父容器边缘，尤其当父容器有 padding 或设置了 max-width 时，看起来像“溢出”。
安全做法是显式约束宽度：
- 居中且限宽：
hr { width: 80%; max-width: 600px; margin: 20px auto; } - 适配卡片类布局：
hr { width: calc(100% - 2rem); margin: 16px auto; }（减去左右 padding） - 绝对不要只写
width: 100%，除非你确认父容器没有 padding 或 overflow 隐藏
另外，如果只是需要段落间视觉呼吸感，优先考虑 margin-bottom，而不是硬插 <hr> —— 多数时候，分隔需求其实只是间距问题。
真正容易被忽略的点是语义：不是所有横线都该用 <hr>。它代表“主题转换”，比如文章小节切换、表单字段组分隔。如果只是装饰性线条（如标题下方短横线），用 <div style="border-bottom: 1px solid #eee"></div> 更合适——不误导辅助技术，也不污染文档结构。
