Markdown初学者8个核心模块 + 综合实训7 天学完

Markdown 初学者系统学习计划

从认识 Markdown 开始，逐步掌握标题、文本样式、列表、代码、链接与图片、表格、综合应用与进阶技巧，最终能够独立编写结构清晰的学习笔记、README、技术文档和课程资料。

📋一、整体学习路线

Markdown 是"用纯文本写出漂亮文档"的轻量级标记语言。每天 30-60 分钟，7 天即可独立编写任意类型的技术文档。

7 天完整学习周期
8核心学习模块
10+必背核心语法
从零开始面向 Markdown 初学者
Markdown 基础→基础语法→ 列表→代码→ 链接与图片→表格→ 综合应用→进阶
模块学习内容建议时间最终能力
第1部分Markdown 基础0.5 天了解 Markdown 是什么，能用编辑器写第一个 .md
第2部分基础语法1 天标题、段落、换行、粗体、斜体、删除线
第3部分列表1 天无序、有序、嵌套、任务列表
第4部分代码1 天行内代码、代码块、指定语言
第5部分链接与图片1 天普通链接、图片、本地相对路径
第6部分表格0.5 天基本表格、对齐方式
第7部分综合应用1 天笔记、README、技术文档、课程资料
第8部分进阶与扩展1 天转义、嵌入 HTML、Markdown → HTML 工作流

📖 关键术语速览

Markdown轻量级标记语言（Lightweight Markup Language），用简洁符号让纯文本格式化为有结构、有样式的文档。
.md 文件Markdown 文档的文件扩展名，纯文本，可用任意编辑器打开。
渲染 / Parse把 Markdown 文本转换成 HTML 的过程，由"Markdown 解析器"完成。
GFMGitHub Flavored Markdown —— GitHub 扩展的 Markdown 语法，包含任务列表、表格、删除线等。
行内代码 vs 代码块行内代码用单个反引号 `code`；代码块用三个反引号 ```…```。
块级元素 vs 行内元素标题、段落、列表是"块级"（独占一段）；链接、图片、行内代码是"行内"（嵌入段落）。

📖① Markdown 基础

学习目标：理解 Markdown 是什么、能做什么、如何创建和编辑 .md 文件。

📌 什么是 Markdown

Markdown 是一种轻量级标记语言，由 John Gruber 在 2004 年创建。

核心特点：
* 简单 —— 用 1 分钟就能学会基础语法
* 易读 —— 源码本身就是"格式化"的纯文本
* 易写 —— 不依赖鼠标和菜单
* 纯文本 —— 可用任意编辑器，可版本管理（Git）
* 易转换 —— 可转为 HTML、PDF、Word、图片等

📌 第一个 Markdown 文档

📝 Markdown 源码 my-first.md
# 我的第一篇 Markdown 文档

## 学习目标

今天学习 Markdown。

- 标题
- 段落
- 列表
- 图片
- 链接
👁 渲染效果 preview

我的第一篇 Markdown 文档

学习目标

今天学习 Markdown。

  • 标题
  • 段落
  • 列表
  • 图片
  • 链接

📌 Markdown 文件扩展名

README.md 项目说明
study.md 学习笔记
notes.md 课堂笔记
CHANGELOG.md 更新日志

📌 推荐的 Markdown 编辑器

编辑器平台特点
VS CodeWin/Mac/Linux免费、插件丰富、左写右看
TyporaWin/Mac/Linux所见即所得，专注写作
ObsidianWin/Mac/Linux/手机知识库、双向链接
MarkTextWin/Mac/Linux开源免费、实时预览
在线版网页无需安装：markdown.com.cn、dillinger.io
VS Code 推荐插件：Markdown All in One（快捷键+预览）、Markdown Preview Enhanced（更强预览）、markdownlint（语法检查）。
练习：用 VS Code 新建 hello.md，输入上面的"我的第一篇 Markdown 文档"示例，安装 Markdown All in One 插件后按 Ctrl+K V 打开预览窗口。

✏️② 基础语法

这一部分训练 Markdown 的"骨架"：标题、段落、换行、粗体、斜体、删除线。掌握它们就能写 80% 的 Markdown 文档。

📌 标题

📝 源码
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
👁 渲染

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
实际写文档时主要使用 # ## ### 三级即可。每多一级 #，字号变小，权重变轻。

📌 段落

📝 源码
Markdown 是一种轻量级标记语言。

它非常适合编写技术文档。
👁 渲染

Markdown 是一种轻量级标记语言。

它非常适合编写技术文档。

常见错误：用回车换行不会变成新段落——必须是空一行。一个回车只是同行内的软换行。

📌 换行

📝 源码
方式 1：行尾两个空格 + 回车  
第二行

方式 2：空一行分段
第二段。
👁 渲染

方式 1：行尾两个空格 + 回车
第二行

方式 2：空一行分段

第二段。

不同编辑器对换行处理略有不同，稳妥起见：段间用空行，需要"软换行"在行尾加两个空格（或 <br>）。

📌 粗体 / 斜体 / 删除线

📝 源码
**这是粗体**
*这是斜体*
***这是粗体 + 斜体***
~~这是删除线~~
👁 渲染

这是粗体

这是斜体

这是粗体 + 斜体

这是删除线

🔑 必须掌握

#/##/### 标题层级
空行分段落
**粗体** 和 *斜体*
~~删除线~~
行尾两空格换行
避免用回车做段落

📋③ 列表

列表是 Markdown 使用频率最高的语法之一，特别是任务列表对学习计划非常有用。

📌 无序列表

📝 源码
- 苹果
- 香蕉
- 橙子

也可以用 `*`：
* 苹果
* 香蕉
👁 渲染
  • 苹果
  • 香蕉
  • 橙子

也可以用 *：

  • 苹果
  • 香蕉
推荐统一用 -，避免项目里出现 -、*、+ 三种混用。

📌 有序列表

📝 源码
1. 安装软件
2. 创建文件
3. 编写代码
4. 运行程序
👁 渲染
  1. 安装软件
  2. 创建文件
  3. 编写代码
  4. 运行程序

📌 嵌套列表

📝 源码
- 计算机
  - 系统软件
    - Windows
    - macOS
  - 应用软件
- 网络
  - 有线
  - 无线
👁 渲染
  • 计算机
    • 系统软件
      • Windows
      • macOS
    • 应用软件
  • 网络
    • 有线
    • 无线

📌 任务列表（GFM）

📝 源码
- [x] 安装 VS Code
- [x] 配置环境
- [ ] 学习 Markdown
- [ ] 学习 HTML
- [ ] 学习 CSS
👁 渲染
  • ☑ 安装 VS Code
  • ☑ 配置环境
  • ☐ 学习 Markdown
  • ☐ 学习 HTML
  • ☐ 学习 CSS
任务列表是 GFM（GitHub Flavored Markdown）扩展，几乎所有现代编辑器都支持。在 VS Code、Obsidian、GitHub 中都能用复选框打勾。

📌 列表综合实例

📝 源码
# 学习计划

## 第一阶段
- [x] Markdown 基础
- [x] 标题
- [x] 段落
- [ ] 列表
- [ ] 表格

## 第二阶段
1. 学习 HTML
2. 学习 CSS
3. 学习 JavaScript
👁 渲染

学习计划

第一阶段

  • ☑ Markdown 基础
  • ☑ 标题
  • ☑ 段落
  • ☐ 列表
  • ☐ 表格

第二阶段

  1. 学习 HTML
  2. 学习 CSS
  3. 学习 JavaScript

💻④ 代码

在笔记、技术文档、教程里，代码展示是刚需。

📌 行内代码

📝 源码
使用 `print()` 输出内容。

在 CMD 中输入 `dir` 查看目录。
👁 渲染

使用 print() 输出内容。

在 CMD 中输入 dir 查看目录。

📌 代码块

📝 源码
```python
print("Hello World")
for i in range(3):
    print(i)
```
👁 渲染
print("Hello World")
for i in range(3):
    print(i)

📌 指定代码语言（语法高亮）

语言标识用途
pythonPython 代码
javascript / jsJavaScript
javaJava
htmlHTML 标记
cssCSS 样式
cmd / batchWindows CMD 命令
bash / shShell 脚本
jsonJSON 数据
sqlSQL 语句
markdown / mdMarkdown 自身
text纯文本（不高亮）

📌 CMD 实例

📝 源码
```cmd
dir
cd ..
mkdir test
```
👁 渲染
dir
cd ..
mkdir test
技巧：如果代码里本身含三个反引号，可以用四个反引号包裹外层；或者改用波浪线 ~~~ 作为外层。

🔗⑤ 链接与图片

📌 普通链接

📝 源码
[OpenAI](https://www.openai.com)

[Python 官网](https://www.python.org)
👁 渲染

OpenAI

Python 官网

基本结构：[显示文字](链接地址)
带提示文字：[OpenAI](https://www.openai.com "AI 公司")

📌 图片

📝 源码
![替代文字](图片地址)

![Markdown Logo](https://...)
![本地图片](images/photo.png)
👁 渲染

语法结构：![替代文字](图片地址)

图片本质是"前面加 ! 的链接"。

📌 本地图片与相对路径

推荐文件结构： 
project
├── README.md
└── images
    ├── computer.png
    └── logo.jpg
在 README.md 中引用：![计算机结构](images/computer.png)
相对路径 vs 绝对路径：项目里强烈推荐相对路径（如 images/photo.png），这样仓库克隆到任何位置都能正常显示图片。

📌 链接综合实例

📝 源码
## 学习资源

- [Python](https://www.python.org)
- [GitHub](https://github.com)
- [VS Code](https://code.visualstudio.com)

![Python Logo](images/python.png)
👁 渲染

学习资源

[图片占位] Python Logo

📊⑥ 表格

📌 基本表格

📝 源码
| 命令 | 功能 |
|---|---|
| cd | 切换目录 |
| dir | 查看目录 |
| mkdir | 创建目录 |
👁 渲染
命令功能
cd切换目录
dir查看目录
mkdir创建目录

📌 对齐方式

📝 源码
| 左对齐 | 居中 | 右对齐 |
|:---|:---:|---:|
| A | B | C |
| 100 | 200 | 300 |
👁 渲染
左对齐居中右对齐
ABC
100200300
对齐语法：
* :--- 左对齐（默认）
* :---: 居中对齐
* ---: 右对齐

📌 复杂表格实例

📝 源码
| 命令 | 功能 | 示例 | 难度 |
|:---|:---|:---|:---:|
| `cd` | 切换目录 | `cd test` | ★ |
| `dir` | 查看目录 | `dir` | ★ |
| `copy` | 复制文件 | `copy a.txt b.txt` | ★★ |
| `tasklist` | 查看进程 | `tasklist` | ★★★ |
👁 渲染
命令功能示例难度
cd切换目录cd test★
dir查看目录dir★
copy复制文件copy a.txt b.txt★★
tasklist查看进程tasklist★★★
提示：在源代码中表格第二行的 | 之间可以加空格让源码更整齐（如 | --- | --- |），但渲染效果一样。

📝⑦ 综合应用

掌握上面 6 个模块的语法后，就能写实际文档了。本节给出 4 种典型 Markdown 应用场景。

📌 引用

📝 源码
> 这是一段引用。
>
> Markdown 适合编写技术文档。
👁 渲染
这是一段引用。
Markdown 适合编写技术文档。

📌 分隔线

📝 源码
上面一段

---

下面一段

也可以用 `***`
👁 渲染

上面一段

下面一段

也可以用 ***

📌 应用 1：学习笔记

适合：课堂笔记、读书笔记、知识整理
特点：大量使用标题层级 + 任务列表 + 引用 + 代码块

📌 应用 2：README（项目说明）

适合：GitHub 项目首页、库说明
特点：含徽章（badge）、安装步骤、目录、链接

📌 应用 3：技术文档

适合：API 文档、使用手册
特点：标题分层清晰、表格丰富、含大量代码示例

📌 应用 4：课程资料

适合：教学讲义、实验指导书
特点：任务列表驱动、引用强调重点、图片示意

🔑 必须掌握

普通链接与本地图片
基本表格 + 对齐
任务列表
代码块 + 语言标识
引用与分隔线
标题层级清晰

🚀⑧ 进阶与扩展

📌 转义字符

有些符号（如 * # -）有特殊含义，需要显示原字符时用反斜杠转义：

📝 源码
\*不显示斜体\*
\#不显示标题\*
\-不显示列表项
👁 渲染

*不显示斜体*
#不显示标题
-不显示列表项

常见需要转义的字符：\ ` * _ { } [ ] ( ) # + - . ! |

📌 Markdown 与 HTML 的关系

工作流程： 
Markdown 源文件 (.md)
      ↓
Markdown 解析器
      ↓
HTML 文件
      ↓
浏览器渲染

Markdown 最终都被解析为 HTML，因此可以直接在 Markdown 中嵌入 HTML 标签：

📝 源码
<div style="color:teal">
Hello Markdown
</div>

<p align="center">这是居中的文字</p>
👁 渲染
Hello Markdown

这是居中的文字

建议：初学阶段先用纯 Markdown 语法，遇到 Markdown 表达不了的需求再嵌入 HTML。

📌 常用扩展语法（GFM）

扩展用途
任务列表 - [ ]勾选框
表格数据展示
删除线 ~~标记废弃
自动链接 <URL>无文字链接
Emoji :smile:GitHub 风格表情
Mentions @userGitHub 提及用户

📌 Markdown 工具生态

工具作用
pandoc格式转换之王：MD ↔ HTML/PDF/Word/ePub
markdown-itJavaScript 解析器，速度快
mkdocs / docsify / vuepress用 .md 直接建站
Hugo / Hexo静态博客（.md 即文章）
GitBook / Notion团队文档协作平台

📌 ⭐ 初学者必背 10 项

① 标题
② 段落
③ 粗体/斜体
④ 无序列表
⑤ 有序列表
⑥ 任务列表
⑦ 引用
⑧ 代码块
⑨ 链接
⑩ 图片

🎯综合实训：制作《计算机学习笔记》

完成 8 个模块后，独立编写一份完整的学习笔记 .md 文件。

📌 项目要求

文件名：ComputerStudy.md
要求至少包含：
  • 1 个一级标题 + 至少 3 个二级标题
  • 1 段引用（说明学习方向）
  • 1 个任务列表（学习进度）
  • 1 段有序列表（学习步骤）
  • 1 段无序列表（知识分类）
  • 1 段代码块（带语言标识）
  • 1 个表格（数据展示）
  • 1 条外部链接 + 1 张本地图片
  • 1 个分隔线
  • 部分文字使用粗体和斜体

📌 示例完整文档

📝 源码 ComputerStudy.md
# 我的计算机学习计划

> 这是我的计算机科学学习路线。

## 一、学习内容

- Markdown
- HTML
- CSS
- JavaScript
- Python

## 二、学习进度

- [x] Markdown
- [x] HTML
- [ ] CSS
- [ ] JavaScript
- [ ] Python

## 三、示例代码

```python
print("Hello World")
```

## 四、学习工具

| 工具       | 用途     |
| -------- | ------ |
| VS Code  | 编辑器    |
| Git      | 版本控制   |
| Markdown | 文档编写   |

## 五、学习资源

[Python 官方网站](https://www.python.org)

---

## 六、学习笔记

**Markdown 非常适合编写技术文档。**
👁 渲染效果

我的计算机学习计划

这是我的计算机科学学习路线。

一、学习内容

  • Markdown
  • HTML
  • CSS
  • JavaScript
  • Python

二、学习进度

  • ☑ Markdown
  • ☑ HTML
  • ☐ CSS
  • ☐ JavaScript
  • ☐ Python

三、示例代码

print("Hello World")

四、学习工具

工具用途
VS Code编辑器
Git版本控制
Markdown文档编写

五、学习资源

Python 官方网站

六、学习笔记

Markdown 非常适合编写技术文档。

📌 学习检查表

基础语法

能创建 .md 文件
能使用三级标题
能写段落
能用粗体/斜体
能用删除线
能行尾两空格换行

列表

能创建无序列表
能创建有序列表
能创建嵌套列表
能创建任务列表

内容与多媒体

能使用引用
能插入行内代码
能插入代码块（含语言）
能插入链接
能插入图片（含本地路径）
能创建表格与对齐

高级

理解转义字符
知道 Markdown → HTML 工作流
知道 Markdown 可与 HTML 混用
能用任务列表驱动学习计划

📈 Markdown 知识体系

层次核心内容学习重点
第一层：基础Markdown 是什么、编辑器、文件结构能在编辑器中写并查看预览
第二层：基础语法标题、段落、粗体/斜体、删除线掌握"骨架"语法
第三层：列表与任务无序/有序/嵌套/任务列表用任务列表驱动学习
第四层：代码行内代码、代码块、语言标识准确标注代码片段
第五层：多媒体链接、图片、相对路径构建可视化文档
第六层：表格基本表格、对齐、复杂表格结构化展示
第七层：综合应用笔记、README、技术文档、课程资料独立编写完整文档
第八层：进阶转义、HTML、工具链衔接后续 Web 技术
Markdown 初级教程 · 返回导航首页