csdn——markdown常用写作技巧

文章目录

一、标题
- 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)

效果如下所示：
点击跳转至我的博客主页

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

当然也可以用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">

效果如下所示：

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

当然也可以用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：
![文字描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png =100x100)
//效果图为图2：
![文字描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png =200x)//写法二：<img src="网址" width="30%"> 如下代码所示：
//其中30%可根据需求设定。如下代码所示：
//效果图为图3：
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png" width="20%">//写法三：<img src="网址" width="120" height="120"> 如下代码所示：
//其中120可根据需求设定。如下代码所示：
//效果图为图4：
<img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png" width="120" height="120">

效果如下所示：

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

2、调整格式：

原代码：

![文字描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png =100x)

调整后代码：

//写法：
//居中：      ![文字描述](图片网址#pic_center =100x100)
//左对齐：    ![文字描述](图片网址#pic_left =100x100)
//右对齐：    ![文字描述](图片网址#pic_right =100x100)
![文字描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTIyNzk5ODUwNzQsMjgxMjEzMzY4MyZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png#pic_center =100x)

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

四、字体样式

1、字体：

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

效果如下所示：

我是默认字体
我是楷体字

2、字号大小：

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

效果如下所示：

我是5号字体

3、格式：

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

效果如下所示：

斜体文本
斜体文本

粗体文本
粗体文本

粗斜体文本
粗斜体文本

4、字体颜色：

<font color="blue">蓝色</font>
<font color=#C90000>红色</font>

效果如下所示：

蓝色
红色

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

五、文本样式

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>

背景色：yellow

背景色：#D2F9F4

六、插入表格

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

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

效果如下所示：

表头一	表头二	表头三
单元格	单元格	单元格

2、三种对齐方式

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

效果如下所示：

左对齐	右对齐	居中对齐
单元格	单元格	单元格

七、分隔线

***
---

八、删除线

~~带删除线文本~~

效果如下所示：

带删除线文本

九、下划线

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

效果如下所示：

带下划线文本

十、区块

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

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

效果如下所示：

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

2、区块嵌套：

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

效果如下所示：

第一层

第二层

第三层

十一、列表

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

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

效果如下所示：

第一列

第二列

第三列

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

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

效果如下所示：

第一列
第二列
第三列

注意：.后要空格。

3、区块中使用列表

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

效果如下所示：

第一项

第二项
第一个

第二个

4、列表中使用区块

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

效果如下所示：

第一项

第一个
第二个
第二项

第一个
第二个

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

十二、段落中显示代码

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

效果如下所示：

printf("Hello world!");

附：反引号如何打出来？

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

十三、索引

<a href="#one">第一部分</a>
<a href="#two">第二部分</a>
<a href="#three">第三部分</a>
<br/>
正文内容：
<br/>
<a id="one">这<br/>里<br/>是<br/>第<br/>一<br/>部<br/>分<br/>的<br/>内<br/>容<br/></a>
<br/>
<a id="two">这<br/>里<br/>是<br/>第<br/>二<br/>部<br/>分<br/>的<br/>内<br/>容<br/></a>
<br/>
<a id="three">这<br/>里<br/>是<br/>第<br/>三<br/>部<br/>分<br/>的<br/>内<br/>容<br/></a>

效果如下所示：

第一部分
第二部分
第三部分

正文内容：

这
里
是
第
一
部
分
的
内
容

这
里
是
第
二
部
分
的
内
容

这
里
是
第
三
部
分
的
内
容