csdn——markdown常用写作技巧

一、标题

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://i-blog.csdnimg.cn/blog_migrate/6461665d88a1d64cbdc71afa46e1dff5.png">

效果如下所示:
文字描述

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

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

三、调整图片大小和格式

1、调整大小:

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

原代码:

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

//写法二:
<img src="https://i-blog.csdnimg.cn/blog_migrate/6461665d88a1d64cbdc71afa46e1dff5.png">

调整后代码:

//写法一:![文字描述](图片网址 =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://i-blog.csdnimg.cn/blog_migrate/f8e5147071679c45911ef495859e0af7.png" width="20%">

//写法三:<img src="网址" width="120" height="120"> 如下代码所示:
//其中120可根据需求设定。如下代码所示:
//效果图为图4:
<img src="https://i-blog.csdnimg.cn/blog_migrate/f8e5147071679c45911ef495859e0af7.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. 第三列

效果如下所示:

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

  注意:.后要空格。

3、区块中使用列表

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

效果如下所示:

  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>

效果如下所示:

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


正文内容:






































评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值