csdn——markdown常用写作技巧

快来打我* 2023-03-02 04:53 168阅读 0赞

### 文章目录 ###

*  一、标题
 *   *  1、使用 \# 号可表示 1-6级标题
 *  一级标题
 *   *  二级标题
     *   *  三级标题
         *   *  四级标题
             *   *  五级标题
                 *   *  六级标题
     *  2、使用 = 和 - 可标记一级和二级标题
 *  这是一个一级标题
 *   *  这是一个二级标题
 *  二、插入链接或图片
 *   *  1、插入链接：
     *  2、插入图片：
 *  三、调整图片大小和格式
 *   *  1、调整大小：
     *  2、调整格式：
 *  四、字体样式
 *   *  1、字体：
     *  2、字号大小：
     *  3、格式：
     *  4、字体颜色：
 *  五、文本样式
 *   *  1、对齐方式：
     *  2、背景色：
 *  六、插入表格
 *   *  1、使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行
     *  2、三种对齐方式
 *  七、分隔线
 *  八、删除线
 *  九、下划线
 *  十、区块
 *   *  1、特殊符号>用于段首可以进行强调，被强调的文字部分将会高亮显示
     *  2、区块嵌套：
 *  十一、列表
 *   *  1、无序列表：使用\*或+或-标识
     *  2、有序列表：使用数字加.标识
     *  3、区块中使用列表
     *  4、列表中使用区块
 *  十二、段落中显示代码
 *  十三、索引

# 一、标题 #

## 1、使用 \# 号可表示 1-6级标题 ##

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

**效果如下所示：**

# 一级标题 #

## 二级标题 ##

### 三级标题 ###

#### 四级标题 ####

##### 五级标题 #####

###### 六级标题 ######

## 2、使用 = 和 - 可标记一级和二级标题 ##

这是一个一级标题
    =
    这是一个二级标题
    -

**效果如下所示：**

# 这是一个一级标题 #

## 这是一个二级标题 ##

# 二、插入链接或图片 #

## 1、插入链接： ##

**  例如插入我的博客主页链接：**

//写法：[文字说明](网址)
    [点击跳转至我的博客主页](https://blog.csdn.net/qq_43652492)

**效果如下所示：**  
[点击跳转至我的博客主页][Link 1]

**  注意：中括号和小括号都是英文的。**

**  当然也可以用markdown编辑器操作栏的“超链接”，直接输入网址点击确认，再修改文字说明即可。**

## 2、插入图片： ##

//写法一：![文字](图片网址) 如图1所示：
    ![文字描述](https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279985074,2812133683&fm=26&gp=0.jpg)
    
    //写法二：<img src="网址"> 如图2所示：
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279985074,2812133683&fm=26&gp=0.jpg">

**效果如下所示：**  
![文字描述][format_png]  
![u_2279985074_2812133683_fm_26_gp_0.jpg][]

**  注意：感叹号、中括号和小括号都是英文的。**

**  当然也可以用markdown编辑器操作栏的“图片”，插入本地图片。**

# 三、调整图片大小和格式 #

## 1、调整大小： ##

**  由上图可以看出图片太大，影响博客的美观度，这时我们就需要对图片大小进行调整。**

**原代码：**

//写法一：
    ![文字描述](https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279985074,2812133683&fm=26&gp=0.jpg)
    
    //写法二：
    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279985074,2812133683&fm=26&gp=0.jpg">

**调整后代码：**

//写法一：![文字描述](图片网址 =100x100)
    //其中100x100为宽、高，可根据需求设定。高可以不写，但是x必须写。如下代码所示：
    //效果图为图1：
    ![文字描述](/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png =100x100)
    //效果图为图2：
    ![文字描述](/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png =200x)
    
    //写法二：<img src="网址" width="30%"> 如下代码所示：
    //其中30%可根据需求设定。如下代码所示：
    //效果图为图3：
    <img src="/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png" width="20%">
    
    //写法三：<img src="网址" width="120" height="120"> 如下代码所示：
    //其中120可根据需求设定。如下代码所示：
    //效果图为图4：
    <img src="/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png" width="120" height="120">

**效果如下所示：**

![文字描述][format_png]  
![文字描述][format_png]  
![format_png][]

![format_png][]

**  注意：=、width和height前面都有空格。**

## 2、调整格式： ##

**原代码：**

![文字描述](/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png =100x)

![文字描述][format_png]

**调整后代码：**

//写法：
    //居中： ![文字描述](图片网址#pic_center =100x100)
    //左对齐： ![文字描述](图片网址#pic_left =100x100)
    //右对齐： ![文字描述](图片网址#pic_right =100x100)
    ![文字描述](/images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png#pic_center =100x)

![文字描述][format_png_pic_center]  
![文字描述][format_png_pic_left]  
![文字描述][format_png_pic_right]

**  注意：调整大小可以看上面所述，这里的大小只是举例。**

# 四、字体样式 #

## 1、字体： ##

//用法：<font face="字体名">内容</font>
    
    <font>我是默认字体</font>
    <font face="楷体">我是楷体字</font>

**效果如下所示：**

我是默认字体  
我是楷体字

## 2、字号大小： ##

//用法：<font size="字号">内容</font>
    
    <font size="5">我是5号字体</font>

**效果如下所示：**

我是5号字体

## 3、格式： ##

*斜体文本*
    _斜体文本_
    
    **粗体文本**
    __粗体文本__
    
    ***粗斜体文本***
    ___粗斜体文本___

**效果如下所示：**

*斜体文本*  
*斜体文本*

**粗体文本**  
**粗体文本**

***粗斜体文本***  
***粗斜体文本***

## 4、字体颜色： ##

**效果如下所示：**

蓝色  
红色

**  注意：可以根据需求，同时设置字体、字号、颜色、格式等。**

# 五、文本样式 #

## 1、对齐方式： ##

//左对齐：
    <p align="left">左对齐</p>
    
    //右对齐：
    <p align="right">右对齐</p>
    
    //居中：
    <p align="center">居中</p>
    <center>居中</center>

**效果如下所示：**

左对齐

右对齐

居中

## 2、背景色： ##

**  标签的 style 属性不被支持，故只能借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。如下示例所示：**

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

<table> 
 <tbody> 
  <tr> 
   <td>背景色：yellow</td> 
  </tr> 
 </tbody> 
</table>

# 六、插入表格 #

## 1、使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行 ##

表头一|表头二|表头三|
    |:---:|:---:|:---:|
    |单元格|单元格|单元格|

**效果如下所示：**

## 2、三种对齐方式 ##

| 左对齐 | 右对齐 | 居中对齐 |
    | :-----| ----: | :----: |
    | 单元格 | 单元格 | 单元格 |

**效果如下所示：**

# 七、分隔线 #

***
    ---

--------------------

# 八、删除线 #

~~带删除线文本~~

**效果如下所示：**

带删除线文本

# 九、下划线 #

<u>带下划线文本</u>

**效果如下所示：**

带下划线文本

# 十、区块 #

## 1、特殊符号>用于段首可以进行强调，被强调的文字部分将会高亮显示 ##

>这段文字将被高亮显示······

**效果如下所示：**

> 这段文字将被高亮显示······

## 2、区块嵌套： ##

> 第一层
    >> 第二层
    >>> 第三层

**效果如下所示：**

> 第一层
> 
> > 第二层
> > 
> > > 第三层

# 十一、列表 #

## 1、无序列表：使用\*或+或-标识 ##

* 第一列
    + 第二列
    - 第三列

**效果如下所示：**

*  第一列

*  第二列

*  第三列

## 2、有序列表：使用数字加.标识 ##

1. 第一列
    2. 第二列
    3. 第三列

**效果如下所示：**

1.  第一列
2.  第二列
3.  第三列

**  注意：.后要空格。**

## 3、区块中使用列表 ##

> 1. 第一项
    > 2. 第二项
    >    - 第一个
    >    - 第二个

**效果如下所示：**

> 1.  第一项
> 2.  第二项
>     
>      *  第一个
>      *  第二个

## 4、列表中使用区块 ##

+ 第一项  
        > 第一个  
        > 第二个  
    + 第二项  
        > 第一个  
        > 第二个

**效果如下所示：**

*  第一项
    
    > 第一个  
    > 第二个
 *  第二项
    
    > 第一个  
    > 第二个

**  注意：需要在 > 前添加四个空格的缩进，或者按一下Tab键。**

# 十二、段落中显示代码 #

//可以用反引号把段落上的某个函数或片段的代码包起来
     `printf("Hello world!");`

**效果如下所示：**

`printf("Hello world!");`

**  附：反引号如何打出来？**

**  切换到英文输入法模式下，找到电脑键盘 Esc 下面的键，敲两下就出现了反引号。**

# 十三、索引 #

**效果如下所示：**

第一部分  
第二部分  
第三部分  
  
  
正文内容：  
  
  
这  
里  
是  
第  
一  
部  
分  
的  
内  
容  
  
  
  
这  
里  
是  
第  
二  
部  
分  
的  
内  
容  
  
  
  
这  
里  
是  
第  
三  
部  
分  
的  
内  
容

[Link 1]: https://blog.csdn.net/qq_43652492
[format_png]: /images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png
[u_2279985074_2812133683_fm_26_gp_0.jpg]: https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279985074,2812133683&fm=26&gp=0.jpg
[format_png_pic_center]: /images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png#pic_center
[format_png_pic_left]: /images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png#pic_left
[format_png_pic_right]: /images/20230208/de5211c070cd4b6f98bce1c9f4b0c92d.png#pic_right