垦荒学园
  • 中文

      • 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>

      效果：

      ⭐️ ⭐️ ⭐️

      分割线样式对比

      类型MarkdownHTML特点
      标准---<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 技能。