Markdown 分割线

分割线用于在文档中创建视觉分隔，帮助组织内容和提高可读性。Markdown 提供了多种创建分割线的方式。本章将详细介绍分割线的使用方法和应用场景。

基本分割线语法

语法格式

Markdown 支持三种符号创建分割线：

---

***

___

以上三种写法效果相同：

---

---

---

语法规则

符号数量

必须使用三个或更多的符号：

---     ✅ 正确
----    ✅ 正确
-----   ✅ 正确
--      ❌ 错误，至少需要三个

符号混合

可以混合使用 -、*、_：

- * - * - * -

效果：

空格要求

符号之间可以有可选的空格：

---     ✅ 无空格
- - -   ✅ 有空格
-- - -- ✅ 混合空格

不能包含其他字符

分割线只能包含 -、*、_，不能混用：

---=    ❌ 错误
***:    ❌ 错误

分割线样式

标准分割线

---

效果：

---

较粗的分割线

某些编辑器将 *** 显示为较粗的线：

***

效果：

---

混合样式

- - - - - -

效果：

---

分割线的应用场景

1. 章节分隔

## 第一章

这是第一章的内容。

---

## 第二章

这是第二章的内容。

2. 主题切换

## 前言

前言内容...

---

## 正文

正文开始...

---

## 总结

总结部分...

3. 话题分隔

今天我学习了 Markdown。

* Markdown 简介
* 基本语法
* 进阶用法

---

明天计划学习 HTML。

4. 内容分段

### 方法一：使用工具

使用专门的 Markdown 编辑器...

---

### 方法二：在线编辑

使用在线 Markdown 编辑器...

---

### 方法三：VS Code

使用 VS Code + 预览插件...

5. 引用和正文分隔

> "Markdown 让写作变得简单。"

---

正如引言所说，Markdown 的简洁性使其广受欢迎。

6. 代码示例分隔

## Python 示例

```python
print("Hello from Python")

---

JavaScript 示例

console.log("Hello from JavaScript");

### 7. 列表和段落分隔

```markdown
- 项目一
- 项目二
- 项目三

---

这是新的段落内容，与上面的列表分开。

分割线最佳实践

1. 统一风格

在文档中保持一致的分割线风格：

✅ 推荐：全部使用 ---
---

## 第一章
内容...

---

## 第二章
内容...

❌ 不推荐：混用不同风格
***

## 第一章
内容...

___

## 第二章
内容...

2. 适当使用

不要过度使用分割线：

✅ 合理使用
# 主标题

简介内容

---

## 第一节
内容...

---

## 第二节
内容...

❌ 过度使用
第一段

---

第二段

---

第三段

3. 保持间距

在分割线前后保留空行：

✅ 有空行
内容上

---

内容下

❌ 无空行
内容上
---
内容下

4. 与其他元素配合

与标题配合：

## 新章节

---

内容...

与引用配合：

> 引用内容

---

正文内容...

分割线与标题的区别

分割线

• 主要用于视觉分隔
• 没有语义层级
• 不参与目录生成

---

内容分隔

标题

• 用于内容结构
• 有明确的语义层级
• 会生成目录

## 新章节

内容结构

使用建议

• 章节切换：使用标题
• 内容分隔：使用分割线
• 主题变化：使用分割线 + 标题

HTML 分割线标签

基本用法

<hr>

效果：

---

带样式

<hr style="border: 1px solid #ccc; margin: 20px 0;">

效果：

---

带颜色

<hr style="border: none; border-top: 2px solid #007bff;">

效果：

---

虚线分割线

<hr style="border: none; border-top: 2px dashed #999;">

效果：

---

点状分割线

<hr style="border: none; border-top: 2px dotted #999;">

效果：

---

自定义粗细

<hr style="border: none; border-top: 5px solid #333;">

效果：

---

渐变分割线

<hr style="border: none; height: 2px; background: linear-gradient(to right, #007bff, #00d4ff);">

效果：

---

不同平台的渲染差异

GitHub

---

渲染为细灰色实线。

GitLab

---

渲染为中等粗细的灰色线。

Typora

支持自定义分割线样式，通常渲染为中等粗细。

VS Code

使用预览插件时，样式可能有所不同。

实战示例

文章结构

# 文章标题

## 前言

文章的开头介绍...

---

## 正文

### 第一节

第一节内容...

---

### 第二节

第二节内容...

---

## 结语

文章的总结部分...

技术文档

# API 文档

## 基础信息

版本、认证方式等...

---

## 端点列表

### GET /api/users

获取用户列表...

---

### POST /api/users

创建新用户...

---

## 错误代码

错误代码说明...

博客文章

# 我的学习之路

## 起步

2023年，我开始学习编程...

---

## 进阶

通过不断练习，我逐渐掌握...

---

## 现在

现在我已经能独立完成项目...

---

## 未来

计划学习更多新技术...

邮件模板

## 会议通知

时间：2024年1月15日 14:00  
地点：会议室A  
主题：项目进度讨论

---

## 议程

1. 上周工作回顾
2. 本周工作计划
3. 问题讨论
4. 其他事项

---

## 注意事项

请准时参加，如有冲突请提前告知。

特殊效果

文字居中分割线

<center>
    <hr style="width: 50%;">
</center>

效果：

带文字的分割线

<div style="display: flex; align-items: center; margin: 20px 0;">
    <hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
    <span style="padding: 0 10px; color: #666;">分隔文字</span>
    <hr style="flex: 1; border: none; border-top: 1px solid #ccc;">
</div>

效果：

---

分隔文字

---

图标分割线

<div style="text-align: center; margin: 20px 0;">
    ⭐️ ⭐️ ⭐️
</div>

效果：

⭐️ ⭐️ ⭐️

分割线样式对比

类型	Markdown	HTML	特点
标准	---	<hr>	简单、跨平台
粗线条	***	<hr style="border-width: 2px;">	较粗
虚线	不支持	<hr style="border-style: dashed;">	虚线效果
点线	不支持	<hr style="border-style: dotted;">	点状
彩色	不支持	<hr style="border-color: red;">	自定义颜色
渐变	不支持	CSS 渐变	渐变效果

常见问题

Q: 分割线没有显示？

A: 检查以下几点：

• 是否使用了三个或更多符号
• 符号前后是否有空行
• 是否与其他内容在同一行

Q: 不同平台显示不同？

A: 这是正常的，各平台的 CSS 样式可能不同。

Q: 如何调整分割线粗细？

A: 使用 HTML + CSS：

<hr style="border: none; border-top: 3px solid #333;">

Q: 可以在分割线中间加文字吗？

A: 标准 Markdown 不支持，使用 HTML 实现。

小结

本章详细介绍了 Markdown 分割线的使用方法：

• 基本语法：使用 -、*、_ 创建
• 语法规则：三个或更多符号
• 应用场景：章节分隔、主题切换、内容分组
• 最佳实践：统一风格、适当使用、保持间距
• HTML 扩展：自定义样式、颜色、粗细
• 实战应用：文档结构、技术文档、博客文章

合理使用分割线可以让你的文档结构更清晰、层次更分明。

下一步： 学习 Markdown 高级技巧 提升你的 Markdown 技能。