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

墨蓝 2022-12-18 06:59 74阅读 0赞

# 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](/images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png)`
 *  效果  
    ![Markdown][]

### 5. 分隔线 ###

使用多个“\*”。

*  语法  
    `***`
 *  效果
    
    --------------------

## 三、列表 ##

### 1. 有序列表 ###

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

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

1.  第一个
2.  第二个

### 2. 无序列表 ###

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

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

### 3.任务列表 ###

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

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

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

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

## 四、表格 ##

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

*  语法
    
        |标题1|标题2|标题3|
        |--|--|--|
        |内容1|内容2|内容3|
 *  效果
    
    <table> 
     <thead> 
      <tr> 
       <th>标题1</th> 
       <th>标题2</th> 
       <th>标题3</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>内容1</td> 
       <td>内容2</td> 
       <td>内容3</td> 
      </tr> 
     </tbody> 
    </table>

## 五、代码 ##

### 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. 文字 ###

*  颜色：`<font color=“#18b566”>颜色</font>`
 *  大小：`<font size=“20”>大小</font>` 在CSDN中暂不生效
 *  **加粗**：`<b>加粗</b>`
 *  *斜体*：`<i>斜体</i>`
 *  下划线：`<u>下划线</u>`
 *  删除线：`<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>
 *  效果
    
    <table> 
     <tbody> 
      <tr> 
       <th>班级</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> 
     </tbody> 
    </table>

#### 支持对齐方式自定义 ####

*  语法
    
        <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>
 *  效果

<table> 
 <tbody> 
  <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> 
 </tbody> 
</table>

### 3. 图片 ###

### 大小 ###

*  语法
    
        <img src="/images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png" width = "100" height = "100"  />
 *  效果  
    ![Markdown][]

### 布局 ###

*  语法
    
        <div align=left>
        		<img src="/images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png" width = "100" height = "100"/>
        	</div>
        	<div align=center>
        		<img src="/images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png" width = "100" height = "100"/> 
        	</div>
        	<div align=right>
        		<img src="/images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png" width ="100" height = "100"/>
        	</div>
 *  效果
    
    ![Markdown][]

![Markdown][]

## 其他 ##

更多Markdown指南：

*  [Markdown指南 - 点击跳转 ][Markdown_ - _]

[-]: https://www.baidu.com
[Markdown]: /images/20221122/c0d53a514dec46a3a73be3ca91db75a0.png
[Markdown_ - _]: https://www.markdown.xyz/