Markdown 语法总结【从入门到精通一篇就够了】

小北编程

已于 2024-01-31 09:48:26 修改

阅读量1k

点赞数 27

分类专栏： Markdown教程文章标签：笔记经验分享其他学习方法 github 编辑器

于 2024-01-12 16:00:11 首次发布

本文链接：https://blog.csdn.net/u014696856/article/details/135480465

版权

Markdown教程专栏收录该内容

12 篇文章 5 订阅

订阅专栏

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

一、Markdown 简介


	Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。

二、Markdown 应用

Markdown 能被使用来撰写电子书，如：Gitbook。

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、CSDN、简书、掘金、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。

三、Markdown 概述

Markdown的核心目标是实现「易读易写」。

Markdown的发展历史

Markdown 诞生于 2004 年。诞生初期是为了简化 HTML 语法，用于编写阅读次数多、更新频率高，但内容格式相对稳定的 README 类的文档。所以 Markdown 语法支持嵌入原始的 HTML 标记语言，支持 CSS 样式。

Markdown 为导出 (HTML) 而生，在导出过程中，其导出样式与布局受到导出工具的影响，以至于不同环境下导出的结果会有所不同，造成了 Markdown 文件导出的不确定性。同时，Markdown 的实现有时包含了自定义的扩展内容，比如流程图等，这也使得 Markdown 文件在不同工具间的移植难度增加。在很长一段时间，Markdown 语言并没有流行起来。

Markdown 的真正流行是在 2008 年 Github 出现以后。Github 使用 Markdown 作为默认的 Readme 文件编写规范，并提供了一套渲染规范。随着 Github 的流行，越来越多的具有高文字输出能力的程序员开始使用 Markdown 作为其创作的首选工具。

现在，Markdown 不仅适用于工程师，其简洁的语法、规范的布局和高效的渲染能力，使其得到了越来越多文字创作者的喜爱。

Markdown 的优点

Markdown 从 HTML 发展而来，但是摆脱了 HTML 冗长的标签束缚。她有着记事本环境下的便捷操作方式，同时也能做到像 Word\Pages 一样的布局效果。她既能无障碍地切换于不同编辑器，又可以无压力地让多人协作编辑。

Markdown 书写简单，不限制编辑器，用几个符号便可以解决排版问题；
Markdown 的源代码具有良好的可读性，即使不渲染为HTML 页面，也不影响其内容的表达；
Markdown 兼容 HTML 语法，有扩展能力，当我们面对复杂样式或内容需求时，可以通过添加HTML\CSS 代码扩充其表现形式；
Markdown 比 Word 文件更适合在版本控制环境下使用，有利于修改内容的对比和追溯；
Markdown 非常适用于博客写作，其规范化的布局方式使创作者只需关注内容本身。

Markdown 的不足

缺乏公认的、与时俱进的官方标准，其最后标准更新于 2004 年度；
Markdown 源代码无法嵌入图片、文件等资源，需要使用 URL来定位；
Markdown 的布局形式相对单一，无法用简单方法实现图文混排。

四、Markdown 基本语法

4.1 标题

在行首使用 1-6 个 # 字符，对应于标题级别 1-6。例如:

Markdown语法	HTML	预览效果
`# 一级标题`	`<h1>一级标题</h1>`	一级标题
`## 二级标题`	`<h2>二级标题</h2>`	二级标题
`### 三级标题`	`<h3>三级标题</h3>`	三级标题
`#### 四级标题`	`<h4>四级标题</h4>`	四级标题
`##### 五级标题`	`<h5>五级标题</h5>`	五级标题
`###### 六级标题`	`<h6>六级标题</h6>`	六级标题

可选语法
在文字下方加上任意个 ==，等于# 标题1；加上任意个 —，等于 ## 标题。2例如:

Markdown语法	HTML	预览效果
Heading level 1 ===============	`<h1>Heading level 1</h1>`	Heading level 1
Heading level 2 ---------------	`<h2>Heading level 2</h2>`	Heading level 2

标题最佳实践：建议标题与上下的段落之间空一行或多行。不要靠的太近。
⚠️注意：不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

4.2 段落和换行符

Markdown是一种轻量级标记语言，旨在使文本的编写和阅读变得简单而直观。在Markdown中，段落是文本的基本结构单元，它通过一些简单的规则来定义。
段落的定义
在Markdown中，一个段落由一行或多行文本组成，相邻的文本行被视为同一个段落。段落之间通过空行来区分。
示例：

这是第一个段落。

这是第二个段落。

在这个例子中，两个文本行之间的空行表示两个段落的分隔。

在渲染时，上述Markdown文本将被解释为两个段落。段落的定义简单而直观，使得Markdown成为撰写文档和文章的理想选择。
Typora 段落快捷键：ctrl-0

折行简介

Markdown是一种轻量级标记语言，以其简洁易读的语法而闻名。在Markdown中，折行是指在文本中进行换行的方式。Markdown引擎通常会自动将文本中的软换行（\n）转换为HTML的硬换行（ ），从而实现文本在浏览器中正确换行显示。

折行的方法

结尾空格： 在句子结尾加入两个或更多空格，Markdown引擎会将其转换为硬换行。
```
这是一行文本  
这是下一行文本
```
反斜杠： 在文本结尾使用反斜杠\进行折行。
```
这是一行文本\
这是下一行文本
```
 标签： 直接使用HTML的 标签进行折行。
```
这是一行文本 
这是下一行文本
```

注意事项

尽管可以使用上述方法实现折行，但在现代Markdown引擎中，几乎都已经支持软换行转硬换行。因此，建议不要过多地使用结尾空格、反斜杠\或 标签，以保持Markdown的简洁性和易读性。

4.3 段首缩进

使用 Markdown 写文章不需要段首缩进。但如果确实有需要的话，可以在段落前面使用两个全角空格（space）。因为一个全角空格的宽度是整整一个汉字，输入两个全角空格正好是两个汉字的宽度。

一般的中文输入法都是按 shift-Space 切换到全角模式，输完两个空格后，再次按 shift-Space 回到正常输入状态。

4.4 引用

在Markdown中，我们采用邮件风格的「大括号 >」进行引用声明。如果你熟悉在邮件中引用文章的方法，那么在Markdown文本中引用文字也是同样的道理。只需在被引用的文字行开头添加「大于号 >」即可轻松实现引用效果。这简单而直观的语法为文档引用提供了方便的工具。

在Markdown中，引用文本的语法使用 > 符号。以下是引用文本的基本语法和一些示例：

基本引用
使用 > 符号表示引用，可以是单行或多行文本。

> 这是引用的文本。

效果如下：

这是引用的文本。

多行引用
引用可以包括多行文本，每行都以 > 开始。

> 这是引用的第一行。
> 这是引用的第二行。

效果如下：

这是引用的第一行。
这是引用的第二行。

嵌套引用
可以使用多个 > 符号来嵌套引用。

> 外层引用
> > 内层引用
> > > 更深层次引用

效果如下：

外层引用

内层引用

更深层次引用

引用包含其他Markdown元素
引用可以包含其他Markdown元素，如列表、代码块等。

> 这是一个引用包含的列表：
> - 项目1
> - 项目2
> 
> ```
> 这是引用包含的代码块。
> ```

效果如下：

这是一个引用包含的列表：

项目1
项目2
这是引用包含的代码块。

在Markdown中，引用通常用于引述他人的文字或用于突出一段文本。希望这些例子能帮助你理解Markdown中的引用语法。

4.5 分割线

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

我们可以通过输入三个或更多的「减号 -」、「星号 *」、「下划线 _」来创建分隔线，相当于HTML语法中的<hr/>。这些符号之间可以包含空格，而每种类型的分隔线都可以采用如下形式： * * * ，* **，****，- - -，---------。这样简单的语法就能为文档增添清晰的分隔效果。

语法： 在 Markdown 文件中，连续的三个「星号 *」，或者连续的三个「减号 -」，或者连续的三个「下划线_」会被渲染成分割线。格式如下：


**使用「星号」作为分割线**

***

**使用「减号」作为分割线**

---

**使用「下划线」作为分割线**
___

**使用「<hr>」作为分割线**
<hr>

效果如下：

使用「星号」作为分割线

使用「减号」作为分割线

使用「下划线」作为分割线

使用「<hr>」作为分割线

小结：

分割线使用的关键字 *、-、_，都包含多种语义，当我们希望增加分割线的时候，请注意确保该字符连续出现，并且保证至少三个，同时，该行前后不允许有别的内容；
使用减号 -，用于分隔线的时候需要注意，因为减号还有二级标题的作用，即在一行文字的下面插入三个减号时，该文字变成二级标题，所以使用减号需要确保前面有一空行；
建议在文章中都是用下划线 _，作为换行的输入，这样避免语义错误，同时与 Word 的方式更加接近。
还有一些博客支持修改分割线的样式，如：颜色、尺寸、粗细、类型（虚线、点状、双线、凹槽、Inset、Outset）等，但是大部分博客是不支持修改这些的。

4.6 文本样式

4.6.1 文本块居中

若想使图片或文本块居中，请使用：

语法：

<center>
居中文本块!
</center>

效果如下：

居中文本块!

4.6.2 设置文字颜色

字体颜色
蓝色的文本 如：蓝色的文本
可以使用不同的颜色如blue、red、green等
也可以使用十六进制值：如#0000FF表示蓝色。
蓝色的文本 如：蓝色的文本
提示: 17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

4.6.3 设置文字字体

字体是丰富排版效果的主要方式。一篇文章中会通过不同的字体字号来区分文字的作用，例如使用「黑体」，「一号字」作为标题，使用「宋体」、「四号字」作为正文等。
Markdown 使普通文本具有格式，但它的原生语法并不支持修改字体、字号。为了实现丰富文字样式的需求，我们需要通过增加 HTML 标签实现此类效果。

设置字体
我是黑体字
尽量不要主动定义 Markdown 文档中字体，如果 Markdown 中字体定义过多，维护的成本会很高。当我们需要修改字体字号的时候，请尽量使用标签，因为标签语义明确。
写正式文档尽量使用全局字体，写个人文档可以更自由的发挥；

常用字体里表

字体中文/英文	字体写法中文/英文	预览效果使用的是中文
黑体 SimHei	`<font face="黑体">我是黑体字</font>` `<font face="SimHei">SimHei</font>`	我是黑体字
宋体 SimSun	`<font face="宋体">我是宋体字</font>` `<font face="SimSun">SimSun</font>`	我是宋体字
新宋体 NSimSun	`<font face="新宋体">我是新宋体字</font>` `<font face="NSimSun">NSimSun</font>`	我是新宋体字
仿宋 FangSong	`<font face="仿宋">我是仿宋字</font>` `<font face="FangSong">FangSong</font>`	我是仿宋字
楷体 KaiTi	`<font face="楷体">我是楷体字</font>` `<font face="KaiTi">KaiTi</font>`	我是楷体字
仿宋_GB2312 FangSong_GB2312	`<font face="仿宋_GB2312">我是仿宋_GB2312字</font>` `<font face="FangSong_GB2312">FangSong_GB2312</font>`	我是仿宋_GB2312字
楷体_GB2312 KaiTi_GB2312	`<font face="楷体_GB2312">我是楷体_GB2312字</font>` `<font face="KaiTi_GB2312">KaiTi_GB2312</font>`	我是楷体_GB2312字
微软雅黑 Microsoft YaHei	`<font face="微软雅黑">我是微软雅黑字</font>` `<font face="Microsoft YaHei">Microsoft YaHei</font>`	我是微软雅黑字

4.6.4 设置文字大小

设置字体大小
我是尺寸
使用标签 size 属性修改局部字号 size最小值：1 size最大值：7
提示：结合使用 我是黑体，绿色，尺寸为4 如：我是黑体，绿色，尺寸为4

4.6.5 设置文字背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）。

语法：

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

效果如下：

背景色yellow

4.6.6 强调

在Markdown中，强调文字的方式是通过改变字、词、句的风格，例如斜体或粗体。实现这种样式的方法是使用「星号 *」或者「下划线_」将需要强调的内容包裹起来。一个符号表示斜体，如 *斜体*；而两个符号表示粗体，如 **粗体**。这简单直观的语法让强调文字的添加变得轻松而灵活。

文本样式表

Style语法	键盘快捷键	示例	输出
`加粗或 __加粗__`	Command+B (Mac) 或 Ctrl+B (Windows/Linux)	`这是粗体文本`	这是粗体文本
`斜体或 _斜体_`	Command+I (Mac) 或 Ctrl+I (Windows/Linux)	`这是斜体文本`	这是斜体文本
`~~删除线~~`	-	`~~这是错误文本~~`	~~这是错误文本~~
`粗体和 _嵌入的斜体_`	-	`此文本 _非常_ 重要`	此文本非常重要
`*全部粗体和斜体*`	-	`*所有这些文本都很重要*`	所有这些文本都很重要
`==文本高亮显示==`	-	`==文本高亮显示==`	文本高亮显示

html语法	示例	输出
`<sub>下标</sub>`	`<sub>This is a subscript text</sub>`	_{这是下标文本}
`<sup>上标</sup>`	`<sup>This is a superscript text</sup>`	^{这是上标文本}
`删除线`	`<del>删除线</del>`	~~删除线~~
`这是一个下划线`	`<ins>这是一个下划线</ins>`	这是一个下划线

HTML 标签中 <del> 标签意义为「删除」，<ins> 标签意义为「插入」。删除用一条中划线代表已删除的内容，插入用一条下划线代表新插入的文本。通常删除线和插入线代表文章的修订过程，我们输出的文章要尽量避免使用太多辅助线效果。

4.6.7 键盘文本

使用 HTML 的 <kbd> 标签。
语法：

加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
使用：<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果如下：
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
使用：Ctrl+Alt+Del 重启电脑

4.7 列表

4.7.1 有序列表

要创建有序列表，请在订单项中添加数字和句点。数字不必按数字顺序排列，但列表应以数字开头。

Markdown语法	HTML	预览效果
1. First item 2. Second item 3. Third item 4. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 1. Second item 1. Third item 1. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 8. Second item 3. Third item 5. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 2. Second item 3. Third item 1. Indented item 2. Indented item 4. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item` `<ol>` `<li>Indented item</li>` `<li>Indented item</li>` `</ol>` `</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Indented item Indented item Fourth item

4.7.2 无序列表

要创建无序列表，请在订单项前添加破折号（-），星号（*）或加号（+）。缩进一个或多个项目以创建嵌套列表。

Markdown	HTML	预览效果
- First item - Second item - Third item - Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
* First item * Second item * Third item * Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
+ First item * Second item - Third item + Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
- First item - Second item - Third item - Indented item - Indented item - Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item` `<ul>` `<li>Indented item</li>` `<li>Indented item</li>` `</ul>` `</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Indented item Indented item Fourth item

4.7.3 任务列表

任务列表是将项目标记为 [] 或 [x]（未完成或已完成）的列表。
语法：

- [ ] a task list item
  - [x] list syntax required
  - [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

效果如下：

a task list item
list syntax required
normal formatting, @mentions, #1234 refs

incomplete
completed

4.8 链接

4.8.1 常用链接

语法：

[链接名称](链接地址)
测试链接：[垃圾度娘点击跳转](https://www.baidu.com)

效果如下：

测试链接：垃圾度娘点击跳转

网址和Email地址
使用尖括号可以很方便地把URL或者email地址变成可点击的链接。

<https://www.baidu.com>
<ceshi@example.com>

效果如下：
https://www.baidu.com
ceshi@example.com

4.8.2 带格式化的链接

强调链接, 在链接语法前后增加星号。要将链接表示为代码，请在方括号中添加反引号。

Rotten Baidu **[BAIDU](https://www.baidu.com)**.

效果如下：

Rotten Baidu BAIDU.

4.8.3 定位超链接

定位超链接可跳转至同一页面上的指定位置。
语法：

指定位置 {#超链接标识}
[超链接文本](#超链接标识)

### 列表 {#link-basic}
[跳转至 -> 基本超链接](#link-basic)

效果如下：
跳转至 -> 列表

⚠️：有的会不支持定位超链接所以可以了解一下

4.8.4 脚注超链接

脚注超链接可看作引用超链接与定位超链接的组合，可跳转至页尾或文末的脚注。

语法：

正文文本 [^脚注标识]
[^脚注标识]: 空格 脚注内容

说明：

脚注标识可以是数字或单词，但不能包含空格及制表符。
脚注标识仅在脚注符号与脚注内容间建立链接，在渲染时脚注按出现顺序编号。
脚注内容可放在除列表、引用以及表格等元素之外文档中的任何位置，在渲染时会统一放置在文末。

这里有一个示例脚注[^3]。
这里有第二个示例脚注[^label]。

效果如下：
这里有一个示例脚注¹。
这里有第二个示例脚注²。

⚠️注意：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

4.9 代码块与语法高亮

插入程序代码的方式有两种：使用反引号 `（~ 键）、使用缩进（Tab）。

插入行内代码，即插入一个单词或者一句代码的情况，使用 `code` 这样的形式插入。
插入多行代码，分别使用三个反引号（```）包裹多行代码。或者使用缩进。

行内代码
在一般的段落文字中，可以使用反引号 ` 来标记或插入代码区段。当然也可以标记文件名、关键词等。

C语言里的函数 `scanf()` 怎么使用？

效果如下：
C语言里的函数 scanf() 怎么使用？

多行代码

在需要高亮的代码块的前一行及后一行使用三个反引号 ```（~ 键）
同时第一行反引号后面，输入代码块所使用的语言，实现代码高亮。

如果只要插入代码片段的话，可以用两个反引号`包裹起来（在键盘左上角）。

`print()`

如果想插入整段代码的话，可以用两个```（三个反引号）将代码块包裹起来，并且可以在下面markdown的位置指定其他语言类型。

```markdown
<!-- 源代码 --> 
```

比如高亮 python3 代码块：

语法：

```python
#!/usr/bin/env python3
print("Hello, World!");
```

效果如下：

#!/usr/bin/env python3
print("Hello, World!");

html 代码块
语法：

<pre markdown>
    <code>
    这是一段代码块
    </code>
</pre>

效果如下：

    
    这是一段代码块

⚠️注意： 常规的 Markdown 语义，比如「星号 *」、「减号 -」、「大于号 >」等常规语义在代码块中的转义作用失效。

「代码块」和「行内代码」都是方便于显示特殊字符，相比「行内代码」，「代码块」更有利于显示段落文本，表现出原文本的换行及缩进效果。

在开发文档或者 IT 论文中，「行内代码」的使用频率非常高，不过由于「行内代码」不能根据代码自身的特效做语法高亮处理，所以相比「代码块」 效果，「行内代码」更适合用作简短的文字说明。

4.10 表格

表格有两种写法，一种就是前后不加|，和前后加|。必须是最开始和结束中间的不能省略！下面写两种，第一种简单方式和第二种原生方式。效果和内容都能实现看个人习惯，小编喜欢用原生的！

Markdown 表格包含三个部分：表头、分割线、数据。

表头用来对列名对象进行描述，也就是通常所说的列名；
数据用来展示每行的具体内容，数据是表格的核心；
分割线用来区分表头和数据，也是 Markdown 中表格定义的最基本语法要求。

Markdown 表格由「竖线 |」、「减号 -」、「冒号 :」三种符号组成。

竖线用来定义列，每两个竖线之间为一个单元格元素；
减号用来定义分割线，也就是分割表头和数据体；
冒号配合减号使用，用于定义列数据的对齐属性。

在 Markdown 中，可以制作表格，简单方式例如：

表头          | 表头           | 表头
------------ | ------------- | ------------
普通表格      | 普通表格        | 普通表格

效果如下：

表头	表头	表头
普通表格	普通表格	普通表格

或者也可以让表格两边内容对齐，中间内容居中，原生方式例如：

|  表头  |   表头  |  表头  |
|:------|:-------:|------:|
| 左对齐 | 居中对齐 | 右对齐 |
| 左对齐 | 居中对齐 | 右对齐 |

效果如下：

表头	表头	表头
左对齐	居中对齐	右对齐
左对齐	居中对齐	右对齐

加:可以实现左对齐，右对齐，居中。不加则默认为左对齐。

使用 :—: 设置内容和标题居中对齐
使用 :— 设置内容和标题居左对齐
使用 —: 设置内容和标题居右对齐

html简单实用：

<table>
<thead>
<tr>
<th align="left">表头</th>
<th align="center">表头</th>
<th align="right">表头</th>
</tr>
</thead>
<tbody><tr>
<td align="left">左对齐</td>
<td align="center">居中对齐</td>
<td align="right">右对齐</td>
</tr>
<tr>
<td align="left">左对齐</td>
<td align="center">居中对齐</td>
<td align="right">1右对齐</td>
</tr>
</tbody></table>

小结：

数据表格使用「竖线」、「减号」、「冒号」三种符号定义，包含表头、分割线、数据三部分；
数据表格必须包含 “表头” 和 “分割线”，否则无法渲染成功；
数据表格转换失败通常由于表头和分隔线的数量不相等所致，所以在遇到问题时，请首先检查单元格数量是否匹配；
Markdown 中的表格的原生支持只有固定格式，无法支持复杂格式，如果需要定义复杂的表格效果，请使用 html 的标签实现。

4.11 图片

简单图片使用实例

简单图片	说明	实例
`![图片描述](图片链接)`	普通链接	`![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png)`
`[![图片描述](图片链接)](跳转链接)`	带跳转链接	`[![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png)](https://www.baidu.com)`
`<img src="图片链接">`	HTML代码	`<img src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png">`
`<img src="图片链接" alt="图片alt" title="图片title">`	HTML代码	`<img src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" alt="图片alt" title="图片title"`

注意图片描述可以不写

调整图片使用实例

调整图片位置	说明	实例
`#pic_center`	图片居中	`![图片描述](图片链接#pic_center)`
`#pic_left`	图片靠左	`![图片描述](图片链接#pic_left)`
`#pic_right`	图片靠右	`![图片描述](图片链接#pic_right)`
`align`	居中对齐： align = “middle” 靠左对齐： align = “left” 靠右对齐： align = “right”	align属于img标签属性，使用起来也简单例如： `<img src="图片链接" align = "right"/>`

注意图片描述可以不写,调整图片的位置追加在图片链接的后面
最好将 <img> 标签包裹在  . . . 标签内使用，可以实现更多、更好的效果。

调整图片尺寸使用实例

调整图片尺寸	说明	实例
`=70x50`	宽x高	`![图片描述](图片链接 =70x50)`
`width="100%"`	html 横向占比	`<img src="图片链接" width="100%">`
`width="600"`	html 宽度	`<img src="图片链接" width="600">`
`height="600"`	html 高度	`<img src="图片链接" height="600">`

注意 =70x50等号 " = " 前面需要有一个空格，添加宽高都需要加一个空格！
调整位置和尺寸，两个结合使用举几个例子：
<img src=“图片链接” align = “right” width=“600” />

使用html p标签显示复杂的照片

 <img src=“图片链接” width=“400” /> 

语法：

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
</p>

效果如下：

带链接的地址做一个实例
语法：

[![这是图片](https://img-blog.csdnimg.cn/direct/6de94c45061d424f95dd253b6bce6ec9.webp)](https://www.baidu.com)

效果如下：

剧中图片实例
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png#pic_center)

靠右图片实例
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png#pic_right)

固定尺寸的图片
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png =70x50)

效果图：用截图效果看起来比较直观

在这里插入图片描述

五、Markdown的高级用法

5.1 反引号嵌套

反引号就是`
想要在代码块中表示```（如上面 Code Groups 代码所示），代码为
在这里插入图片描述

例如我在本文写了很多代码的实例都需要嵌套如：

```python
#!/usr/bin/env python3
print("Hello, World!");
```

上面显示内容，下面的是我截图显示的，在这里我们可以看到最外层用了代码格式的嵌套，如果用三个`那么会发生冲突，所以我们在最外层加了`，这样嵌套成功并可以在代码块种显示出我们写的内容。

这里我放了一张自己写作时的一张截图，以便你们能更好的理解！ ⬇️
在这里插入图片描述
简单来说，就是外层的反引号数要比内层的反引号数多一个（当然，严格来说只要内外层的反引号个数不同就行）请添加图片描述

5.2 上下角标

上标、下标是一种文字的特殊写法，常用于化学式、数学公式、引用文字的脚注等。

语法

使用 ^ ^ 进行上角标标注。
使用 ~ ~ 进行下角标标注。

我们可以通过html中 <sub> 和 <sup> 标签来实现上标和下标。

例如：
- 19^th^
- H~2~O

html使用：
数学公式
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
特殊语义
Windows 10 <sup>TM</sup>
化学公式
2KClO<sub>3</sub> ==== 2KCl + 3O<sub>2</sub>↑
嵌套使用
a<sup>b<sub>c<sup>d</sup></sub></sup>
特殊符号
IMOOC<sup>©</sup>

效果如下：

19^th
H₂O
html使用：
数学公式
a² + b² = c²
特殊语义
Windows 10 ^TM
化学公式
2KClO₃ ==== 2KCl + 3O₂↑
嵌套使用
a^{b_c^d}
特殊符号
IMOOC^©

请添加图片描述

5.3 标记

语法

使用 == == 进行标记。请注意两边需要有空格。

案例

小北 ==十分== 帅

效果如下：
小北十分帅

请添加图片描述

5.4 折叠代码块

语法示例
在Markdown中，折叠代码块通常是通过HTML的details和summary标签实现的。以下是一个简单的例子：

<details>
<summary>点击展开/折叠代码块</summary>

```python
print("Hello, World!")
```
</details>

<details>
<summary>展开查看</summary>
	<pre><code>
	System.out.println("Hello to see U!");
	</code></pre>
</details>

效果如下：
请添加图片描述
提示折叠代码块部分博客不支持，其中就有CSDN。😂

请添加图片描述

5.5 数学公式

在Markdown中，你可以使用LaTeX语法来插入数学公式。以下是一些常用的Markdown公式的示例：

Markdown 中的数学公式也分为「行内公式」和「独立公式」两种。
$...$ 或者 (…) 中的数学表达式将会在行内显示。
$$...$$ 或者 […] 或者 ```math 中的数学表达式将会在块内显示。

行内公式：$E = mc^2$

行块公式：
$$
i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.
$$

行内公式： $E = mc^2$

行块公式：
$i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.$

请添加图片描述

详细用法可参考：Markdown 数学公式详细总结
详细用法可参考：Markdown LaTex语法索引

请添加图片描述

5.6 流程图

Markdown流程图是一种通过简洁的文本语法来描述流程图的方式，它能够帮助你清晰地展示各种流程、决策和操作之间的关系。在Markdown中，你可以使用Mermaid语法来轻松绘制各种流程图。

语法示例
基本的流程图包含：流程图布局方向、几何图形和连接线三个部分组成。
以下是一个简单的Markdown流程图示例，采用Mermaid语法：

```mermaid
graph TB;
    A[开始] --> B[流程步骤1];
    B --> C[流程步骤2];
    C --> D[决策];
    D -- 是 --> E[执行操作1];
    D -- 否 --> F[执行操作2];
    E --> G[结束];
    F --> G;
```

流程方向：

符号/术语	含义
TB	从上到下（Top to Bottom）的流程方向
BT	从下到上（Bottom to Top）的流程方向
LR	从左到右（Left to Right）的流程方向
RL	从右到左（Right to Left）的流程方向
HZ	水平方向（Horizontal）的流程方向
VT	垂直方向（Vertical）的流程方向

说明：

graph TB;：指定这是一个有向图。
节点以及节点之间的关系通过-->来表示。
方框中的文字表示节点的名称，例如A[开始]表示开始节点。
决策节点后接两条分支线，分别表示决策的两个选项。
流程图的开始和结束通过特殊节点开始和结束表示。

效果如下：

在上述示例中，我们定义了一个简单的流程图，包括开始、流程步骤1、流程步骤2、决策、执行操作1、执行操作2和结束等节点，以及它们之间的关系。

详细用法可参考：Markdown 流程图绘制详解

请添加图片描述

5.7 时序图

时序图是一种UML图表，用于展示系统中对象之间的交互，特别关注对象之间消息的传递和状态的变化。在Markdown中，你可以使用特定的语法结构来轻松地绘制时序图，这通常需要依赖外部工具支持，比如PlantUML或Mermaid。

Mermaid是另一个流行的图表工具，同样支持时序图。以下是一个使用Mermaid的时序图示例：

```mermaid
sequenceDiagram
    participant Alice
    participant Bob

    Alice->>Bob: 消息1
    Bob-->>Alice: 消息2
```

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
—>>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
-x	末端为叉的虚线（表示异步）
-)	末端带有开放箭头的实线 (异步)
–)	末端带有开放箭头的虚线 (异步)

说明：

sequenceDiagram：定义一个时序图。
participant：定义参与者。
-->：表示消息的发送方到接收方的方向。

效果如下：

详细用法可参考：Markdown 时序图绘制详解

请添加图片描述

5.8 循序图

Markdown循序图是一种通过简单的文本语法描述交互过程的方式，它用于展示系统中不同部分之间的消息传递顺序。在Markdown中，你可以使用Mermaid语法来轻松地创建各种循序图。

在绘制时序图和循序图时，它们都是 UML（Unified Modeling Language）中用于描述系统交互的图形化工具。尽管它们在某些方面相似，但它们有一些关键区别：

时序图 强调消息的时间顺序，具体到消息的发送和响应。
循序图 更注重对象之间的交互和通信，不强调消息的时间顺序，更偏向于展示对象之间的整体协作。

时间轴表示方式：
时序图（Sequence Diagram）： 时序图强调的是消息在参与者之间的时间顺序，以及消息的传递顺序。在时序图中，垂直的时间轴通常沿着图的顶部，而消息的流向则从上到下。
循序图（Communication Diagram）： 循序图更注重对象之间的协作和通信。在循序图中，没有明确的时间轴，而是通过箭头的方向和顺序来表示消息的传递。

参与者排列：
时序图： 通常以水平或垂直方向排列参与者，表示消息的传递方向。
循序图： 通常以水平方向排列参与者，更强调对象之间的交互。

消息表示：
时序图： 强调消息的时间顺序，可以清晰地看到消息在不同参与者之间的传递。
循序图： 更注重对象之间的交互和通信，不强调消息的时间顺序。

使用场景：
时序图： 适用于强调交互中消息的时间顺序，特别是在强调同步执行和异步消息的情况下。
循序图： 更适用于展示对象之间的整体协作和通信，不强调消息的时间顺序。

语法示例
以下是一个简单的Markdown循序图示例，采用Mermaid语法：

```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 系统

    A->>B: 请求数据
    B-->>A: 返回数据
    A->>B: 发送指令
    B-->>A: 执行指令
```

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
—>>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
-)	末端带有开放箭头的实线 (异步)
–)	末端带有开放箭头的虚线 (异步)

说明：

sequenceDiagram：指定这是一个循序图。
participant关键字用于定义参与交互的角色，例如participant A as 用户表示用户是一个参与者。
A->>B: 请求数据表示A向B发起请求数据的消息。
B-->>A: 返回数据表示B向A返回数据的消息。

效果如下：

来个复杂的例子吧！

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
张三 ->> 李四: 他们是朋友？
李四 -->>王五: 你最近怎么样，王五？
李四 --x 张三: 我很好，谢谢!
李四 -x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

loop 回调自身
    李四->>李四: 自己爱自己
end
alt 回调其他
    李四->>王五: 我需要你
end
opt title
    赵六->>王五: 我需要你
    赵六 -->> 李四: 李四你呢
end
李四-->>张三: 打量着王五...

张三->> 王五: 很好... 王五, 你怎么样?
王五->> 张三: 很好... 王五, 你怎么样?
```

效果如下：

在上述示例中，我们定义了一个简单的循序图，包括用户（A）和系统（B）之间的消息传递过程。用户发送请求数据的消息，系统接收并返回数据，然后用户再发送指令，系统执行并返回结果。

请添加图片描述

5.9 甘特图

甘特图是一种项目计划图，以时间为基准，用于显示项目中各个任务的开始和结束日期。在Markdown中，你可以使用Mermaid语法轻松绘制甘特图。

语法示例
基本的甘特图由「标题」、「日期格式约定」、「分组及任务」三部分组成。
Markdown 甘特图通常使用 Mermaid 这样的工具来实现。以下是一些基本的语法元素：

```mermaid
gantt
title 这是个甘特图的栗子🌰
dateFormat MM-DD
section 软件协同开发课程
项目启动 :done,des1,03-09,7d
项目计划 :done,des2,after des1,6d
需求分析 :done,des3,after des2,9d
软件设计 :done,des4,after des3,12d
软件编码 :crit,active,des5,04-07,20d
软件测试 :des6,04-14,15d
项目交付 :des7,after des6,4d
```

说明：

gantt：指定这是一个甘特图。
title：设置甘特图的标题。
dateFormat：指定日期的格式。
section：定义一个项目阶段。
任务条目包括任务名称、状态（如done、active等）、描述、开始日期和持续时间。

在上面的示例中，我们展示了一个简单的软件协同开发课程的甘特图，其中包括项目启动、项目计划、需求分析、软件设计、软件编码、软件测试和项目交付等阶段。

通过使用Markdown的甘特图语法，你可以清晰地展示项目的时间轴和各项任务的关系，使项目计划更加直观和易于理解。

效果如下：

Mermaid 为 Markdown 扩展了使用普通文本生成甘特图的语法及渲染支持；
Mermaid可以用文本形式描述甘特图中的「标题」、「日期格式约定」、「分组及任务」
Mermaid 甘特图支持自定义节点样式，使其具备更丰富的表现力。

详细用法可参考： Markdown 甘特图绘制详解

请添加图片描述

5.10 类图

Markdown类图是一种用简单文本语法描述系统中类和它们之间关系的方式。使用Mermaid语法，你可以轻松地在Markdown中创建各种类图。

语法示例
以下是一个简单的Markdown类图示例：

```mermaid
classDiagram
    class Animal {
        +name: String
        +eat(): void
    }

    class Dog {
        +bark(): void
    }

    class Cat {
        +meow(): void
    }

    Animal <|-- Dog
    Animal <|-- Cat
```

说明：

classDiagram：指定这是一个类图。
class关键字用于定义类，例如class Animal表示定义了一个Animal类。
在类的花括号内部，你可以定义类的属性和方法。例如，+name: String表示类有一个名为name的字符串属性，+eat(): void表示类有一个名为eat的无返回值方法。
Animal <|-- Dog和Animal <|-- Cat表示Animal类是Dog和Cat类的父类。

在上述示例中，我们定义了一个简单的类图，包括Animal、Dog和Cat三个类，展示了它们之间的继承关系。Animal类是Dog和Cat类的父类，而每个类都有自己的属性和方法。

效果如下：

详细用法可参考： Markdown 类图绘制详解

请添加图片描述

5.11 状态图

Markdown状态图是一种通过简单的文本语法描述系统中状态及其之间转换关系的方式。使用Mermaid语法，你可以轻松地在Markdown中创建各种状态图。

语法示例
以下是一个简单的Markdown状态图示例：

```mermaid
stateDiagram
    [*] --> State1
    State1 --> [*]
    State1 : this is a string
    State1 : this is another string

    State1 --> State2
    State2 --> [*]
```

说明：

stateDiagram：指定这是一个状态图。
[*]：表示初始状态和结束状态。
State1和State2：表示系统中的具体状态。
State1 : this is a string和State1 : this is another string：在状态上方显示字符串注释。
State1 -> State2：表示状态之间的转换关系。

在上述示例中，我们定义了一个简单的状态图，包括两个状态（State1和State2）以及它们之间的转换关系。初始状态为[*]，系统从初始状态开始，经过一系列状态转换，最终回到结束状态[*]。

效果如下：

详细用法可参考： Markdown 状态图绘制详解

请添加图片描述

5.12 关系图

Markdown中的关系图通常用于表示各种元素之间的连接和依赖关系。这些图形可以包括节点和连接线，帮助读者更清晰地理解各个元素之间的相互关系。

语法示例
以下是一个使用Mermaid语法创建的简单关系图实例，表示一个简单的网络拓扑结构：

语法示例

```mermaid
graph TD
    A[Internet] -->|Requests| B[Server]
    B -->|Processes| C[Database]
    C -->|Returns| B
```

说明：
在这个示例中，节点A代表互联网，节点B代表服务器，节点C代表数据库。箭头表示数据流动的方向，帮助观察者理解这些元素之间的关系。

效果如下：

请添加图片描述

5.13 实体关系图

“实体关系模型 (或ER模型) Entity Relationship
Diagram描述了特定知识领域中相关的感兴趣事物。基本ER模型由实体类型 (对感兴趣的事物进行分类) 组成，并指定实体
(这些实体类型的实例) 之间可以存在的关系。” ——维基百科

E-R图也叫做实体-关系图(Entity Relationship Diagram)，是一种表示实体类型、属性和关系的方法，用来描述现实世界的概念模型。

实体关系图里的实体，通常指的是实体类别，并不是具体的一个实体。比如我们说的客户,就是指具有相似性的所有客户，而不是指具体的一个客户。实体关系图里的关系，也是对实休这一类别之间的关系描述。

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

效果如下：

详细用法可参考： Markdown 实体关系图详解

请添加图片描述

5.14 用户日记图

用户日记图是一种流程图，专注于展示用户与系统之间的交互过程和步骤。这种图表以用户的角度出发，描述用户在使用系统时的行为和决策流程。通过用户日记图，你可以更好地理解用户与系统之间的关系，有助于提高用户体验设计的质量。

语法示例

以下是一个使用Mermaid语法创建的简单用户日记图实例，表示一个用户在购物应用中的购物流程：

```mermaid
journey
    title 小北的工作日
    section 去工作
      泡茶: 5: 我
      上楼: 3: 我
      做点正事: 1: 我
    section 回家
      看电视: 5: 我, 猫
      在沙发上吃薯片: 5: 我
```

说明：
用户旅程图User Journey Diagram高度详细地描述了不同的用户在一个系统、应用程序或网站中完成特定任务的步骤。这种技术显示了当前（现状）的用户工作流程，并展示未来工作流程中需要改进的地方。

效果如下：

请添加图片描述

5.15 饼图

饼图（Pie Chart）是一种常见的数据可视化图表，用于展示数据的相对比例。它通常呈圆形，被划分成扇形，每个扇形的面积或角度表示相应数据的占比。饼图适用于展示数据的相对部分与整体的关系，尤其在展示分类数据的分布方面效果显著。

饼图的特点和用途

数据比例展示： 饼图直观地展示了各个部分在整体中的比例，使观众能够快速了解不同类别的相对大小。
简洁易懂： 饼图的简单结构使其易于理解，是一种简洁直观的数据呈现方式，适用于广泛的受众。
单一数据集： 饼图适合展示单一数据集的相对比例，不宜用于多个数据集的对比。

饼图的语法
使用Markdown语法表示饼图的方式取决于所使用的图表库。绘制饼图的语法如下：

```mermaid
pie
   title 看文章经常点赞的程序员的脱单情况
  "类别A" : 25
  "类别B" : 30
  "类别C" : 20
  "类别D" : 25
```

说明：
在这个实例中，我们展示了四个类别（A、B、C、D）的数据分布情况。类别B占比最大，为30%，而类别C占比最小，为20%。这种图表形式使用户能够迅速了解各类别在整体中的相对重要性。

效果如下：

详细用法可参考： Markdown 饼图绘制详解

六、扩展语法

文章目录

目录是文章内容的整体索引，是文章结构的最直观表现形式。

Markdown 为生成目录提供了快捷方式，大大降低了文章目录的编排复杂度。

在 Markdown 中，自动生成目录非常简单，只需要在恰当的位置添加 [TOC] 符号，凡是以 # 定义的标题都会被编排到目录中。

语法

[TOC]

目录适用于有章节标题的文章，通常用于跳转，所以适合在网页或 PDF 文件中使用。

小结：

Markdown 支持自动使用 [toc] 标记生成目录；
当自动生成的目录无法满足需求时，我们仍可通过「页内超链接」的形式定义目录；
由于 Markdown 没有分页的概念，所以目录中无法自动页码。

请添加图片描述

使用Emoji表情

在Markdown中，可以通过Emoji表情来增添文本的情感色彩或表达更直观的含义。Emoji是一种图形符号，广泛应用于各种通信平台和文档中。

Emoji的基本语法

在Markdown中，使用Emoji表情的语法很简单，只需在文本中插入相应的Emoji字符即可。以下是一些基本的Emoji表情及其对应的语法：

笑脸： 😊 :smile:
心心： ❤️ :heart:
大笑： 😄 :laughing:
太阳： ☀️ :sunny:

Emoji实例

以下是一个Markdown中使用Emoji表情的实例：

# 今天的心情 😊

我感觉今天的天气真的很好！❤️ 太阳明媚，心情格外愉快。希望每个人都有一个美好的一天！🌞

> "笑脸是最短的距离，连接人与人之间的桥梁。" 😄

实例说明：

在这个实例中，通过Emoji表情表达了作者今天的心情和对美好天气的感受。这种语法使文本更富有情感，增添了一些轻松愉快的氛围。

更多的表情链接：Markdown Emoji 表情大全
更多的表情链接：Emoji 参考手册

请添加图片描述

注释

Markdown 的注释可以通过三种方法实现：第一是通过 html 的  标记；第二可以通过样式隐藏段落内容，即 <div style="display:none">；第三是通过 Markdown 自身的解析原理实现。

因为 Markdown 文档是基于 HTML 实现的，所以可以通过 HTML 原生对注释的支持实现文档注释效果。

语法示例

**基于 HTML 标签的注释**
<!-- 这是一段被注释掉的文字 -->
这是一段没有被注释的文字


**基于 HTML 样式（部分博客不支持包括CSDN）**
<div style="display:none">
这是一段被注释掉的文字
</div>
这是一段没有被注释的文字

**通过 Markdown 解析达到注释效果**

[//]: (这是一段被注释掉的文字)
这是一段没有被注释的文字

效果如下：
基于 HTML 标签的注释

这是一段没有被注释的文字

基于 HTML 样式（部分博客不支持包括CSDN）

这是一段被注释掉的文字

这是一段没有被注释的文字

通过 Markdown 解析达到注释效果

这是一段没有被注释的文字

文档越复杂，注释的作用就越明显；
文档的注释可以通过多种形式实现，推荐使用 方式。

请添加图片描述

内嵌 HTML 标签

在Markdown中，你可以通过内嵌HTML标签来实现更复杂的排版和样式。以下是一些基本的HTML标签以及如何在Markdown中使用它们的例子：

加粗文本：
```
This text is bold
```
斜体文本：
```
This text is italicized
```

超链接：

<a href="https://www.example.com">Visit our website</a>

图片：
```
<img src="image.jpg" alt="Image">
```

无序列表：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

请注意，使用HTML标签可能会使Markdown文本在某些纯文本编辑器中显示不同，因此建议在支持HTML的Markdown渲染器中查看效果。

语法示例

<table>
    <tr>
        <td>小北编程</td>
    </tr>
</table>

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

效果如下：

小北编程

值班人员	星期一	星期二	星期三
值班人员	张三	李四	王五

如果想要调整文字位置可以使用，align 属性规定表格的表头单元格中内容的水平对齐方式。

语法

<th align="center">

属性值

值	描述
left	左对齐内容（默认值）。
right	右对齐内容。
center	居中对齐内容。
justify	对行进行伸展，这样每行都可以有相等的长度（类似于报纸和杂志）。
char	将内容对准指定字符。

请添加图片描述

转义字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

字符	名称
\	反斜杠（backslash）
`	反引号（backtick）
*	星号（asterisk）
_	下划线（underscore）
{ }	花括号（curly braces）
[ ]	方括号（brackets）
< >	尖括号（angle brackets）
( )	圆括号（parentheses）
#	井号（pound sign）
+	加号（plus sign）
-	减号（minus sign）
.	句点（dot）
!	感叹号（exclamation mark）
\|	管道符（pipe）

在Markdown中，使用反斜杠可以让这些字符显示而不被解释为Markdown语法的一部分。希望这份整理对你有帮助！

七、工具

国内博客平台：CSDN、简书、掘金、博客园、知乎等。
这些自带的编辑工具支持的都不错，可以直接使用。当然也可以使用本地的软件编辑。
本地 Typora、Sublime Text、TEXTS
在线 markdown、CodeMirror
还有很多如VSCode等编程软件都很好的支持了Markdown，好了不多说了根据自己的爱好选择吧。

八、总结

在这里，我想分享一下，这篇文章从整理到最后的完稿，花费了好多天的心血和努力。有时候确实会想要偷懒，不想再写下去，但是每当看到过去的文章受到大家的关注、点赞、以及收藏，就仿佛得到了一种强大的动力。你们的支持是我坚持写作的动力源泉。我不敢说这篇文章写得最好，但我敢说，我尽可能做到了最全面。

如果您喜欢这篇文章，希望大家可以给予👉关注✨点赞👍以及收藏📂。你们的每一次支持都是我写作的动力，也是对我最大的鼓励。感激之情溢于言表，谢谢大家！💖

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！

演示注脚内容
语法：

[^3]: 这是第一个示例脚注的内容。 
[^label]: 这是第二个示例脚注的内容。

效果如下：

这是第一个示例脚注的内容。 ↩︎
这是第二个示例脚注的内容。 ↩︎

小北编程

关注

27
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
Markdown 语法总结【从入门到精通一篇就够了】

Markdown 语法总结【从入门到精通一篇就够了】这篇文章在这里，我想分享一下，这篇文章从整理到最后的完稿，花费了好多天的心血和努力。有时候确实会想要偷懒，不想再写下去，但是每当看到过去的文章受到大家的关注、点赞、以及收藏，就仿佛得到了一种强大的动力。你们的支持是我坚持写作的动力源泉。我不敢说这篇文章写得最好，但我敢说，我尽可能做到了最全面。
复制链接

扫一扫