标签插入水平分割线

本文深入解析了HTML中`

---

`标签的正确用法与常见误区，强调它并非简单的视觉横线，而是具有明确语义的“段落级主题分隔符”，用于标识内容逻辑上的转换（如章节切换、对话轮转或正文与署名的分界）；文章指出HTML5中`

---

`是自闭合块级元素，应严格写作`

---

`而非`

---

`或`

---

`，并提醒废弃的HTML属性（如color、size）必须由CSS替代——推荐使用`border`相关样式实现灵活可控的视觉效果；同时警示滥用`

---

`（如按钮间分隔、卡片下划线）会破坏语义结构、干扰无障碍访问，真正需要它的场景其实有限，多数装饰性分隔应优先选用CSS边框或伪元素方案，兼顾性能、可维护性与语义准确性。

用

---

插入水平分割线，不是

---

HTML5 中

---

是一个**自闭合的换行级元素**，但语法上不写斜杠更稳妥。浏览器普遍支持

---

，而

---

在某些旧文档类型或严格 XML 解析环境下可能出问题。

常见错误现象：
– 页面里

---

看起来正常，但在 XHTML 模式下报解析错误
– 用 JS 动态插入时，innerHTML = '

---

' 被某些浏览器自动修正为

---

，导致意外嵌套

• 始终用

  ---

  ，不加结束标签，也不加斜杠
• 如果项目强制 XHTML 兼容，改用

  ---

  前需确认 DOCTYPE 和解析器行为
• 它默认是块级元素，前后自带换行，不需要额外


---

的样式控制必须用 CSS，不能靠属性

老教程里写的 color、width、size 等 HTML 属性在 HTML5 中已废弃，浏览器可能忽略或表现不一致。

使用场景：
– 需要细线、虚线、带颜色、带阴影的分隔效果
– 在响应式布局中随容器缩放

• 用 border 控制线型：比如 border: none; border-top: 2px dashed #999;
• 避免只设 height：默认

  ---

  高度由边框和 margin 决定，直接设 height 容易塌陷
• 清除默认 margin：不同浏览器对

  ---

  的上下 margin 不同，建议显式重置 margin: 1rem 0;

语义别乱用：

---

表示主题/内容的**段落级分隔**，不是装饰线

错误现象：
– 在按钮组之间加

---

当视觉分隔
– 在卡片 footer 里塞一条

---

做下划线
这些场景更适合用