Rokcso's Blog

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 创始人的博客。

#note