The usage of Markdown---链接的使用

更新时间：2019.09.14

1. 序言
2. 网页链接
3. 图片链接
4. 页内跳转

1. 序言

在编辑文章的时候，我们常常需要插入各种链接，比如说网页链接，图片链接等等。当文章篇幅过长的时候，我们还需要实现页内链接跳转的功能。因此，在本篇将要具体介绍一下如何在Markdown中使用各种链接。

2. 网页链接

在Markdown中提供了多种方法来实现网页链接，比如在行内插入内联链接等等。下面来具体介绍一下几种网页链接的写法(我用得比较多的是第一种写法)：

1. 内联链接: [我的博客](http://www.cnblogs.com/liangjianli/)

<!--实际上，第二种和第三种的写法是一样的，是引用链接的不同表现形式-->

<!--博客园不支持引用链接(第二三种的写法--)>

2. 引用链接：这是[我的博客][1]

[1]: http://www.cnblogs.com/liangjianli/

3. 隐含链接：这是[我的博客][]

[我的博客]: http://www.cnblogs.com/liangjianli/

4. 自动链接：我的博客：<http://www.cnblogs.com/liangjianli/>

以下是博客园的显示效果(只显示第一和第四种)：
1. 内联链接: 我的博客
2. 自动链接：我的博客：http://www.cnblogs.com/liangjianli/
以下时jupyter notebook的显示效果

3. 图片链接

为了使文章阅读起来更加的形象，更加的具体，我们通常都要插入各种图片。而Markdown中使用图片链接的方法主要有三种(我主要用第三种---因为可以方便修改图片的大小)：

[ ]里面填写alt text，用于说明图片
()里面填写图片的路径

<!--将图片直接拉进博客园，通常是以这种方法来显示的-->

1. 内联链接：![微笑](https://img2018.cnblogs.com/blog/1684731/201909/1684731-20190914151825159-1600470207.jpg)

<!--博客园不支持引用链接--)>

2. 引用链接：![微笑][id]

[id]: https://img2018.cnblogs.com/blog/1684731/201909/1684731-20190914151825159-1600470207.jpg

3. html标签：<img alt='微笑的表情' width='24px' height='24px' src='https://img2018.cnblogs.com/blog/1684731/201909/1684731-20190914151825159-1600470207.jpg'/>)

以下是博客园的显示效果(只显示第一和第三种)：
1. 内联链接：
2. html标签：
以下时jupyter notebook的显示效果

4. 页内跳转

我们想要实现的页内跳转一般都是跳到标题的地方，因为在Markdown中，默认会给各级不同的标题分配一个唯一的id。通常来说可以使用以下两种方式进行页内跳转：

[ ]里面填写链接显示的文本
( )里面填写链接的锚点(id)，其中无论是几级标题，#都只填写一个，后面紧跟着id的内容

1. Markdown语法：[序言](#序言)

2. html格式：<a href='#序言：'>序言</a>

实际效果：

Markdown语法：序言
html格式：序言

在实际手动写标题id的时候可能会遇到各种问题，使得我们不能完成页内跳转。下面有两个重要的tips能够帮助顺序解决跳转的问题。

tip1：(最重要)对于不同的Markdown编辑器，id的写法并不相同，如果不知道具体怎么写，最快速的做法是查看网页的源代码，找到想要跳转标题的id
tip2：在这里主要介绍jupyter notebook和博客园id的具体写法
- jupyter notebook: 只要将空格的转为连号符-，将链接的部分(像图片链接这些)删掉（基本不用怎么改）
- 博客园：将标题序号删除，标题内容部分除了句点.、连符号-和空格以外，所有的特殊字符都全部删除，将空格的转为连号符-，将大写转化为小写

巴特西

The usage of Markdown---链接的使用

1. 序言

2. 网页链接

3. 图片链接

4. 页内跳转

最新文章

热门文章