当前位置：首页 > news >正文

CSDN博客：Markdown编辑语法教程总结教程（中）

news 来源：原创 2025/8/25 5:43:11

❤个人主页：折枝寄北的博客

Markdown编辑语法教程总结

前言
1. 列表
- 1.1 无序列表
- 1.2 有序列表
- 1.3 待办事项列表
- 1.4 自定义列表
2. 图片
- 2.1 直接插入图片
- 2.2 插入带尺寸的图片
- 2.3 插入宽度确定，高度等比例的图片
- 2.4 插入高度确定宽度等比例的图片
- 2.5 插入居中的图片
- 2.6 插入居中并且带尺寸的图片
- 2.7 插入居右的图片
3. 链接
4. 代码片
5. 表格
- 5.1 简单表格
- 5.2 表格文本位置
6. 注脚
7. 注释
感谢您的阅读支持！！！
后续会持续更新的！！！
文末投票支持一下！！！

前言

在如今这个信息爆炸的时代，知识的分享与传播变得尤为重要，而博客无疑是其中的关键载体之一。CSDN作为国内知名的技术社区平台，为无数技术爱好者提供了展示自我、交流学习的空间。在使用 CSDN 博客进行创作的过程中，Markdown 编辑器无疑是提升写作效率、打造美观文章格式的得力工具。

回首过往，我初涉博客创作领域时，面对Markdown编辑器也是一头雾水。那些看似简单的符号和规则，仿佛是一道难以逾越的门槛，让我在创作过程中走了不少弯路。但凭借着对知识分享的热情和坚持不懈的探索，我逐渐掌握了 Markdown 编辑器的精髓，体会到了它为写作带来的便捷与高效。

如今，我将自己在学习 CSDN Markdown 编辑语法过程中的经验与心得进行总结，整理成这篇教程。希望能为那些和曾经的我一样，对 Markdown 编辑器感到迷茫的新手朋友们提供一份清晰的学习指南，让大家能够快速上手 CSDN Markdown编辑器，专注于优质内容的创作，轻松打造出排版精美的博客文章，在知识分享的道路上更加顺畅地前行。

在这篇博客之前，我已经写了上篇，在上篇中有“基础介绍，创作助手，目录，标题和文本样式”的使用介绍，有需要的朋友可以去看看！！！
CSDN博客：Markdown编辑语法教程总结教程（上）

1. 列表

1.1 无序列表

无序列表的表示方法有三种：

可以使用一个“ - ”放在开头来实现效果
可以使用一个“ * ”放在开头来实现效果
可以使用一个“ + ”放在开头来实现效果

你可以选择在上方的工具区域选择“ 无序 ”选项来进行无序列表的实现，或者也可以自己打出相应符号来进行书写。（他们也可以实现层级效果）

最终效果示例如下：
在这里插入图片描述

1.2 有序列表

有序列表的实现十分简单，与标题类似，只是在文本前无需加上“ # ”
只需要打出对应数字加“ .(空格) ”即可实现有序列表效果。
或者在菜单区域选择“ 有序 ”选项即可实现操作。

1. 折枝寄北列表示例1
2. 折枝寄北列表示例2
3. 折枝寄北列表示例3

最终效果示例如下：
在这里插入图片描述

1.3 待办事项列表

任务完成与否列表的实现可以通过在下单区域选择“ 待办 ”选项或者在键盘输入“ -[ ] ”来实现效果。
你可以复制以下文案进行尝试：

 - [ ] 折枝寄北计划任务- [x] 折枝寄北完成任务

最终效果示例如下：

在这里插入图片描述

1.4 自定义列表

在Markdown编辑器语法中，除了有序列表，无序列表和待办事项列表外，还有自定义列表可以使用。

自定义列表以冒号（:）为开头，后面即为表格内容。
你可以复制以下内容进行尝试：

折枝寄北的列表示例
: 枝寄北任务1
: 折枝寄北任务2

最终效果示例如下：
在这里插入图片描述

2. 图片

在mark逗我呢编辑器中插入图片需要满足相应的语法规则：

! [填写图片的替代文本](URL地址可选title属性)

Markdown编辑器中插入图片，我们需要使用感叹号（!）后跟方括号（[]）和圆括号（()）的语法结构。方括号中填写图片的替代文本（alt text），这有助于在图片无法加载时理解图片内容；圆括号中则填写图片的URL地址。此外，圆括号内还可以选择性地添加title属性，为图片提供额外的提示信息。

2.1 直接插入图片

如果直接插入一张名为“example.jpg”的图片，并为其添加替代文本“示例图片”，可以这样做：

语法是这样的：

![示例图片](example.jpg)

以下我们用官方图片作为介绍：
官方示例图片地址
https://iblog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png

使用示例图片进行代替：https://iblog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png替换example.jpg

在这里插入图片描述

最终显示效果如下：
图片: Alt

2.2 插入带尺寸的图片

想插入带有尺寸的图片，需要对原始图片的语法结构加入尺寸要素：

原始图片尺寸的语法是这样的：![Alt](https://img-home.csdnimg.cn/images/example.jpg)调整图片尺寸后的语法是这样的：![Alt](https://img-home.csdnimg.cn/images/example.jpg =60x60)

二者的区别在于我们在最后对图片
的尺寸进行的一定限定（加入了“=60x60” ）

最终效果如下所示：
在这里插入图片描述

带尺寸的图片: Alt

2.3 插入宽度确定，高度等比例的图片

同上的要素添加类似，不再进行赘述，只需要添加“=60x”在（）末尾中即可

![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =60x)

宽度确定高度等比例的图片: Alt

2.4 插入高度确定宽度等比例的图片

同上的要素添加类似，不再进行赘述，只需要添加“=x80”在（）末尾中即可

![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png =x80)

高度确定宽度等比例的图片: Alt

2.5 插入居中的图片

同上的要素添加类似，不再进行赘述，只需要添加“#pic_center”在（）末尾中即可

![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center)

居中的图片: Alt

2.6 插入居中并且带尺寸的图片

同上的要素添加类似，不再进行赘述，只需要添加“#pic_center =60x60”在（）末尾中即可

![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_center =60x60)

居中并且带尺寸的图片: Alt

2.7 插入居右的图片

同上的要素添加类似，不再进行赘述，只需要添加“#pic_right”在（）末尾中即可

![Alt](https://i-blog.csdnimg.cn/blog_migrate/8f1b213356ed81d5a706d52c6ab7cb6d.png#pic_right)

居右的图片: Alt

3. 链接

Markdown链接的语法如下：

[链接文本](链接地址 可选title属性)
链接: [link](https://www.csdn.net/)

其中，链接文本是显示在文档中的文本，点击它会跳转到链接地址所指定的页面。

可以在上方的工具栏中通过超链接添加或者通过语法说明也可以

在这里插入图片描述

4. 代码片

代码片的插入可以根据编程语言的不同，最终的显示效果也会有些许不同。
可以使用使用反引号(`)来插入代码块，并指定代码的语言。
在这里插入图片描述

5. 表格

Markdown编辑器创建表格，这样让数据在文档中展示更为简洁，变得更直观。
在Markdown中，你可以使用竖线（|）来分隔表格的列，使用破折号（-）来定义表头。

5.1 简单表格

在这里插入图片描述

5.2 表格文本位置

在表头下方的分隔线中使用英文状态下的冒号（:），可以指定单元格内容的对齐方式。
冒号放在左边则左对齐，放在右边则右对齐，两边都放则居中对齐。这样就可以根据需要调整表格的展示效果了。
在这里插入图片描述

6. 注脚

可以在需要添加注脚的地方使用方括号和脱字符号（[^注脚标识]）来标记注脚，然后在文档的末尾使用相同的注脚标识来定义注脚的内容

一个具有注脚的文本。[^1][^1]: 注脚的解释

7. 注释

这个注释是可以进行及时查看内容，只需要放把光标放在虚线上，即可实现查看效果。

通过

*[添加术语 ]：解释内容

Markdown将文本转换为 HTML。

在这里插入图片描述

Markdown编辑语法教程总结

前言

1. 列表

1.1 无序列表

1.2 有序列表

1.3 待办事项列表

1.4 自定义列表

2. 图片

2.1 直接插入图片

2.2 插入带尺寸的图片

2.3 插入宽度确定，高度等比例的图片

2.4 插入高度确定宽度等比例的图片

2.5 插入居中的图片

2.6 插入居中并且带尺寸的图片

2.7 插入居右的图片

3. 链接

4. 代码片

5. 表格

5.1 简单表格

5.2 表格文本位置

6. 注脚

7. 注释

感谢您的阅读支持！！！

后续会持续更新的！！！

文末投票支持一下！！！

相关文章：