## markdown 教程

学习 markdown 相关语法

第一个文件

创建文件创建.md 的文件
编写内容
预览效果如果使用 VS Code 等编辑器，按 Ctrl+Shift+V 打开预览面板，也可以点击右上角的预览图标

markdown 标题

Markdown 标题有两种格式。 1。使用 = 和 - 标记一级和二级标题 2。使用 # 号标记 Markdown 使用 # 号来创建标题，这是从 HTML 的

到

标签概念演化而来的。使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。重要注意事项：符号与文字间的空格：# 号和标题文字之间必须有一个空格。这是标准的 Markdown 语法要求。行首位置：# 号必须在行首，前面不能有其他字符（空格或制表符）。

唯一的一级标题：在一个文档中，通常只使用一个一级标题作为文档的主标题，这符合良好的文档结构规范。标题长度建议：

保持标题简洁明了，一般不超过 10 个汉字或 20 个英文字符

使用描述性词语，避免模糊的标题如"其他"、"杂项"

可以使用冒号来分隔主题和副主题

markdown 文本格式

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。也可以在段落后面使用一个空行来表示重新开始一个段落。

字体

文本强调是写作中的重要技巧，Markdown 提供了简洁的方式来实现粗体和斜体效果。 Markdown 可以使用以下几种字体：粗体和斜体。粗体语法：使用两个星号 ** 或两个下划线 __ 包围文字：斜体语法：使用一个星号 * 或一个下划线 _ 包围文字：粗斜体组合：使用三个星号 *** 或三个下划线 ___。

分隔线

分隔线你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

删除线

删除线如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可，实例如下： ~~这句文字被删除~~

下划线

下划线下划线可以通过 HTML 的 u 标签来实现：
这句话加下划线

脚注

脚注脚注是对文本的补充说明。

Markdown 脚注的格式如下： [^要说明的文本] [^要说明的文本]：文本的补充说明

行内代码标记

行内代码标记行内代码用于在正文中标记代码片段、命令、变量名等：使用 git commit 命令提交代码使用 git log查看日志

文本高亮

文本高亮（扩展语法）这是==高亮文本== 这是高亮文本

段落和换行

段落和换行段落的创建方法在 Markdown 中，段落是文本的基本单位，理解段落规则对于正确格式化文档至关重要。

段落基本规则：

段落由一个或多个连续的文本行组成段落之间由一个或多个空行分隔普通段落不应该用空格或制表符缩进

强制换行技巧有时需要在不创建新段落的情况下换行，Markdown 提供了几种方法：

方法一：行尾两个空格在行尾添加两个或更多空格，然后按回车：

第一行内容（这里有两个空格）
第二行内容方法二：HTML 换行标签

第一行内容
第二行内容方法三：反斜杠（部分解析器支持）

第一行内容\ 第二行内容

空行的作用

空行的作用最佳实践建议：

在标题和内容之间留空行在列表前后留空行在代码块前后留空行保持一致的空行使用习惯

markdown 列表

Markdown 支持有序列表和无序列表。无序列表无序列表使用星号（*）、加号（+）或是减号（-）作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

第一项
第二项
第三项
第一项
第二项
第三项
第一项
第二项
第三项

选择建议：

建议统一使用减号 -，因为它在视觉上更清晰在同一文档中保持一致的标记方式标记符号后必须有一个空格

有序列表有序列表用于展示有顺序要求的步骤或项目。

有序列表使用数字并加上。号来表示，如：

1。第一项 2。第二项 3。第三项

列表嵌套列表嵌套技巧列表可以嵌套使用，创建多层次的结构：嵌套规则：

子列表需要缩进 2-4 个空格（推荐 2 个）保持一致的缩进长度可以无限层嵌套，但实际使用中建议不超过 3 层

任务列表（复选框列表）任务列表是 GitHub 风格 Markdown 的扩展功能，现在被广泛支持：

基本语法：

[ ] 未完成的任务
[x] 已完成的任务
[ ] 另一个未完成的任务

使用技巧：

方括号内的空格和 x 很重要：[ ] 和 [x] 可以与嵌套列表结合使用在项目管理、学习计划、生活清单中特别有用某些编辑器支持点击复选框来切换状态

markdown 引用块

引用块用于突出显示重要信息、引用他人观点或创建视觉层次。

单级引用的使用基本语法： Markdown 区块引用是在段落开头使用 > 符号，然后后面紧跟一个空格符号：简化写法：只在第一行使用 > ，其余行会自动包含在引用中：

这是一个长引用，包含多行内容，只需要在第一行使用 > 符号。

markdown 代码

Markdown 提供了多种方式来展示代码，从简单的行内代码到复杂的代码块，满足不同场景下的代码展示需求。

行内代码如果是段落上的一个函数或片段的代码可以用反引号把它包起来（），例如：printf（）` 函数

常见用法示例：

函数名：使用 console.log（） 输出信息变量名：将值赋给 userName 变量命令行：运行 npm install 安装依赖键盘按键：按 Ctrl+C 复制内容文件名：编辑 index.html 文件

特殊字符转义当需要在行内代码中显示反引号或其他特殊字符时，需要进行转义处理。显示反引号的方法：使用双反引号包围单反引号：使用 `反引号` 包围代码

代码区块缩进式代码块代码区块使用 4 个空格或者一个制表符（Tab 键）。正常文本段落

这是缩进式代码块
每行前面有四个空格
保持代码的原始格式

继续正常文本

三反引号代码块你也可以用 包裹一段代码，并指定一种语言（也可以不指定）：

多行代码内容
可以包含空行
保持原有缩进

注意事项：

缩进式代码块前后需要空行分隔所有代码行必须保持一致的缩进不支持语法高亮在列表中使用时需要 8 个空格缩进语言标识和语法高亮在三反引号后添加语言标识符可以启用语法高亮功能。

常用语言标识符列表： - javascript / js - JavaScript - python / py - Python - html - HTML - css - CSS - sql - SQL - json - JSON - xml - XML - yaml / yml - YAML - bash / shell - Shell 脚本 - java - Java - cpp / c++ - C++ - csharp / c# - C# - php - PHP - ruby / rb - Ruby - go - Go 语言 - rust - Rust - typescript / ts - TypeScript

代码块的高级特性行号显示某些 Markdown 渲染器支持显示行号，通过特定的语法或配置实现。

语法示例（部分支持）：

```javascript {.line-numbers} function fibonacci（n） { if （n <= 1） return n； return fibonacci（n - 1） + fibonacci（n - 2）； }

console.log（fibonacci（10））；

代码差异对比
用于显示代码的添加、删除或修改，常用于展示版本控制中的变更。

Diff 语法：

```diff
function calculateTotal（items） {
-   let total = 0；
+   let total = 0.0；

    for （let item of items） {
-       total += item.price；
+       total += parseFloat（item.price）；
    }

+   // 保留两位小数
+   total = Math.round（total * 100） / 100；
    return total；
}

markdown 链接

链接是使 Markdown 文档具有交互性的关键元素。

掌握链接语法能让你创建内容丰富、易于导航的文档。

链接使用方法如下：

[链接名称]（链接地址） [链接文字]（链接地址 "可选的标题"）或者：

<链接地址> 一个简单的链接：

这是一个链接 [菜鸟教程]（https：//www.runoob.com）

直接使用链接地址：

参考链接参考式链接将链接定义与使用分离，让文档更整洁，特别适合长文档或需要多次引用相同链接的情况。

基本语法：

markdown[链接文字][参考标签]

[参考标签]： URL "可选标题"

锚点链接的使用锚点链接用于在同一文档内跳转，特别适合长文档的导航：

跳转到标题：

第一章：介绍

这里是介绍内容。。。

第二章：安装

这里是安装说明。。。

第三章：使用方法

这里是使用说明。。。

markdown 图片

图片能让文档更加生动和易于理解。

Markdown 的图片语法简洁而灵活。

Markdown 图片语法格式如下：

！[替代文字]（图片路径）！[替代文字]（图片路径 "图片标题"）开头一个感叹号！接着一个方括号，里面放上图片的替代文字接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。相对路径示例：

！[项目截图]（。/images/screenshot.png）！[用户界面]（。。/assets/ui-demo.jpg "用户界面演示"）！[图标]（images/icon.svg "应用图标"）绝对路径示例：

！[本地图片]（/Users/username/Documents/image.png）！[系统截图]（C：\Users\username\Pictures\screenshot.png）路径使用建议：

推荐使用相对路径，便于项目移植建议创建专门的图片文件夹（如 images/、assets/）使用有意义的文件名，便于管理注意路径分隔符在不同操作系统中的差异

图片 alt 文本的重要性 Alt 文本（替代文字）在图片无法显示时提供替代信息，同时对无障碍访问和 SEO 很重要：

好的 alt 文本示例：

！[苹果公司总部大楼外观，现代玻璃幕墙建筑]（。/images/apple-headquarters.jpg）！[网站流量统计图表，显示过去六个月的访问量呈上升趋势]（。/charts/traffic-stats.png）！[用户登录界面，包含用户名和密码输入框]（。/screenshots/login-page.png）

图片尺寸控制（HTML 方式）标准 Markdown 不支持直接控制图片尺寸，但可以使用 HTML 标签。

使用 HTML img 标签：

描述文字

链接和图片的高级用法图片链接组合将图片作为链接的可点击元素。

基本语法：

[！[图片 alt 文本]（图片 URL）]（链接 URL）实际示例：

[！[GitHub 项目截图]（。/images/project-screenshot.png）]（https：//github.com/username/project） [！[访问官网]（https：//example.com/logo.png）]（https：//example.com "点击访问官网"）

markdown 表格

表格和引用是 Markdown 中重要的内容组织工具。表格能够清晰地展示结构化数据，而引用则用于突出重要信息或引用他人观点。 Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

语法格式如下：

表头	表头
单元格	单元格
单元格	单元格

语法要点：

表头和数据行之间必须有分隔线分隔线至少需要三个连字符 --- 两端的竖线 | 是可选的，但建议保留以提高可读性不需要严格对齐，但对齐后更美观对齐方式我们可以设置表格的对齐方式：

---：设置内容和标题栏居右对齐。：--- 设置内容和标题栏居左对齐。：---：设置内容和标题栏居中对齐。

复杂表格的处理技巧元格内容格式化表格单元格内可以使用大部分 Markdown 语法：

| 功能 | 描述 | 状态 | |------|------|：----：| | 用户登录 | 支持邮箱和手机号登录 | ✅； | | 密码重置 | 通过邮箱重置密码 | ⚠；️； | | API 接口 | RESTful API 设计 | ✅； | | [文档链接]（https：//example.com） | 查看详细文档 | 📖； |

markdown 高级技巧

支持的 HTML 元素不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

转义 Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

文本加粗 ** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号（）小括号

井字号

加号
减号。英文句点！感叹号

markdown 分割线

分割线分割线用于在视觉上分隔文档的不同部分，创建清晰的内容层次。

水平分割线的三种写法 Markdown 支持三种方式创建水平分割线：

1、使用三个连字符：

2、使用三个星号：

3、使用三个下划线：

markdown 数学公式

LaTeX 数学公式基础在 Markdown 中，数学公式通过 LaTeX 语法来表示。LaTeX 是一个强大的排版系统，特别适用于包含复杂数学公式的文档。

基本语法结构命令：以反斜杠 \ 开头，如 \alpha、\sum 参数：用花括号 {} 包围，如 \frac{a}{b} 下标：使用 ，如 x_1 上标：使用 ^，如 x^2 分组：用花括号将多个字符组合，如 x 常用 LaTeX 命令 \alpha， \beta， \gamma % 希腊字母 \sum， \prod， \int % 求和、乘积、积分 \frac{分子}{分母} % 分数 \sqrt{表达式} % 平方根 \sqrt[n]{表达式} % n 次根

行内公式与块级公式行内公式行内公式使用单个美元符号 $ 包围，公式会嵌入到文本中，如：文本中的变量 $x = 5$ 和函数 $f（x） = x^2 + 2x + 1$。

块级公式块级公式使用双美元符号 $$ 包围，公式会独立成行并居中显示：

$$E = mc^2$$

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

多行公式使用 align 环境创建多行对齐公式： $$ \begin{align} f（x） &= ax^2 + bx + c \ f'（x） &= 2ax + b \ f''（x） &= 2a \end{align} $$

markdown 图标绘制

图表在技术文档中非常重要，它可以帮助我们：

可视化复杂的数据关系展示系统架构和工作流程更清晰地表达思想和概念常见的 Markdown 图表工具 Mermaid Mermaid 是最流行的 Markdown 图表工具之一，它允许你使用简单的文本语法生成各种图表。 VS Code 默认的 Markdown 预览并不原生支持渲染 Mermaid 图表。你需要去扩展商店安装一个专门的插件：推荐扩展：Markdown Preview Mermaid Support（作者是 shd101wyy）。注意：请认准这个版本，不要安装名字里带“live”或“enhanced”的变种，那些可能已经弃用或存在兼容问题。操作：安装完成后，务必重启 VS Code 让扩展生效。

支持图表类型：流程图（Flowchart）序列图（Sequence Diagram）类图（Class Diagram）状态图（State Diagram）甘特图（Gantt Chart）饼图（Pie Chart）

graph TD
    A[开始] --> B{条件判断}
    B -->|Yes| C[执行操作 A]
    B -->|No| D[执行操作 B]
    C --> E[结束]
    D --> E

时序图和甘特图时序图（Sequence Diagram）

sequenceDiagram
    participant A as 用户
    participant B as 系统
    participant C as 数据库

    A->>B： 登录请求
    B->>C： 验证用户信息
    C-->>B： 返回验证结果
    B-->>A： 登录成功/失败

时序图语法要点：

participant 定义参与者 ->> 实线箭头 -->> 虚线箭头 note 添加注释甘特图（Gantt Chart）

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析      ：done，    des1， 2024-01-01，2024-01-15
    UI 设计       ：active，  des2， 2024-01-10， 30d
    section 开发阶段
    前端开发      ：         dev1， after des2， 45d
    后端开发      ：         dev2， 2024-02-01， 60d
    section 测试阶段
    单元测试      ：         test1， after dev1， 15d
    集成测试      ：         test2， after dev2， 10d

甘特图语法要点：

title 设置标题 dateFormat 定义日期格式 section 定义阶段任务状态：done（已完成）、active（进行中）、crit（关键）

饼图

pie
    title 浏览器市场份额
    "Chrome" ： 65
    "Safari" ： 15
    "Firefox" ： 10
    "其他" ： 10

markdown 实战

完整简历示例

张三 | 前端开发工程师

📞；联系方式

邮箱： zhangsan@email.com
电话： 138-0000-0000
GitHub： [github.com/zhangsan]（https：//github.com/zhangsan）
LinkedIn： [linkedin.com/in/zhangsan]（https：//linkedin.com/in/zhangsan）
地址：上海市浦东新区

🎯；职业目标

具有 3 年前端开发经验的工程师，专注于 React 生态系统和现代化 Web 应用开发。寻求在创新型公司中担任高级前端开发职位，希望参与大型项目的架构设计和团队协作。

💼；工作经验

高级前端开发工程师 | ABC 科技有限公司

2022.03 - 至今

负责公司核心产品的前端开发，用户量达 100 万+
使用 React、TypeScript 构建可维护的大型单页应用
与产品和设计团队协作，将设计稿转化为高质量的用户界面
建立前端组件库，提升团队开发效率 30%
技术栈： React， TypeScript， Redux， Webpack， Jest

前端开发工程师 | XYZ 互联网公司

2021.06 - 2022.02

参与电商平台的前端开发和维护工作
优化页面性能，首屏加载时间减少 40%
负责移动端 H5 页面开发，适配多种设备
技术栈： Vue.js， JavaScript， SCSS， Element UI

信息层次划分 Markdown 简历的信息层次应该遵循以下原则：

一级标题（#）：姓名和职位二级标题（##）：主要板块（联系方式、工作经验等）三级标题（###）：具体职位或项目名称四级标题（####）：子项目或详细分类粗体文本：重要信息强调列表：技能点或职责描述

层次划分示例

🛠；️；技能清单

编程语言

熟练： JavaScript， TypeScript， HTML5， CSS3
了解： Python， Java， Go

前端框架

React 生态： React， Redux， React Router， Next.js
Vue 生态： Vue.js， Vuex， Vue Router， Nuxt.js
其他： Angular 基础

开发工具

版本控制

Git， GitHub， GitLab

构建工具

Webpack， Vite， Rollup
Babel， PostCSS

测试工具

Jest， Cypress， Testing Library

格式美化技巧使用 Emoji 增强视觉效果

📱；联系方式

💼；工作经验

🎓；教育背景

🛠；️；技能清单

🚀；项目经历

🏆；获奖经历

巧用表格展示信息

📊；技能评估

技能类别	具体技能	熟练程度
前端框架	React	⭐；⭐；⭐；⭐；⭐；
前端框架	Vue.js	⭐；⭐；⭐；⭐；
编程语言	TypeScript	⭐；⭐；⭐；⭐；
编程语言	JavaScript	⭐；⭐；⭐；⭐；⭐；

使用引用块突出重点

🎯；职业亮点

核心优势： 3 年大型项目开发经验，熟悉完整的前端开发流程

技术特长： React + TypeScript 技术栈，具备良好的代码规范意识

团队协作：具备跨部门沟通能力，参与过多个敏捷开发项目

链接和徽章美化

🔗；在线作品

[！[个人网站]（https：//img.shields.io/badge/Website-zhangsan.dev-blue）]（https：//zhangsan.dev） [！[GitHub]（https：//img.shields.io/badge/GitHub-zhangsan-black）]（https：//github.com/zhangsan） [！[掘金]（https：//img.shields.io/badge/掘金-@张三-blue）]（https：//juejin.cn/user/zhangsan）

第一个文件

markdown 标题

到

markdown 文本格式

字体

分隔线

删除线

下划线

脚注

行内代码标记

文本高亮

段落和换行

空行的作用

markdown 列表

markdown 引用块

markdown 代码

markdown 链接

目录

第一章：介绍

第二章：安装

第三章：使用方法

markdown 图片

markdown 表格

markdown 高级技巧

井字号

markdown 分割线

markdown 数学公式

markdown 图标绘制

markdown 实战

张三 | 前端开发工程师

📞； 联系方式

🎯； 职业目标

💼； 工作经验

高级前端开发工程师 | ABC 科技有限公司

前端开发工程师 | XYZ 互联网公司

🛠；️； 技能清单

编程语言

前端框架

开发工具

版本控制

构建工具

测试工具

📱； 联系方式

💼； 工作经验

🎓； 教育背景

🛠；️； 技能清单

🚀； 项目经历

🏆； 获奖经历

📊； 技能评估

🎯； 职业亮点

🔗； 在线作品

📞；联系方式

🎯；职业目标

💼；工作经验

🛠；️；技能清单

📱；联系方式

💼；工作经验

🎓；教育背景

🛠；️；技能清单

🚀；项目经历

🏆；获奖经历

📊；技能评估

🎯；职业亮点

🔗；在线作品