MarkDown中頁面內(nèi)跳轉(zhuǎn)經(jīng)常用于目錄跳轉(zhuǎn)袋励，為了解決在MarkDown中實現(xiàn)頁面內(nèi)跳轉(zhuǎn)，我特意研究了以下實現(xiàn)方式；
備注： 簡書中的MarkDown好像不支持頁面內(nèi)跳轉(zhuǎn)黎比；
目錄
一. 鏈接的定義
1. 行內(nèi)式鏈接
2. 參考式鏈接
二. 標(biāo)題的定義
1. 類Setex形式的標(biāo)題
2. 類Atx形式的標(biāo)題
三. 頁面內(nèi)跳轉(zhuǎn)
1. 錨點的定義
2. 錨點目標(biāo)的定義
四. 總結(jié)
五. 示例
內(nèi)容
在MarkDown中是通過 鏈接 和 標(biāo)題 來實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的礼预，所以先講下MarkDown中 鏈接 和 標(biāo)題 的語法眠砾，然后再講 MarkDown 中實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的方法；
一. 鏈接的定義
Markdown 支持兩種形式的鏈接語法： 行內(nèi)式 和 參考式 兩種形式托酸。
1. 行內(nèi)式鏈接
語法：
行內(nèi)式鏈接 = [內(nèi)容](地址 "標(biāo)題")
說明：
-
標(biāo)題是可選的褒颈，可以用單引號 或 雙引號；
轉(zhuǎn)換成HTML后励堡，會生成如下標(biāo)簽：
<a href="地址" title="標(biāo)題">內(nèi)容</a>
示例：
[我的博客](http://www.reibang.com/u/7ecaba2d594c "郭斌勇的主頁")
渲染成HTML后谷丸，會生成如下標(biāo)簽：
<a href="http://www.reibang.com/u/7ecaba2d594c" title="郭斌勇的主頁">我的博客</a>
效果如下：
2. 參考式鏈接
語法：
參考式鏈接 = [內(nèi)容][參考標(biāo)識符]
參考標(biāo)識符 = [標(biāo)識符]: 地址 "標(biāo)題"
說明：
-
參考式鏈接和參考標(biāo)識符的定義沒有先后順序； -
[內(nèi)容]和[參考標(biāo)識符]之間可以有一個空格应结，也可以沒有空格淤井； - 如果
內(nèi)容和參考標(biāo)識符一樣，也可簡寫成[參考標(biāo)識符][]; -
標(biāo)題是可選的摊趾，可以用單引號币狠、雙引號或是圓括弧包著；
轉(zhuǎn)換成HTML后砾层，會生成如下標(biāo)簽：
<a href="地址" title="標(biāo)題">內(nèi)容</a>
示例：
[博客]: http://www.reibang.com/u/7ecaba2d594c "郭斌勇的主頁"
[我的博客][博客]
[博客][]
渲染成HTML后漩绵，會生成如下標(biāo)簽：
<a href="http://www.reibang.com/u/7ecaba2d594c" title="郭斌勇的主頁">我的博客</a>
<a href="http://www.reibang.com/u/7ecaba2d594c" title="郭斌勇的主頁">博客</a>
效果如下：
二. 標(biāo)題的定義
Markdown 支持兩種標(biāo)題的語法：類Setext形式 和 類atx形式；
1. 類Setex形式的標(biāo)題
類Setext形式標(biāo)題的定義是用底線的形式肛炮，可以利用任何個數(shù)的符號 =（最高級標(biāo)題）和 -（第2級標(biāo)題）來做底線止吐，格式為：
標(biāo)題內(nèi)容
====
或
標(biāo)題內(nèi)容
----
說明：
- 底線的符號個數(shù)為大于或等于1
示例：
這是一級標(biāo)題
====
這是二級標(biāo)題
----
效果如下：
這是一級標(biāo)題
這是二級標(biāo)題
2. 類Atx形式的標(biāo)題
類 Atx 形式標(biāo)題的定義則是在行首插入 1 到 6 個 # ，對應(yīng)到標(biāo)題 1 到 6 階侨糟，格式為：
# 1級標(biāo)題內(nèi)容
## 2級標(biāo)題內(nèi)容
### 3級標(biāo)題內(nèi)容
#### 4級標(biāo)題內(nèi)容
##### 5級標(biāo)題內(nèi)容
###### 6級標(biāo)題內(nèi)容
示例：
# 這是1級標(biāo)題
## 這是2級標(biāo)題
### 這是3級標(biāo)題
#### 這是4級標(biāo)題
##### 這是5級標(biāo)題
###### 這是6級標(biāo)題
效果如下：
這是1級標(biāo)題
這是2級標(biāo)題
這是3級標(biāo)題
這是4級標(biāo)題
這是5級標(biāo)題
這是6級標(biāo)題
三. 頁面內(nèi)跳轉(zhuǎn)
MarkDown中是通過定義鏈接的方式來定義跳轉(zhuǎn)的碍扔，在這里，跳轉(zhuǎn)也稱為錨點秕重，跳轉(zhuǎn)的目標(biāo)稱為錨點目標(biāo)不同；
所以，在 MarkDown 中實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的方法就是：定義一個 錨點目標(biāo) 和 對應(yīng)的 錨點 溶耘，用戶點擊 錨點 便可跳轉(zhuǎn)到對應(yīng)的 錨點目標(biāo) 位置處二拐；
錨點 和 錨點目標(biāo) 的定義格式如下：
1. 錨點的定義
錨點就是一個鏈接，另外凳兵，由于在MarkDown中可以直接寫HTML百新，所以在MarkDown中實現(xiàn)錨點有兩種方式：MarkDown方式 和 HTML方式；
1.1 MarkDown錨點
MarkDown錨點本質(zhì)上就是一個MarkDown鏈接庐扫，只是鏈接地址的格式為：
鏈接地址 = #目標(biāo)內(nèi)容
所以 MarkDown錨點 的定義也有兩種方式
行內(nèi)式
語法：
錨點 = [內(nèi)容](#目標(biāo)內(nèi)容 "標(biāo)題")
說明：
-
標(biāo)題是可選的饭望，可以用單引號 或 雙引號仗哨；
轉(zhuǎn)換成HTML后，會生成如下標(biāo)簽：
<a href="#目標(biāo)內(nèi)容" title="標(biāo)題">內(nèi)容</a>
示例：
[MarkDown方式的錨點](#MarkDown錨點)
渲染成HTML后铅辞，會生成如下標(biāo)簽：
<a href="#MarkDown錨點" >MarkDown方式的錨點</a>
效果如下：點擊下面的錨點
參考式
語法：
錨點 = [內(nèi)容][參考標(biāo)識符]
參考標(biāo)識符 = [標(biāo)識符]: #目標(biāo)內(nèi)容 "標(biāo)題"
說明：
-
錨點和參考標(biāo)識符的定義沒有先后順序厌漂； -
[內(nèi)容]和[參考標(biāo)識符]之間可以有一個空格，也可以沒有空格巷挥； - 如果
內(nèi)容和參考標(biāo)識符一樣，也可簡寫成[參考標(biāo)識符][]; -
標(biāo)題是可選的验靡，可以用單引號倍宾、雙引號或是圓括弧包著；
轉(zhuǎn)換成HTML后胜嗓，會生成如下標(biāo)簽：
<a href="#目標(biāo)內(nèi)容" title="標(biāo)題">內(nèi)容</a>
示例：
[MarkDown方式的錨點]: #MarkDown錨點
[MD錨點][MarkDown方式的錨點]
[MarkDown方式的錨點][]
渲染成HTML后高职，會生成如下標(biāo)簽：
<a href="#MarkDown錨點">MD錨點</a>
<a href="#MarkDown錨點">MarkDown方式的錨點</a>
效果如下：
1.2 HTML錨點
HTML錨點本質(zhì)上就是一個a鏈接，格式為：
<a href="#目標(biāo)內(nèi)容">內(nèi)容</a>
注意：
-
HTML錨點的目標(biāo)錨點只能是 標(biāo)簽形式的錨點目標(biāo)
示例：
<a href="#html錨點">HTML方式的錨點</a>
效果如下：點擊下面的錨點
<a href="#html錨點">HTML方式的錨點</a>
2. 錨點目標(biāo)的定義
錨點目標(biāo)有2種定義方式：MarkDown形式 和 標(biāo)簽形式辞州；
MarkDown形式的錨點目標(biāo)
MarkDown形式的錨點目標(biāo)的定義其實就是標(biāo)題的定義怔锌，即：任何級別的標(biāo)題可以直接作為錨點目標(biāo)；
標(biāo)題內(nèi)容 = 目標(biāo)內(nèi)容
所以变过，類Setext形式 和 類atx形式 的標(biāo)題都可作為 錨點目標(biāo) 埃元；
錨點目標(biāo)定義的示例：
這是一個錨點目標(biāo)
====
這是一個錨點目標(biāo)
---
# 這是一個錨點目標(biāo)
## 這是一個錨點目標(biāo)
### 這是一個錨點目標(biāo)
#### 這是一個錨點目標(biāo)
##### 這是一個錨點目標(biāo)
###### 這是一個錨點目標(biāo)
注意：
-
錨點的
目標(biāo)內(nèi)容中不能有大家字母和空格，所以如果錨點目標(biāo)的目標(biāo)內(nèi)容中有大寫字母或空格媚狰，則需要在定義錨點中的目標(biāo)內(nèi)容時岛杀，把大寫字母改成小寫字母，把空格改成-崭孤； -
錨點的
目標(biāo)內(nèi)容中不能含有以下字符：- 半角點(即英文中的句號)
.
- 半角點(即英文中的句號)
標(biāo)簽形式的錨點目標(biāo)
因為MarkDown鏈接會被轉(zhuǎn)成a標(biāo)簽类嗤，并且MarkDown中也可以寫標(biāo)簽，所以可以利用HTML的錨點機制直接定義一個帶 id 特性的任意標(biāo)簽 或 帶 name 特性的 a 標(biāo)簽（注意：在HTML5中辨宠，a標(biāo)簽已經(jīng)不再支持 name 特性）作為錨點目標(biāo)遗锣，然后把MarkDown中的錨點地址的目標(biāo)內(nèi)容設(shè)置為 id 或 name 特性的值；這樣便可以實現(xiàn)頁面內(nèi)跳轉(zhuǎn)嗤形；
這種形式的錨點目標(biāo)的定義格式為：
<標(biāo)簽名 id="目標(biāo)內(nèi)容">元素內(nèi)容</標(biāo)簽名>
或
<a name="目標(biāo)內(nèi)容">元素內(nèi)容</a>
注意：
- 標(biāo)簽形式的錨點目標(biāo)的id特性值中是不能含有中文字符精偿；
-
name特性只能應(yīng)用在 a 標(biāo)簽上； - HTML5不支持通過a標(biāo)簽的
name特性來定義錨點目標(biāo)赋兵；
示例：
<div id="這是錨點目標(biāo)">跳轉(zhuǎn)到這里</div>
或
<a name="這是錨點目標(biāo)">跳轉(zhuǎn)到這里</a>
四. 總結(jié)
MarkDown中實現(xiàn)頁面跳轉(zhuǎn)的方法如下：
- 定義錨點目標(biāo)还最；錨點目標(biāo)的定義方式有4種：類Setext形式的標(biāo)題、類atx形式的標(biāo)題毡惜、帶id特性的HTML標(biāo)簽（id特性的值為
目標(biāo)內(nèi)容）拓轻、帶name特性的a標(biāo)簽（name特性的值為目標(biāo)內(nèi)容）； - 定義錨點经伙；錨點的定義方式有3種：行內(nèi)式鏈接扶叉、參考式鏈接勿锅、HTML的a鏈接；
說明：
- 錨點 和 錨點目標(biāo) 的定義不分先后順序枣氧；
注意：
-
錨點的
目標(biāo)內(nèi)容中不能有大家字母和空格溢十，所以如果錨點目標(biāo)的目標(biāo)內(nèi)容中有大寫字母或空格，則需要在定義錨點中的目標(biāo)內(nèi)容時达吞，把大寫字母改成小寫字母张弛，把空格改成-； -
錨點的
目標(biāo)內(nèi)容中不能含有以下字符：- 半角點(即英文中的句號)
.
- 半角點(即英文中的句號)
- 標(biāo)簽形式的錨點目標(biāo)的id特性值中是不能含有中文字符酪劫；
-
name特性只能應(yīng)用在 a 標(biāo)簽上吞鸭； - HTML5不支持通過a標(biāo)簽的
name特性來定義錨點目標(biāo)； -
HTML錨點的目標(biāo)錨點只能是 標(biāo)簽形式的錨點目標(biāo)
五. 示例
示例1
錨點：
[跳轉(zhuǎn)到個人簡介](#個人簡介)
錨點目標(biāo)：
# 個人簡介
示例2
錨點：
[跳轉(zhuǎn)到個人簡介]: #個人簡介
[跳轉(zhuǎn)到個人簡介][]
錨點目標(biāo)：
個人簡介
=====
示例3
錨點：
[跳轉(zhuǎn)到個人簡介](#個人簡介)
錨點目標(biāo)：
<p id="個人簡介">這是個人簡介</p>
示例4
錨點：
[跳轉(zhuǎn)到個人簡介](#個人簡介)
錨點目標(biāo)：
<a name="個人簡介">這是個人簡介</a>
示例5
錨點：
<a href="#個人簡介">跳轉(zhuǎn)到個人簡介</a>
錨點目標(biāo)：
個人簡介
----
示例6
錨點：
<a href="#個人簡介">跳轉(zhuǎn)到個人簡介</a>
錨點目標(biāo)：
<h1 id="個人簡介">這是個人簡介</h1>
示例7
錨點：
<a href="#個人簡介">跳轉(zhuǎn)到個人簡介</a>
錨點目標(biāo)：
<a name="個人簡介">這是個人簡介</a>
