markdown教程（记录）

顶部

  1. Markdown 简介
    1. Markdown 应用
    2. Markdown 编辑器
  2. 语法
    1. 标题
      1. 类 Setext 形式
      2. 类 atx 形式
    2. 字体、字号与颜色
    3. 段落
    4. 列表
      1. 无序列表
      2. 有序列表
      3. 列表嵌套
    5. 区块、引用
    6. 代码
      1. 单行代码块
      2. 多行代码块
    7. 链接
    8. 图片
    9. 表格
    10. 分割线
    11. 脚注
  3. 页内跳转
  4. Markdown 高级技巧
    1. 支持的 HTML 元素
      1. 删除线
      2. 下划线
      3. 上标
      4. 下标

Markdown 简介

markdown

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。通过简单的标记语法，它使我们在双手不离开键盘的情况下，可以对文本进行一定程度的格式排版。可以导出 PPT、LaTex、HTML、Word、PDF、Epub、JPG 等多种格式的文档，文档后缀为 .md。

Markdown 应用

写过博客或者 github 上面的文档的，应该知道 Markdown 语法的重要性！！

Markdown 学习成本低，上手比较快，是现在受人喜爱的写作语言，能被使用来写博客、笔记等等！

专用编辑器

VSCode 或者 Typora!!!
这次笔记内容都由 Typora 编辑器来讲解 Markdown 的语法，Typort 是一款支持实时预览的 Markdown 文本编辑器。Typora 支持 MacOS 、Windows、Linux 平台，且包含多种主题，编辑后直接渲染出效果。

支持导出HTML、PDF、Word、图片等多种类型文件。

Typora 官网：https://typora.io/

Typora 官网图片

语法

标题

Markdown 标题有两种格式：类 Setext 和类 atx 形式。

使用 = 和 - 标记一级和二级标题 (类 Setext 形式)

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），如下：

tips: 任何数量的 = 和 - 都可以有效果。

这是一级标题H1
=============

这是二级标题H2
-------------

显示效果如下图：

标题

使用 # 号标记 (类 Atx 形式)

类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶。

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

tips：# 号和文字间至少得有一个空格

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果如下图：

各级标题

字体、字号与颜色

字体、字号与颜色可以用 HTML 的语法元素来实现。

规定文本的字体、字体尺寸、字体颜色。

  • 字体

    常用：斜体、粗体、粗斜体

// 斜体文本: 在需要标注为斜体文本前及斜体文本结尾，输入一个星号 * 或者一个下划线 _
*你好哇！！！*
_你好哇！！！_
<i>你好哇！！！</i>


// 文本加粗: 在需要标注为粗体文本前及粗体文本结尾，输入两个星号 ** 或者两个下划线 _
**你也是。**
__你也是。__
<b>你也是。</b>

// 粗斜体文本: 可以在需要标注为粗斜体文本前及粗斜体文本结尾，输入三个星号 *** 或者三个下划线 _
***我们一起吧***
___我们一起吧___
<b><i>我们一起吧</i></b>

​ 显示效果如下图：

字体文本

  • 字号

    <font size=8>8号</font>
<font size=4>4号</font>
<font size=1>1号</font>

    显示效果如下图：

字号

  • 颜色

    HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

    每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

    <font color="red">红色</font>
<font color="#FFFF00">黄色</font>
<font color="#FF00FF">紫色</font>

    显示效果如下图：

颜色

​ 这是 RGB 颜色查询对照表(不用记住，需要即随时查询)：

​ https://www.sojson.com/rgb.html

段落

段落的换行是连续两个以上空格+回车

在段落后面使用一个空行来表示重新开始一个段落
第三种是使用html语言换行标签

段落

列表

无序列表

无序列表使用 * 、+ 或是 - 作为列表标记

tips：这些标记后面要添加一个空格，然后再填写内容

* Item 1
* Item 2
    * item 3a
    * item 3b
    
- Item 1
- Item 2

+ Item 1
+ Item 2

// 任务列表

- [ ] Checkbox off
- [x] Checkbox on

显示效果如下图：

无序列表

有序列表

有序列表使用数字并加上 . 号来表示

tips：同样！！这些标记后面要添加一个空格，然后再填写内容

1. Item 1
2. Item 2
    a. item 3a
    b. item 3b

显示效果如下图：

有序列表

嵌套列表

列表嵌套只需在子列表中的选项前面添加四个空格(或在符号 - 前使用 tab)即可：

1. 1：
    - 1.1
    - 1.2
2. 2：
    - 2.1
    - 2.2

显示效果如下图：

嵌套列表

区块、引用

区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：

区块、引用书写规范：

> CSDN

显示效果如下图：

区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：

区块、引用书写规范：

> CSDN
>> Java
>>> 语法

显示效果如下图：

代码

往文章插入代码有两种方式，内嵌代码以及代码区块

单行代码块：内嵌代码

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

例子: `new Girl();` 内嵌代码

显示效果如下图：

代码

多行代码块：代码区块

你也可以用 ` 包裹一段代码，并指定一种语言（也可以不指定）：

```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
```

显示效果如下图：

多行代码块

链接

链接使用方法如下：

// [链接名称](链接地址)
[CSDN](https://www.csdn.net/)


// <链接地址>
<https://www.csdn.net/>

CSDN

https://www.csdn.net/

我们可以通过变量来设置一个链接，变量赋值在文档末尾进行：

// 这个链接用 link 作为网址变量 [CSDN][link]
[link][CSDN]
// 为变量赋值（网址）
[CSDN]: https://www.csdn.net/

CSDN

图片

图片语法格式：

  • 开头一个感叹号 !
  • 接着一个方括号，里面放上图片的替代文字
  • 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。
![alt 属性文本](图片地址)

![alt 属性文本](图片地址 "可选标题")

带链接的图片

// 正常图片
![author](https://img2023.cnblogs.com/blog/2121126/202305/2121126-20230527001035586-931220867.png)

// 图片 + 链接
[![author](https://img2023.cnblogs.com/blog/2121126/202305/2121126-20230527001035586-931220867.png)](https://www.cnblogs.com/ikunblog/)

显示效果如下图：

正常图片：

author

链接包住图片，点击即跳转对应的链接：

author

如何一行放两张图片(图片并排显示)：
第一种：emm，在本地拼接完成后，放上面

第二种：
（要一张图片接着一张图片的写，中间不能有换行。如果换行的话则图片也换行!!）

![描述](图片链接)![描述](图片链接)![描述](图片链接)

第三种（借助前端知识）：
居中并排：注意两个之间不要换行，如果图片太大的的话可以设置图片的宽度或者高度，这样图片就会缩放。注意不要同时设置宽度和高度，这样的话不好把握宽度和高度的比例，可能会是图像变形。

<center class="half">
    <img src="图片链接" width="200"/><img src="图片链接" width="200"/><img src="图片链接" width="200"/>
</center>

实例：

<center class = "half">
	<img src = "HTML初识.assets/image-20230430114647258.png"  width = "50%"><img src = "HTML初识.assets/image-20230430114725279.png"  width = "50%" >
</center>

左对齐并排：还是注意所有的标签写在一行中不要换行。

<figure class="third">
    <img src="图片链接" width="200"/><img src="图片链接" width="200"/><img src="图片链接" width="200"/>
</figure>

表格

制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

// 表格使用格式:

|  学号   | 姓名  |
|  ----  | ----  |
| 20181001  | 小明 |
| 20181002  | 小红 |

显示效果如下图：

表格

表格对齐方式：

  • -: 设置内容和标题栏居右对齐
  • :- 设置内容和标题栏居左对齐
  • :-: 设置内容和标题栏居中对齐
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 内容居左 | 内容居右 | 内容居中 |

显示效果如下图：

表格对齐

分割线

你可以在一行中用三个以上的 * 、- 、_ 来建立一个分隔线，行内不能有其他东西。你也可以在 * 或是 - 中间插入空格。 (或者用 HTML 标记用法 <hr /> ）

下面每种写法都可以建立分隔线：

***

---

* * *

- - -

*****

-----

显示效果如下图：

分割线

脚注

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

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


[^1]: 注脚的解释,文本的补充说明

显示效果如下图：
脚注

页内跳转

实现文章内跳转方式: 点击跳转名称，就跳转到对应 id 的 span 处
[跳转名称](#跳转id)

<span id="跳转id"> </span>

tips: <span> </span> 推荐中间留空格或者文字

// 中间是空白， <span>标签不能够被隐藏
顶部<span id="0"> </span>


[回到顶部](#0)

显示效果如下图：

页内跳转

Markdown 高级技巧

支持的 HTML 元素

删除线

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可 (或者用 HTML 标记用法 <del> 、<strike>)

CSND
~~CSDN~~
// <del> 标签用于定义文档中已被删除的文本
<del>CSDN</del>
// <strike> 标签用于定义加删除线文本
<strike>CSDN</strike>

显示效果如下图：

删除线

下划线

下划线可以通过 HTML 的 <u> 标签来实现：

<u>该行文字已被添加下划线</u>

显示效果如下图：
下划线

上标

上标可以通过 HTML 的 <sup> 标签来实现：

i<sup>kun</sup>

显示效果如下图：
上标

下标

下标可以通过 HTML 的 <sub> 标签来实现：

j<sub>kun</sub>

显示效果如下图：
下标jkun

回到顶部
posted @   sailJamie  阅读(54)  评论(0)  编辑  收藏  举报
相关博文：
· 数组去重方法总结（JavaScript 记录）
· Markdown语法学习 精简版
· 学习笔记之MarkDown
· Markdown 学习总结笔记合集
· markdown语法学习预览
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示