用于语义化主题切换，表示前后内容属不同话题、场景或逻辑单元；应直接使用无属性的，通过CSS控制样式，禁用装饰性用途。

用

---

表示主题切换，不是画线，而是告诉浏览器和屏幕阅读器：“这里内容性质变了”。它不负责美观，而负责结构清晰——这是语义化的核心。

什么时候该用

---

？看内容是否发生主题转换

只有当前后段落属于不同话题、场景、角色或逻辑单元时才适用。例如：

• 产品介绍段落结束后，突然转入用户评价部分
• 技术文档中，“安装步骤”小节与“配置说明”小节之间
• 小说里，上一段写白天集市，下一段切到深夜密室对话
• 表单中，“联系信息”字段组与“收货地址”字段组之间（若二者语义上独立）

怎么写才符合语义规范？

直接插入

---

即可，无需属性，不加文字，不套容器：

这是关于数据库设计的原则。

---

接下来讨论缓存策略的选型。

避免这些写法：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• ---

  （HTML5 已废弃这些属性）

• ---

  （alt 对

  ---

  无效）

• ---

  （多一层无意义包裹）

样式要改，但不能破坏语义

默认样式难看？用 CSS 重置，别删标签：

hr {
  margin: 1.2em 0;
  border: none;
  height: 1px;
  background-color: #d0d0d0;
}

关键点：

• 保留

  ---

  标签本身，只通过 CSS 控制外观
• 高 DPR 屏幕发虚？补一句 transform: scaleY(0.5); 或用媒体查询适配
• 若需中间带文字（如“或者”），不要塞进

  ---

  ，改用
  或者
  —— 这时已不是语义分隔，应换元素

什么情况不该用

---

？

纯装饰性线条不属于语义分隔：

• 卡片底部的细线
• 导航栏菜单项之间的竖线
• 按钮组之间的浅色横线
• 同一主题下的两个普通段落之间（应靠 margin 控制间距）

这些用 div + border 或伪元素更合适，不干扰文档结构。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！