MarkDown中页面内跳转经常用于目录跳转&＃xff0c;为了解决在MarkDown中实现页面内跳转&＃xff0c;我特意研究了以下实现方式&＃xff1b;

在MarkDown中&＃xff0c;页面内跳转的方法中最重要的是&＃xff1a;要按住ctrl去访问&＃xff0c;才能页面内跳转&＃xff01;&＃xff01;&＃xff01;&＃xff01;

一. 链接的定义1. 行内式链接2. 参考式链接
二. 标题的定义1. 类Setex形式的标题2. 类Atx形式的标题
三. 页面内跳转1. 锚点的定义2. 锚点目标的定义
四. 总结
五. 示例

内容

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

Markdown 支持两种形式的链接语法&＃xff1a; 行内式 和 参考式 两种形式。

1. 行内式链接

语法&＃xff1a;

行内式链接 &＃61; [内容](地址 "标题")


说明&＃xff1a;

• 标题 是可选的&＃xff0c;可以用单引号 或 双引号&＃xff1b;

转换成HTML后&＃xff0c;会生成如下标签&＃xff1a;

内容


示例&＃xff1a;

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


渲染成HTML后&＃xff0c;会生成如下标签&＃xff1a;

我的博客


效果如下&＃xff1a;

我的博客

2. 参考式链接

语法&＃xff1a;

参考式链接 &＃61; [内容][参考标识符]
参考标识符 &＃61; [标识符]: 地址 "标题"


说明&＃xff1a;

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

转换成HTML后&＃xff0c;会生成如下标签&＃xff1a;

内容


示例&＃xff1a;

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


渲染成HTML后&＃xff0c;会生成如下标签&＃xff1a;

我的博客
博客


效果如下&＃xff1a;

我的博客
博客

Markdown 支持两种标题的语法&＃xff1a;类Setext形式 和 类atx形式&＃xff1b;

1. 类Setex形式的标题

类Setext形式标题的定义是用底线的形式&＃xff0c;可以利用任何个数的符号 &＃61;&＃xff08;最高级标题&＃xff09;和 -&＃xff08;第2级标题&＃xff09;来做底线&＃xff0c;格式为&＃xff1a;

标题内容
&＃61;&＃61;&＃61;&＃61;


或

标题内容
----


说明&＃xff1a;

• 底线的符号个数为大于或等于1

示例&＃xff1a;

这是一级标题
&＃61;&＃61;&＃61;&＃61;这是二级标题
----


效果如下&＃xff1a;

这是二级标题

2. 类Atx形式的标题

类 Atx 形式标题的定义则是在行首插入 1 到 6 个 # &＃xff0c;对应到标题 1 到 6 阶&＃xff0c;格式为&＃xff1a;

# 1级标题内容
## 2级标题内容
### 3级标题内容
#### 4级标题内容
##### 5级标题内容
###### 6级标题内容


示例&＃xff1a;

# 这是1级标题
## 这是2级标题
### 这是3级标题
#### 这是4级标题
##### 这是5级标题
###### 这是6级标题


效果如下&＃xff1a;

这是2级标题

这是3级标题

这是4级标题

这是5级标题

这是6级标题

MarkDown中是通过定义链接的方式来定义跳转的&＃xff0c;在这里&＃xff0c;跳转也称为锚点&＃xff0c;跳转的目标称为锚点目标&＃xff1b;

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

锚点 和 锚点目标 的定义格式如下&＃xff1a;

1. 锚点的定义

锚点就是一个链接&＃xff0c;另外&＃xff0c;由于在MarkDown中可以直接写HTML&＃xff0c;所以在MarkDown中实现锚点有两种方式&＃xff1a;MarkDown方式 和 HTML方式&＃xff1b;

1.1 MarkDown锚点

MarkDown锚点本质上就是一个MarkDown链接&＃xff0c;只是链接地址的格式为&＃xff1a;

链接地址 &＃61; #目标内容


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

行内式

语法&＃xff1a;

锚点 &＃61; [内容](#目标内容 "标题")


说明&＃xff1a;

• 标题 是可选的&＃xff0c;可以用单引号 或 双引号&＃xff1b;

转换成HTML后&＃xff0c;会生成如下标签&＃xff1a;

内容


示例&＃xff1a;

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


渲染成HTML后&＃xff0c;会生成如下标签&＃xff1a;

MarkDown方式的锚点


效果如下&＃xff1a;点击下面的锚点

MarkDown方式的锚点

参考式

语法&＃xff1a;

锚点 &＃61; [内容][参考标识符]
参考标识符 &＃61; [标识符]: #目标内容 "标题"


说明&＃xff1a;

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

转换成HTML后&＃xff0c;会生成如下标签&＃xff1a;

内容


示例&＃xff1a;

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


渲染成HTML后&＃xff0c;会生成如下标签&＃xff1a;

MD锚点
MarkDown方式的锚点


效果如下&＃xff1a;

MD锚点

MarkDown方式的锚点

1.2 HTML锚点

HTML锚点本质上就是一个a链接&＃xff0c;格式为&＃xff1a;

内容


注意&＃xff1a;

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

示例&＃xff1a;

HTML方式的锚点


效果如下&＃xff1a;点击下面的锚点

HTML方式的锚点

2. 锚点目标的定义

锚点目标有2种定义方式&＃xff1a;MarkDown形式 和 标签形式&＃xff1b;

MarkDown形式的锚点目标

MarkDown形式的锚点目标的定义其实就是标题的定义&＃xff0c;即&＃xff1a;任何级别的标题可以直接作为锚点目标&＃xff1b;

标题内容 &＃61; 目标内容


所以&＃xff0c;类Setext形式 和 类atx形式 的标题都可作为 锚点目标 &＃xff1b;

锚点目标定义的示例&＃xff1a;

这是一个锚点目标
&＃61;&＃61;&＃61;&＃61;这是一个锚点目标
---# 这是一个锚点目标
## 这是一个锚点目标
### 这是一个锚点目标
#### 这是一个锚点目标
##### 这是一个锚点目标
###### 这是一个锚点目标


注意&＃xff1a;

• 锚点的 目标内容 中不能有大家字母和空格&＃xff0c;所以如果锚点目标的 目标内容 中有大写字母或空格&＃xff0c;则需要在定义锚点中的 目标内容 时&＃xff0c;把大写字母改成小写字母&＃xff0c;把空格改成 -&＃xff1b;
• 锚点的 目标内容 中不能含有以下字符&＃xff1a;
  • 半角点(即英文中的句号).

标签形式的锚点目标

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

这种形式的锚点目标的定义格式为&＃xff1a;

<标签名 id&＃61;"目标内容">元素内容


或

元素内容


注意&＃xff1a;

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

示例&＃xff1a;

或

跳转到这里

四. 总结

MarkDown中实现页面跳转的方法如下&＃xff1a;

1. 定义锚点目标&＃xff1b;锚点目标的定义方式有4种&＃xff1a;类Setext形式的标题、类atx形式的标题、带id特性的HTML标签&＃xff08;id特性的值为目标内容&＃xff09;、带name特性的a标签&＃xff08;name特性的值为目标内容&＃xff09;&＃xff1b;
2. 定义锚点&＃xff1b;锚点的定义方式有3种&＃xff1a;行内式链接、参考式链接、HTML的a链接&＃xff1b;

说明&＃xff1a;

• 锚点 和 锚点目标 的定义不分先后顺序&＃xff1b;

注意&＃xff1a;

• 锚点的 目标内容 中不能有大家字母和空格&＃xff0c;所以如果锚点目标的 目标内容 中有大写字母或空格&＃xff0c;则需要在定义锚点中的 目标内容 时&＃xff0c;把大写字母改成小写字母&＃xff0c;把空格改成 -&＃xff1b;
• 锚点的 目标内容 中不能含有以下字符&＃xff1a;
  • 半角点(即英文中的句号).
• 标签形式的锚点目标的id特性值中是不能含有中文字符&＃xff1b;
• name 特性只能应用在 a 标签上&＃xff1b;
• HTML5不支持通过a标签的 name 特性来定义锚点目标&＃xff1b;
• HTML锚点 的目标锚点只能是 标签形式的锚点目标

示例1

锚点&＃xff1a;

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


锚点目标&＃xff1a;

# 个人简介


示例2

锚点&＃xff1a;

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


锚点目标&＃xff1a;

个人简介
&＃61;&＃61;&＃61;&＃61;&＃61;


示例3

锚点&＃xff1a;

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


锚点目标&＃xff1a;

这是个人简介

示例4

锚点&＃xff1a;

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


锚点目标&＃xff1a;

这是个人简介


示例5

锚点&＃xff1a;

跳转到个人简介


锚点目标&＃xff1a;

个人简介
----


示例6

锚点&＃xff1a;

跳转到个人简介


锚点目标&＃xff1a;

这是个人简介

示例7

锚点&＃xff1a;

跳转到个人简介


锚点目标&＃xff1a;

这是个人简介

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