2.3k 字 26 分钟

本文最后更新于：4 个月前

点击我跳转

1. 跳转起点
[点击我跳转](#jump)

2.跳转终点
<span id="jump"><font color='blue'>[我是跳转内容]</font></span><a href="#jump" class="footnote-backref">↩</a>

[我是跳转内容]↩

参考文章：

https://www.jianshu.com/p/4898c2e9a36d

https://blog.csdn.net/qq_38276669/article/details/86748936

内容

在MarkDown中是通过 链接 和 标题 来实现页面内跳转的，所以先讲下MarkDown中 链接 和 标题 的语法，然后再讲 MarkDown 中实现页面内跳转的方法；

一. 链接的定义

Markdown 支持两种形式的链接语法： 行内式 和 参考式 两种形式。

1. 行内式链接

语法：

行内式链接 = [内容](地址 "标题")

说明：

  • 标题 是可选的，可以用单引号 或 双引号；

转换成HTML后，会生成如下标签：

<a href="地址" title="标题">内容</a>

示例：

[我的博客](https://www.jianshu.com/u/7ecaba2d594c "郭斌勇的主页")

渲染成HTML后，会生成如下标签：

<a href="https://www.jianshu.com/u/7ecaba2d594c" title="郭斌勇的主页">我的博客</a>

效果如下：

我的博客

2. 参考式链接

语法：

参考式链接 = [内容][参考标识符]
参考标识符 = [标识符]: 地址 "标题"

说明：

  • 参考式链接 和 参考标识符 的定义没有先后顺序；
  • [内容] 和 [参考标识符] 之间可以有一个空格，也可以没有空格；
  • 如果 内容 和 参考标识符 一样，也可简写成 [参考标识符][] ;
  • 标题 是可选的，可以用单引号、双引号或是圆括弧包着；

转换成HTML后，会生成如下标签：

<a href="地址" title="标题">内容</a>

示例：

[博客]: https://www.jianshu.com/u/7ecaba2d594c "郭斌勇的主页"
[我的博客][博客]
[博客][]

渲染成HTML后，会生成如下标签：

<a href="https://www.jianshu.com/u/7ecaba2d594c" title="郭斌勇的主页">我的博客</a>
<a href="https://www.jianshu.com/u/7ecaba2d594c" title="郭斌勇的主页">博客</a>

效果如下：

我的博客
博客

三.页面内跳转

MarkDown中是通过定义链接的方式来定义跳转的，在这里，跳转也称为锚点，跳转的目标称为锚点目标；

所以，在 MarkDown 中实现页面内跳转的方法就是：定义一个 锚点目标 和 对应的 锚点 ，用户点击 锚点 便可跳转到对应的 锚点目标 位置处；

锚点 和 锚点目标 的定义格式如下：

1. 锚点的定义

锚点就是一个链接，另外，由于在MarkDown中可以直接写HTML，所以在MarkDown中实现锚点有两种方式：MarkDown方式 和 HTML方式；

1.1 MarkDown锚点

MarkDown锚点本质上就是一个MarkDown链接，只是链接地址的格式为：

链接地址 = #目标内容

所以 MarkDown锚点 的定义也有两种方式

行内式

语法：

锚点 = [内容](#目标内容 "标题")

说明：

  • 标题 是可选的，可以用单引号 或 双引号；

转换成HTML后，会生成如下标签：

<a href="#目标内容" title="标题">内容</a>

示例：

[MarkDown方式的锚点](#MarkDown锚点)

渲染成HTML后，会生成如下标签：

<a href="#MarkDown锚点" >MarkDown方式的锚点</a>

效果如下：点击下面的锚点

MarkDown方式的锚点

参考式

语法：

锚点 = [内容][参考标识符]
参考标识符 = [标识符]: #目标内容 "标题"

说明：

  • 锚点 和 参考标识符 的定义没有先后顺序；
  • [内容] 和 [参考标识符] 之间可以有一个空格，也可以没有空格；
  • 如果 内容 和 参考标识符 一样，也可简写成 [参考标识符][] ;
  • 标题 是可选的，可以用单引号、双引号或是圆括弧包着；

转换成HTML后，会生成如下标签：

<a href="#目标内容" title="标题">内容</a>

示例：

[MarkDown方式的锚点]: #MarkDown锚点
[MD锚点][MarkDown方式的锚点]
[MarkDown方式的锚点][]

渲染成HTML后，会生成如下标签：

<a href="#MarkDown锚点">MD锚点</a>
<a href="#MarkDown锚点">MarkDown方式的锚点</a>

效果如下：

MD锚点

MarkDown方式的锚点

1.2 HTML锚点

HTML锚点本质上就是一个a链接，格式为：

<a href="#目标内容">内容</a>

注意：

示例：

<a href="#html锚点">HTML方式的锚点</a>

效果如下：点击下面的锚点

HTML方式的锚点

2. 锚点目标的定义

锚点目标有2种定义方式：MarkDown形式 和 标签形式；

MarkDown形式的锚点目标

MarkDown形式的锚点目标的定义其实就是标题的定义，即：任何级别的标题可以直接作为锚点目标；

标题内容 = 目标内容

所以，类Setext形式 和 类atx形式 的标题都可作为 锚点目标 ；

锚点目标定义的示例：

这是一个锚点目标
====

这是一个锚点目标
---

# 这是一个锚点目标
## 这是一个锚点目标
### 这是一个锚点目标
#### 这是一个锚点目标
##### 这是一个锚点目标
###### 这是一个锚点目标

注意：

  • 锚点的 目标内容 中不能有大家字母和空格，所以如果锚点目标的 目标内容 中有大写字母或空格，则需要在定义锚点中的 目标内容 时，把大写字母改成小写字母，把空格改成 -；

  • 锚点

    的 

    目标内容

    中不能含有以下字符：

    • 半角点(即英文中的句号).

标签形式的锚点目标

因为MarkDown链接会被转成a标签，并且MarkDown中也可以写标签，所以可以利用HTML的锚点机制直接定义一个带 id 特性的任意标签 或 带 name 特性的 a 标签（注意：在HTML5中，a标签已经不再支持 name 特性）作为锚点目标，然后把MarkDown中的锚点地址的目标内容设置为 id 或 name 特性的值；这样便可以实现页面内跳转；

这种形式的锚点目标的定义格式为：

<标签名 id="目标内容">元素内容</标签名>

或

<a name="目标内容">元素内容</a>

注意：

  • 标签形式的锚点目标的id特性值中是不能含有中文字符；
  • name 特性只能应用在 a 标签上；
  • HTML5不支持通过a标签的 name 特性来定义锚点目标；

示例：

<div id="这是锚点目标">跳转到这里</div>

或

<a name="这是锚点目标">跳转到这里</a>

四. 总结

MarkDown中实现页面跳转的方法如下：

  1. 定义锚点目标；锚点目标的定义方式有4种：类Setext形式的标题、类atx形式的标题、带id特性的HTML标签（id特性的值为目标内容）、带name特性的a标签（name特性的值为目标内容）；
  2. 定义锚点；锚点的定义方式有3种：行内式链接、参考式链接、HTML的a链接；

说明：

  • 锚点 和 锚点目标 的定义不分先后顺序；

注意：

  • 锚点的 目标内容 中不能有大家字母和空格，所以如果锚点目标的 目标内容 中有大写字母或空格，则需要在定义锚点中的 目标内容 时，把大写字母改成小写字母，把空格改成 -；

  • 锚点

    的 

    目标内容

    中不能含有以下字符：

    • 半角点(即英文中的句号).

  • 标签形式的锚点目标的id特性值中是不能含有中文字符；

  • name 特性只能应用在 a 标签上；

  • HTML5不支持通过a标签的 name 特性来定义锚点目标；

  • HTML锚点 的目标锚点只能是 标签形式的锚点目标

五. 示例

示例1

锚点：

[跳转到个人简介](#个人简介)

锚点目标：

# 个人简介

示例2

锚点：

[跳转到个人简介]: #个人简介
[跳转到个人简介][]

锚点目标：

个人简介
=====

示例3

锚点：

[跳转到个人简介](#个人简介)

锚点目标：

<p id="个人简介">这是个人简介</p>

示例4

锚点：

[跳转到个人简介](#个人简介)

锚点目标：

<a name="个人简介">这是个人简介</a>

示例5

锚点：

<a href="#个人简介">跳转到个人简介</a>

锚点目标：

个人简介
----

示例6

锚点：

<a href="#个人简介">跳转到个人简介</a>

锚点目标：

<h1 id="个人简介">这是个人简介</h1>

示例7

锚点：

<a href="#个人简介">跳转到个人简介</a>

锚点目标：

<a name="个人简介">这是个人简介</a>

 目录