MarkDown中实现目录页面内跳转
MarkDown中页面内跳转经常用于目录跳转,为了解决在MarkDown中实现页面内跳转,我特意研究了以下实现方式;
备注: 简书中的MarkDown好像不支持页面内跳转;
目录
一. 链接的定义
1. 行内式链接
2. 参考式链接
二. 标题的定义
1. 类Setex形式的标题
2. 类Atx形式的标题
三. 页面内跳转
1. 锚点的定义
2. 锚点目标的定义
内容
在MarkDown中是通过 链接
和 标题
来实现页面内跳转的,所以先讲下MarkDown中 链接
和 标题
的语法;
一、链接的定义
Markdown 支持两种形式的链接语法: 行内式和参考式两种形式。
1. 行内式链接
语法:
行内式链接 = [内容](地址 "标题")
说明:
-
标题
是可选的,可以用单引号 或 双引号;
转换成HTML后,会生成如下标签:
<a href="地址" title="标题">内容</a>
2. 参考式链接
语法:
参考式链接 = [内容][参考标识符]
参考标识符 = [标识符]: 地址 "标题"
说明:
-
参考式链接
和参考标识符
的定义没有先后顺序; -
[内容]
和[参考标识符]
之间可以有一个空格; -
标题
是可选的,可以用单引号、双引号或是圆括弧包着;
转换成HTML后,会生成如下标签:
<a href="地址" title="标题">内容</a>
二、标题的定义
Markdown 支持两种标题的语法:类Setext形式 和 类atx形式;
1. 类Setex形式的标题
类Setext形式标题的定义是用底线的形式,可以利用任何个数的符号 =
(最高级标题)和 -
(第2级标题)来做底线,格式为:
标题内容
====
或
标题内容
----
说明:
- 底线的符号个数为大于或等于1
2. 类Atx形式的标题
类 Atx 形式标题的定义则是在行首插入 1 到 6 个 # ,对应到标题 1 到 6 阶,格式为:
# 1级标题内容
## 2级标题内容
### 3级标题内容
#### 4级标题内容
##### 5级标题内容
###### 6级标题内容
三、页面内跳转
MarkDown中是通过定义链接的方式来定义跳转的,跳转也称为锚点
,跳转的目标称为锚点目标
;锚点
和 锚点目标
的定义格式如下:
1. 锚点的定义
锚点就是一个链接,另外,由于在MarkDown中可以直接写HTML,所以在MarkDown中实现锚点有两种方式:MarkDown方式 和 HTML方式;
1.1 MarkDown锚点
MarkDown锚点就是一个[MarkDown链接][链接的定义],只是链接地址的格式为:
链接地址 = #目标内容
1.2 HTML锚点
HTML锚点就是一个a链接,格式为:
<a href="#目标内容">内容</a>
注意:
-
HTML锚点
的目标锚点只能是 [标签形式的锚点目标][标签形式的锚点目标]
2. 锚点目标的定义
锚点目标有2种定义方式:MarkDown形式 和 标签形式;
2.1 MarkDown形式的锚点目标
MarkDown形式的锚点目标的定义其实就是[标题][标题的定义]的定义,即:任何级别的标题可以直接作为锚点目标;
标题内容 = 目标内容
注意:
- [锚点][锚点的定义]的
目标内容
中不能有大家字母和空格,所以如果锚点目标的目标内容
中有大写字母或空格,则需要在定义锚点中的目标内容
时,把大写字母改成小写字母,把空格改成-
; - [锚点][锚点的定义]的
目标内容
中不能含有以下字符:- 半角点(即英文中的句号)
.
- 半角点(即英文中的句号)
2.2 标签形式的锚点目标
因为MarkDown链接会被转成a标签,并且MarkDown中也可以写标签,所以可以利用HTML的锚点机制直接定义一个带 id
特性的标签作为锚点目标,然后把MarkDown中的锚点地址的目标内容设置为 id
特性的值;这样便可以实现页面内跳转;
这种形式的锚点目标的定义格式为:
<标签名 id="目标内容">元素内容</标签名>
注意:
- 标签形式的锚点目标的id特性值中是不能含有中文字符;