HTML中用<hr />标签添加语义化横线，表示内容主题分隔；需用CSS自定义样式，禁用过时属性；无语义需求时优先用CSS边框。
HTML 里怎么加一条横线
用 <hr> 标签，单标签，直接写进去就行，浏览器会渲染成一条水平分割线。
它不是装饰性元素，而是有语义的：表示内容主题的分隔（比如章节切换、话题转折），所以别为了“看起来像分隔线”滥用它——比如在两个按钮之间硬塞一条 <hr>，既不符合语义，还可能被屏幕阅读器误读。
- 不需要闭合，
<hr>就够了；<hr />在 HTML5 里合法但没必要 - 默认样式是浅灰色、1px 高、宽度 100%、上下有 margin，具体表现取决于浏览器默认样式表
- 如果只是视觉分隔且无语义需求（比如卡片底部细线），优先用 CSS 边框：
border-bottom: 1px solid #e0e0e0
如何自定义 <hr> 的样式
不能通过属性控制外观，必须用 CSS。HTML 属性如 color、width、size 是过时的（HTML4 保留，但 HTML5 已废弃），现代写法只靠 CSS。
常见改法：
立即学习“前端免费学习笔记（深入）”；
- 改颜色：
hr { border-color: #666; }（注意不是color） - 改粗细：
hr { height: 2px; border: none; background: #333; }（清掉默认边框，用背景色撑高） - 加阴影或渐变：
hr { background: linear-gradient(90deg, transparent, #999, transparent); height: 1px; border: none; } - 避免意外换行：
hr { margin: 1rem auto; }（默认 margin 可能导致布局错位，显式重置更稳）
<hr> 和 CSS border 选哪个
看有没有语义分隔意图。这是核心判断依据，不是“哪个好看选哪个”。
- 用
<hr>：文档结构确实变了，比如「用户评论」区块和「相关文章」区块之间 - 用
border：纯视觉分隔，比如一个表单里邮箱输入框和密码输入框之间的下划线 - 混用风险：给
<hr>加太多动画或复杂背景，反而干扰语义；反过来，用border替代<hr>做章节分隔，会影响可访问性和 SEO
容易被忽略的兼容性细节
<hr> 本身全浏览器支持，但样式行为有隐性差异。
- Firefox 默认给
<hr>加了box-sizing: content-box，Chrome 是border-box，设height时表现可能不一致，统一加box-sizing: border-box - 旧版 Safari 对
hr的transform支持弱，旋转或缩放慎用 - 如果页面用了 CSS reset（比如 normalize.css），它通常会重置
hr的 margin 和 border，得检查是否覆盖了你的样式
真正麻烦的从来不是画出一条线，而是想清楚这条线代表什么——是结构分界，还是像素装饰。选错，后面修起来比重写还费劲。
