美文网首页
Markdown实用技巧-链接和图片

Markdown实用技巧-链接和图片

作者: Y小圆脸 | 来源:发表于2017-04-17 16:15 被阅读47次

文章链接摘自:爱祺科技CEOhq
CSDN博客地址
博客地址: http://www.gcssloop.com/markdown/markdown-links

前言

本文是适用于对 Markdown 有一定了解的魔法师,以帮助他们挖掘更多关于 Markdown 的可能性,例如:链接的不同类型以及使用方式,如何在新标签页打开链接,如何控制图片大小等,对 Markdown 还不了解的魔法师请参考 Markdown快速入门Markdown基础语法

注意:以下的部分语法不属于标准语法,存在不兼容的问题,不能保证所有平台都能够使用。对于非标准语法(拓展语法)我会进行标注说明。


行内式链接:

博客地址: [GcsSloop](http://www.gcssloop.com)  
博客地址: [GcsSloop](http://www.gcssloop.com "GcsSloop的博客")

博客地址: GcsSloop
博客地址: GcsSloop


参考式链接:

[GcsSloop的博客][gcssloop]

[gcssloop]: http://www.gcssloop.com
// 或者
[gcssloop]: http://www.gcssloop.com "点击访问GcsSloop的博客"

GcsSloop的博客

为什么要使用参考式呢?
在写文章的时候很可能会在文章不同的地方引用同一篇文章,使用参考式可以少写一点字符。
更重要的是,参考文章的链接可能会改变,如果将参考链接统一写在文末的话,改起来会更容易。


自动链接:

<http://www.gcssloop.com>

http://www.gcssloop.com


相对链接:

如果你的内容是发布在 GitHub 或者自己的个人网站上,那么相对链接是一个很好用的东西,例如引用本站的一张图片可以这样写:

![](/assets/siteinfo/avatar.jpg)
{:target="_blank"}

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

注意:从这里开始往下的部分,属于拓展语法,可能存在某些平台(编辑器)无法识别的问题,请亲自测试后再使用。

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

在新标签页打开:

Markdown 的默认链接方式都是在当前标签页打开的,这就会导致打开链接之后原始页面被覆盖掉,如果想要让链接在新标签页打开可以在后面添加上 {:target="_blank"} 或者使用 HTML 语法。

[GcsSloop](http://www.gcssloop.com){:target="_blank"}

[GcsSloop的博客][gcssloop]{:target="_blank"}

<http://www.gcssloop.com>{:target="_blank"}

<a href="http://www.gcssloop.com/info/about" target="_blank">关于GcsSloop</a>

GcsSloop{:target="_blank"}

GcsSloop的博客{:target="_blank"}

http://www.gcssloop.com{:target="_blank"}

<a href="http://www.gcssloop.com/info/about" target="_blank">关于GcsSloop</a>

注意: 部分平台可能不识别 {:target="_blank"} 标签,例如你正在看的这个 GitHub 就不识别。。


注释(脚注):

注释一般用于解释一些专业名词或者难以理解的内容,由于注释的解释部分一般放在文末,所以又称为脚注:

GcsSloop[^1]是一个超级魔法师[^2] 。

[^1]: GcsSloop:非著名程序员。  
[^2]: 魔法师:会魔法的人类

GcsSloop[1]是一个超级魔法师[2]

注意:脚注不论在何处定义,最终都是显示在文末。部分平台不识别该语法,GitHub 依旧不识别。


控制图片大小

使用 {:width="300" height="100"} 或者 HTML 格式可以控制图片显示大小,图片有宽度(width)和高度(height)两个属性,如果只指定了一个,另一个会按照比例缩放。

![](https://img.haomeiwen.com/i1699265/bd7d264d36dfe157.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240){:width="300"}

![](https://img.haomeiwen.com/i1699265/bd7d264d36dfe157.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

{:width="300"}

右键,新标签页打开图片,你会发现原图其实挺大的。
注意: 部分平台可能不识别 {:width="300" height="100"} 标签,你正在看的这个 GitHub 依旧不识别。


总结:

Markdown 存在很多的变种,对其语法进行了不同程度的拓展,使其更加的强大,但是使用拓展语法之前请三思。个人建议如下:

  • 如果文章(文档)只在单一平台发布,使用任何该平台支持的拓展语法都没问题。
  • 如果文章(文档)需要在多个平台发布,尽量使用标准语法,使用拓展语法之前请注意测试平台兼容性。
  • 图片尽量使用图床管理,而且要进行本地备份。

About Me

作者微博: <a href="http://weibo.com/GcsSloop" target="_blank">@GcsSloop</a>

<a href="http://www.gcssloop.com/info/about" target="_blank">

</a>

参考链接:

Markdown-基础语法
Markdown语法:在新窗口新标签页中打开

注释:


  1. GcsSloop:非著名程序员。

  2. 魔法师:会魔法的人类

相关文章

网友评论

      本文标题:Markdown实用技巧-链接和图片

      本文链接:https://www.haomeiwen.com/subject/cbbtzttx.html