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>

  实际效果：

1. Markdown语法：序言
2. html格式：序言

---

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

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