Markdown基础教程

许多开发人员喜欢使用Markdown来记录学习心得和写博客，虽然它是一门轻量级标记语言，但是它的使用非常简单，本篇博客主要介绍Markdown的基础教程。

目录：

1、Markdown标题

markdown标题的两种格式

使用 = 和 - 标记一级和二级标题

格式样式：

一级标题

=======

展示效果：

一级标题

格式样式：

二级标题

-----------

展示效果：

二级标题

* 使用#标记

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推,依次对应着html中的h1、h2、h3、h4、h5、h6

格式样式：

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

展示效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

***

2、Markdown字体样式

字体

字体颜色可以通过内嵌HTML的方式来实现

字体：
<font face="楷体">这是楷体字</font>
<font face="STCAIYUN">这是华文彩云</font>

展示效果：

这是楷体字

这是是华文彩云

字号

字号大小：
<font size="3">3号字体</font>
<font size="6">6号字体</font>

展示效果：

3号字体

6号字体

字体颜色

字体颜色：
<font size=5 color="pink">粉色</font>
<font color=#7CFC00 size=7 face="STCAIYUN"></font>
//加不加引号"都可以

展示效果：

粉色

LawnGreen

字体格式

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

展示效果：

斜体文本

粗体文本

粗体+斜体

3、Markdown文本样式

文本对齐方式

markdown文本的方式通过内嵌html代码来实现

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

文本左对齐：

文本左对齐

文本右对齐：

文本右对齐

文本居中对齐：

文本居中对齐

背景颜色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）

背景颜色：
<table><tr><td bgcolor=gray>背景色：gray</td></tr></table>
<table><tr><td bgcolor=#D1EEEE>背景色：#D1EEEE</td></tr></table>

展示效果：

背景色：gray

背景色的设置是按照十六进制颜色值

***

分割线

你可以在一行中用三个以上的星号、减号、底线或者内嵌html来建立一个分隔线，行内不能有其他东西。下面每种写法都可以建立分隔线：
***

*****
---
-----
___
_____
<hr/>

展示效果：

> 删除线

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可

~~带删除线文本~~

展示效果：~~带删除线文本~~

下划线

下划线可以通过 HTML 的 **** 标签来实现

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

展示效果：带下划线文本

脚注

脚注是对文本的补充说明，格式如下:

格式：
 [^要注明的文本]
[^要注明的文本]:补充说明
例子：
Markdown [^markdown]
[^markdown]: 轻量级标记语言
注意第一个[前面有一个空格

展示效果：

Markdown ^[1]

4、Markdown列表&区块

Markdown列表

Markdown支持有序列表和无序列表。无序列表使用星号()、加号(+)或是减号(-*)作为列表标记

无序序列：
* 第一列
* 第二列
+ 第一列
+ 第二列
- 第一列
- 第二列

展示效果：

第一列
第二列

第一列
第二列

第一列
第二列

有序列表使用数字并加上 . 号来表示，注意 . 后面有一个空格

有序序列：
1. 第一列
2. 第二列
3. 第三列

展示效果：

第一列
第二列
第三列

Markdown列表嵌套

列表嵌套只需在子列表中的选项添加四个空格或一个tab键即可

1. 第一级
   * 第二级
       * 第三级

展示效果：

第一级
- 第二级
  - 第三级

Markdown区块

Markdown 区块引用是在段落开头使用 > 符号，然后后面紧跟一个空格符号；同时区块是可以嵌套的，一个> 符号是最外层，两个> 符号是第一层的嵌套，以此类推

> 同一个世界，同一个梦想！
> 第一次层
>> 第二层
>>> 第三层

展示效果：

同一个世界，同一个梦想！

第一层

第二层

第三层

区块中使用列表

> 区块
> 1. 有序列表
> * 无序列表
> 	* 无序列表

展示效果：

区块

有序列表

无序列表

无序列表

列表中使用区块

列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进或者一个tab

* 地球
    > 美国
    > 中国
	>> 河南
* 水星

展示效果：

地球

美国
中国

河南
水星

5、Markdown链接&代码

Markdown链接

链接使用方法:

[链接名称](链接地址)
[博客主页]（https://www.cnblogs.com/asio）

<链接地址>
博主博客：<https://www.cnblogs.com/asio>

<a target="_blank" href="链接地址">链接名称</a>
<a target="_blank" href="https://www.cnblogs.com/asio" title="https://www.cnblogs.com/asio">博主博客</a>  
tip:加target="_blank"为新窗口打开，不加为当前页面打开；title为悬停提示

展示效果：

博客主页

博主博客：https://www.cnblogs.com/asio

博主博客

使用标量带替链接，适合大量重复添加某一链接时使用
https://www.cnblogs.com/asio使用变量代替链接
博主博客链接用 asio 作为网址变量 [君纤][asio]
然后在文档的结尾为变量赋值（网址）
[asio]: https://www.cnblogs.com/asio "title属性，链接描述"

展示效果：

博主博客链接用 asio 作为网址变量君纤

Markdown链接锚点定位

添加链接: 通过添加标签 < a>标题一< /a>
添加锚点: 在需要跳转到的标题位置添加链接
< a name="锚点名称">标题一< /a>
修改1中的标签< a href="#要跳转到的锚点名称">标题一< /a>

索引:
<a href="#a">第一段</a>
<a href="#b">第二段</a>
<a href="#c">第三段</a>
<hr/>
正文内容：
<a name="a"  id="a">第一段</a>
<div style="background:#ACD6FF;padding-left:20px;">
    这<br/>里<br/>是<br/>第<br/>一<br/>段<br/>的<br/>内<br/>容<br/>
</div>

<a name="b" id="b">第二段</a>
<div style="background:#FFF4C1;padding-left:20px;">
    这<br/>里<br/>是<br/>第<br/>二<br/>段<br/>的<br/>内<br/>容<br/>
</div>

<a name="c"  id="c">第三段</a>
<div style="background:#EBD3E8;padding-left:20px;">
   这<br/>里<br/>是<br/>第<br/>三<br/>段<br/>的<br/>内<br/>容<br/>
</div>

展示效果：

索引：

正文内容：

这
里
是
第
一
段
的
内
容

这
里
是
第
二
段
的
内
容

这
里
是
第
三
段
的
内
容

Markdown代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来 `
`print("Hello world!");`
如果是一段代码用```//todo....```包裹，并指定语言如```html（也可以不指定）
```
    int temp;
    if(a>b){
        temp = a;
        a = b;
        b = temp;
    }
    print(a);
```

展示效果：

print("Hello world!");

    int temp;
    if(a>b){
        temp = a;
        a = b;
        b = temp;
    }
    print(a);

6、Markdown图片

Markdown插入图片

Markdown插入图片的方式有三种

插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径

缺点：本地图片不能够更改或删除，否则markown无法调用本地图片资源，灵活性太差，不建议使用

插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可

缺点：依赖网络，若网络不好或者网络图片链接失效会对markdown加载图片造成影响，建议将图片资源保存在稳定的网络服务器中；优点是十分灵活

把图片存入markdown文件

用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置

基础用法：
![avatar](data:image/png;base64,iVBORw0......)
高级用法
![avatar][base64str]
[base64str]:data:image/png;base64,iVBORw0......

base64转码工具：http://tool.chinaz.com/tools/imgtobase/

缺点：将图片转为base64链接太长，十分影响编写体验；优点是上传的图片十分安全，不用担心丢失

Markdown 图片语法格式如下：

![alt 属性文本](图片地址 "可选标题")
![百度图标](http://img0.bdstatic.com/static/searchresult/img/logo-2X_32a8193.png "百度")
或者使用<img>标签
<img src="图片地址" alt="属性文本"/>

展示效果：

如果图片地址太长可以像网址那样对图片网址使用变量
![alt 属性文本][变量1]
然后在文档的结尾为变量赋值（网址）
[变量1]: 图片地址 
例如：
![百度][a]
[a]:http://img0.bdstatic.com/static/searchresult/img/logo-2X_32a8193.png "百度"

展示效果：

Markdown设置图片样式

Markdown 还没有办法指定图片的样式，如果你需要的话，你可以使用普通的标签来实现

<img src="图片地址" alt="属性文本" align="" width="" height=""/>
align属性值根据周围文本来排列图像：left(左)，right(右)，middle(中：默认)
width和height为图片长和宽，值可以为百分比50%,或者具体值120px
例子：
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579444411026&di=8e1d5f231b13c1f9a336cf875202b965&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020192354_8YXYE.thumb.700_0.gif" width="50%"/>

展示效果：

7、Markdown表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

语法格式如下：

| 表头1 | 表头2 |
| ---- | ---- |
| 单元格a | 单元格b |
| 单元格c | 单元格d |

展示效果：

表头1	表头2
单元格a	单元格b
单元格c	单元格d

我们可以设置表格的对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

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

展示效果：

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

↷Markdown进阶教程:https://www.cnblogs.com/asio/p/12220181.html

说明：由于markdown编辑器对markdown的拓展程度不同，可能在不同的编辑器中显示的样式会有所差别。

本博客与CSDN博客༺ཌ༈君☠纤༈ད༻同步发布

轻量级标记语言 ↩︎

posted @ 2020-01-19 21:46 ༺ཌ༈君☠纤༈ད༻ 阅读(717) 评论(0) 编辑收藏举报

刷新页面返回顶部

༺ཌ༈君☠纤༈ད༻

梦想是一场华美的旅途，每个人在找到它之前，都只是孤独的少年。

Markdown基础教程

一级标题

二级标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

公告