上课做笔记，开会做记录，开发写文档，就用Markdown-CSDN博客

本文链接：https://blog.csdn.net/xiaohui_brook/article/details/109284301

Markdown

Markdown是一个轻量级的文档标记语言，支持代码高亮、列表、兼容html标签。

用这种标记语言可以非常方便的排版文章以及各大平台的适配，而且沉浸式的写作体验让你专注于写作而不是纠结于排版。

实在是工作生活之必备技能。

语法学习

一、标题

使用"#"号开头，空格后面跟内容，#号的数量代表标题级数：

语法
#### 标题四
##### 标题五
效果
标题四

标题五

二、内容

1. 文字

1.1. 加粗

使用“**”或“__”开头，使用“**”或“__”结尾。

语法
**我是粗体1**
__我是粗体2__
效果
我是粗体1
我是粗体2

1.2. 斜体

使用“*”或“_”开头，使用“*”或“_”结尾。

语法
*我是斜体1*
_我是斜体2_
效果
我是斜体1
我是斜体2

1.3. 删除

使用“~~”开头，使用“~~”结尾。

语法
~~我是删除线~~
效果
~~我是删除线~~

1.4. 转译

如果需要在文档中显示标记符号，可以是“\”转译。

语法
\*\*我是粗体1\*\*
\*我是斜体1\*
\~\~我是删除线\~\~
效果
**我是粗体1**
*我是斜体1*
~~我是删除线~~

2. 引用

使用">"号开头，空格后面跟内容，支持多层嵌套。

语法
> 我说：
> > 毛主席说：一代天骄成吉思汗只识弯弓射大雕
效果

我说：

毛主席说：一代天骄成吉思汗只识弯弓射大雕

3. 链接

使用“[]”放标题，使用“()”放链接。

语法
[百度-点击跳转](https://www.baidu.com)
效果
百度-点击跳转

4. 图片

使用“![]”放标题，使用“()”放图片链接。

语法
![Markdown](https://i-blog.csdnimg.cn/blog_migrate/1664e208cc09cb9a39f9f6e601dc2a00.png)
效果

5. 分隔线

使用多个“*”。

语法
***
效果

三、列表

1. 有序列表

使用具体编号开头，再加个"."，空格后跟内容。

语法
1. 第一个
2. 第二个
效果

第一个
第二个

2. 无序列表

使用“-/*/+”号开头，空格后跟内容。

语法
- 第一个
* 第二个
+ 第三个
效果
- 第一个
- 第二个
- 第三个

3.任务列表

使用“[ ]/[x]”开头，空格后跟内容。

语法
- [] 第一个，未完成
- [x] 第二个，已完成
效果

第一个，未完成
第二个，已完成

web渲染时需要结合无序列表中的“-”使用。

四、表格

表格的语法要略微复杂，直接看示例：

语法

|标题1|标题2|标题3|
|--|--|--|
|内容1|内容2|内容3|

效果
标题1 标题2 标题3
内容1 内容2 内容3

标题1	标题2	标题3
内容1	内容2	内容3

五、代码

1. 单行

使用“```”或“`”开头，使用“```”或“`”结尾。

语法
```var res = a+b;```
效果
var res = a+b;

2. 多行

使用“```”开头，可设置语言种类（支持主流绝大多数开发语言），使用“```”结尾。

语法
```javascript
var a = 1;
var b = 2;
```
效果
```
	var a = 1;
	var b = 2;
```

六、目录结构

day1-gulp1
├─ README.md
├─ gulpfile.js
├─ js
│  └─ main.js
├─ package-lock.json
├─ package.json
├─ src
│  ├─ css
│  │  ├─ style.css
│  │  └─ style1.css
│  ├─ index.html
│  └─ ts
│     └─ main.ts
└─ tsconfig.json

七、HTML标签

在原生Markdown无法满足需求的时候，我们还可以使用html标签。

1. 文字

颜色：颜色
大小：大小 ~~在CSDN中暂不生效~~
加粗：加粗
斜体：斜体
下划线：下划线
~~删除线~~：<s>删除线</s>

2. 表格

支持跨行跨列

语法

	<table>
		<tr>
			<th rowspan="2">班级</th>
			<th colspan="3">人数</th>
		</tr>
		<tr>
			<th>男生</th>
			<th>女生</th>
			<th>合计</th>
		</tr>
		<tr>
			<th>一班</th>
			<td>23</td>
			<td>21</td>
			<td>44</td>
		</tr>
		<tr>
			<th>二班</th>
			<td>25</td>
			<td>25</td>
			<td>50</td>
		</tr>
	</table>

效果

班级人数
男生女生合计
一班 23 21 44
二班 25 25 50

班级	人数
男生	女生	合计
一班	23	21	44
二班	25	25	50

支持对齐方式自定义

语法

<table>
  <tr>
    <th>左对齐</th>
    <th>右对齐</th>
    <th>居中对齐</th>
    <th>两端对齐</th>
  </tr>
  <tr>
    <td align="left">我是左对齐</td>
    <td align="right">我是右对齐</td>
    <td align="center">我是居中齐</td>
    <td align="justify">我是两端对齐</td>
  </tr>
</table>

效果

左对齐	右对齐	居中对齐	两端对齐
我是左对齐	我是右对齐	我是居中齐	我是两端对齐

3. 图片

大小

语法

<img src="https://i-blog.csdnimg.cn/blog_migrate/1664e208cc09cb9a39f9f6e601dc2a00.png" width = "100" height = "100"  />

效果

布局

语法

	<div align=left>
		<img src="https://i-blog.csdnimg.cn/blog_migrate/1664e208cc09cb9a39f9f6e601dc2a00.png" width = "100" height = "100"/>
	</div>
	<div align=center>
		<img src="https://i-blog.csdnimg.cn/blog_migrate/1664e208cc09cb9a39f9f6e601dc2a00.png" width = "100" height = "100"/> 
	</div>
	<div align=right>
		<img src="https://i-blog.csdnimg.cn/blog_migrate/1664e208cc09cb9a39f9f6e601dc2a00.png" width ="100" height = "100"/>
	</div>