Markdown 中的超链接有几种写法?
Markdown 中的超链接主要可以分成「行内」和「引用」两种写法(样式)。
行内超链接
行内超链接是指在一行或者一段文本中完成超链接转换的所有工作。使用方括号([]
)包括想要转换成超链接的文本,使用圆括号(()
)包括想要链接到的 URL。
写法 1
最基础的超链接写法。
源代码:
请访问 [Rokcso's Blog](https://rokcso.com/) 以查看更多内容。
渲染结果:
<p>请访问 <a href="https://rokcso.com/">Rokcso’s Blog</a> 以查看更多内容。</p>
写法 2
Markdown 并不会自动将超链接文本转换为 title
属性,有需要可以手动为其添加一个 title
属性,在圆括号的 URL 后面空格然后输入 title
属性值。
title
属性值可以使用双引号(""
)或者单引号(''
),但是要注意前后匹配。
源代码:
请访问 [Rokcso's Blog](https://rokcso.com/ "博客首页") 以查看更多内容。
渲染结果:
<p>请访问 <a href="https://rokcso.com/" title="博客首页">Rokcso’s Blog</a> 以查看更多内容。</p>
引用超链接
引用超链接是指将超链接文本和要链接到的 URL 分开,在行内超链接文本处使用标签文本引用原始 URL。依然使用方括号包括想要转换成超链接的文本,随后使用第二个方括号包括可唯一标识超链接的标签文本,并在文末通过标签文本定义要链接到的 URL。
这种方式便于集中管理所有 URL,通常会将所有 URL 都集中放在文档末尾(但实际上可以放在文档中的任何位置),类似于写论文时引用参考文献。
注意:定义 URL 的标签文本值可由字母、数字、空格和标点符号组成,但是并不区分大小写。以下语法等效:
请访问 [Rokcso's Blog][blog] 以查看更多内容。
请访问 [Rokcso's Blog][Blog] 以查看更多内容。
写法 3
最基础的引用超链接写法。
源代码:
请访问 [Rokcso's Blog][blog] 以查看更多内容。
[blog]: https://rokcso.com/
渲染结果:
<p>请访问 <a href="https://rokcso.com/">Rokcso’s Blog</a> 以查看更多内容。</p>
写法 4
使用引用超链接也可以为超链接添加 title
属性。
源代码:
请访问 [Rokcso's Blog][blog] 以查看更多内容。
[blog]: https://rokcso.com/ "博客首页"
渲染结果:
<p>请访问 <a href="https://rokcso.com/" title="博客首页">Rokcso’s Blog</a> 以查看更多内容。</p>
标签文本中的 URL 可以使用尖括号(<>
)包括,也可以不使用;标签文本中的 title
属性除了可以使用双引号或单引号包括,还能使用圆括号包括。
以下语法等效:
[blog]: https://rokcso.com/ "博客首页"
[blog]: https://rokcso.com/ '博客首页'
[blog]: https://rokcso.com/ (博客首页)
[blog]: <https://rokcso.com/> "博客首页"
[blog]: <https://rokcso.com/> '博客首页'
[blog]: <https://rokcso.com/> (博客首页)
写法 5
标签文本也是可以省略的,在这种情况下,超链接文本本身将作为标签文本值。
源代码:
请访问 [Rokcso's Blog][] 以查看更多内容。
[Rokcso's Blog]: https://rokcso.com/ "博客首页"
渲染结果:
<p>请访问 <a href="https://rokcso.com/" title="博客首页">Rokcso’s Blog</a> 以查看更多内容。</p>
其他超链接
自动超链接
这适用于邮件或以 URL 本身为超链接本文的情况,只需将邮件地址或者 URL 用尖括号包括起来。
源代码:
<https://rokcso.com/>
<admin@example.com>
渲染结果:
<p><a href="https://rokcso.com/">https://rokcso.com/</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
超链接到本地资源
如果要链接的地址是同一服务器上的本地资源,还可以使用相对路径。
源代码:
在 [Now](/now/) 页面记录了我的最新动态。
渲染结果:
<p>在 <a href="https://rokcso.com/now/">Now</a> 页面记录了我的最新动态。</p>
参考
John Gruber:Markdown 创始人的博客。