做任务、攒经验系列——Markdown入门学习


前言##

既然是入门学习,那还是要稳扎稳打,根据简书官方给出的献给写作者的 Markdown 新手指南Markdown 语法说明 (简体中文版),将Markdown细细了解一下。下面就进入正题。


Markdown是什么?##

通过度娘,我们可以知道,
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式
通俗的说,Markdown是一种标记规则,它通过一些约定好的符号来整理文本格式
那么我们来体验一下:
Markdown形式的文本:我们来尝试一下**加粗**,*斜体*,还可以尝试[看看其他文章](http://www.jianshu.com/p/ffe9f5035dd0)
在浏览器上看到的结果:我们来尝试一下加粗,斜体,还可以尝试看看其他文章
那么下面将开始更加细致的介绍Markdown的相关语法。


Markdown常用语法介绍##

1.标题####

Markdown的规则中,标题也是类似于Word中的标题一样,字号会略大于正文并且有加粗效果,只是这里定义标题更为方便,使用‘#’符号将所要定义为标题的内容包裹起来即可(其实只有内容左侧的#即可,但是我为了美观起见,一般都喜欢用对称的)。如下所示:

#这是H1标题#
##这是H2标题##
......以此类推
######这是H6标题######

产生如下效果:

这是H1标题#

这是H2标题##

......以此类推

这是H6标题######

它的效果就是在浏览器上显示时,将标题部分放入对应的<h></h>标签中。

2.分隔线####

分隔线是我比较爱用的一个符号,它可以很明显的帮助读者将文章分块。Markdown中,召唤一条分割线只需要点击-_*三次以上,为什么是三次呢?原因后面会细细道来(0.o).下面我们先尝试一下:

我
要
被
***
分(这里红了!说明有问题!)
---
开
___
啦

效果如下:





显然,没有达到我们的预期,少了一条分隔线
那么我们再来试试这样写:

我
要
被
***
分(后面加个换行)

---
开
___
啦

效果如下:






这次妥妥的(≧▽≦)/
由此,我们可以得出在利用-召唤分隔线时,会有不稳定的可能,要注意换行。而其他两个符号基本没问题。对了,这个分隔线其实也就是在对应的HTML文件中的指定位置加了一个<hr>标签。

3.强调####

还记得我刚刚挖的吗?(没有错,就是那个为什么是“三次”的坑)
我现在要开始填坑啦!
为什么需要点击_*三次以上才能召唤分隔线,因为一次和两次都用来作为表示强调了(╯‵□′)╯︵┻━┻。
比如使用-_*一次的效果:

_单下划线_,*单星号*,-单减号-

结果如→单下划线,单星号,-单减号-。
使用-_*两次的效果:

__双下划线__,**双星号**,--双减号--

结果如→双下划线,双星号,--双减号--。
由上可知,使用_*一次的效果是将文字内容变为斜体,也就是将内容放入<em></em>标签中;使用_*两次的效果是将文字内容加粗,也就是将内容放入<strong></strong>标签中。无论_*使用一次或两次,都起到了强调的作用。然而减号无论怎么使用,在强调时都并没有什么卵用。
另外还有个~,也可以起到一种奇怪的强调作用,比如:当我没说过
这个其实就是将内容放到了<del></del>标签中的效果。

4.列表####

Markdown 支持有序列表和无序列表。

  • 无序列表
    无序列表使用*+或是-作为列表标记,可以这样写:
    + 项目1
      - 项目2
    * 项目3
    

得到的效果如下

  • 项目1
    • 项目2
  • 项目3
    项目2可以视为项目1的子项,在书写时,在项目2的符号前注意添加一个tab。无序列表就是将列表项放到<ul></ul>标签中的<li></li>标签下,某项的子项就放到该list item下的<ul></ul>标签中。以此类推。
  • 有序列表
    有序列表则使用数字接着一个英文句点,可以这样写:
    1. 项目一
     1. 子项目
    2. 项目二
    4. 项目三
    

效果如下:

  1. 项目一
    1. 子项目
  2. 项目二
  3. 项目三
    子项目可以视为项目一的子项,在书写时,在子项目的符号前注意添加一个tab。有序列表就是将列表项放到<ol></ol>标签中的<li></li>标签下,某项的子项就放到该list item下的<ol></ol>标签中。以此类推。有序列表的序号不会因为认为定义而乱序

5.链接####

链接是个有意思的功能,以前上知乎的时候就有见过,明明看着就是几个蓝字,但是点一下就别有洞天。在学了Markdown之后,更是对这种不把url地址直接写明的方式甚是喜欢。下来,我们就来看看Markdown的链接是如何定义的。
Markdown 支持两种形式的链接语法: 行内式参考式 两种形式。
不管是哪一种,链接文字都是用 [方括号] 来标记。也就是说链接的入口要用[]框起来。
对于行内式而言,地址直接在入口后用()括起来,如下格式:

[到处看看](http://www.jianshu.com/p/7d3ff4831031)

产出的效果就是到处看看

而对于参考式而言,则是在链接文字的括号后面再接上另一个方括号,而在第二个方括号里面要填入用以辨识链接的标记,如下格式:

[有点意思][here]
[here]:http://www.jianshu.com/p/806afc163dc4

产出效果就是[有点意思][here]
[here]:http://www.jianshu.com/p/806afc163dc4

就结果而言,两种方式的效果是一样的。但在我看来,行内式较为方便简洁,参考式可能对于一篇文章中出现大量的链接时,可以将链接地址统一放在一处,便于管理。所以各有千秋吧。
按照前面的惯例,得说说连接是如何实现的,其实也就是将连接地址放到<a href = ></a>标签中,将href属性值设置为要链接的地址,要显示的内容放在标签里就OK啦。

6.图片####

插入图片的方式怎么说呢,我总觉得和连接大同小异,只是多了一个!,还有连接路径变成了图片的存储路径,其他在格式上在没有不同。
插如图片的方式有两种,同样是行内式参考式,格式如下:

行内式:
![这是心声](http://upload-images.jianshu.io/upload_images/3832445-dbf3cebd2ecc994f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
参考式:
![哈哈哈哈][ItsTime]
[ItsTime]: http://upload-images.jianshu.io/upload_images/3832445-3e07a6d3145b36ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

效果如下
行内式:

这是心声

参考式:
![哈哈哈哈][ItsTime]
[ItsTime]: http://upload-images.jianshu.io/upload_images/3832445-3e07a6d3145b36ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
对于插入图片的实现,其实就是借助了<img></img>标签,在标签中,添加了src属性,指向图片的存储路径,从而使图片显示。如果想要调整图片大小,可以直接利用这个标签的属性来插入并编辑图片。

7.表格####

目前还没用过呢,不过看简书给的样板,大概可以理解,就是说表头和内容间要有一行| :-------------: |:-------------:| :-----:|用来区分,并且定义对齐方式。具体规则如下:
|用来定义列
--用来区分表头和内容,上面的为表头,下面的为内容
:用来定义对齐方式,不加冒号为默认(表头居中,内容左对齐);左边冒号,右边没有冒号为左对齐;左边没有冒号,右边有冒号为右对齐;两边都有冒号为居中对齐。
另外要注意的是在列表时,表格与文字内容要有一行间隔

| Tables | Are | Cool |
| ------------- | :------------- | :-----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

效果如下:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

那表格在HTML文件里自然就是通过<table></table>来实现的。

8.引用####

引用是个好东西(在我看来,就是有个背景,至少让我看着很舒服)。
Markdown 标记区块引用是使用类似 email 中用 >的引用方式。

举个栗子

Markdown 编辑引用时是这样的:

>荆轲刺秦王
...
  >>小孩子不要看`**`哦(嵌套引用)
>(这样可以跳出嵌套)
>By 非著名新闻工作者

显示出来时,是这样的:

荆轲刺秦王
...

小孩子不要看**

By 非著名新闻工作者

多了一条边,还有个淡淡的背景,看着就是不一样。
不过既然是引用,那么就是说是用来标记不是自己写的内容的,所以在一篇原创文章中,这种格式还是尽量少出现较好。引用的内容是放在<blockquote></blockquote>标签中的。(这个标签以前还真是没见过呢)

9.代码引用####

其实这篇文章用得最多的格式就是代码引用了。代码引用有两种,其一,行内代码引用;其二,多行代码引用,又叫代码块

  • 行内代码引用
    行内代码引用,其定义符号是 `,使用行内代码引用,被它标记的代码直接放入<code></code>标签中。在我看来其用处是小而精的,因为它可以和文本内容混合,所以一方面注定了它不适合引用大量代码,另一方面也明确了它的作用,就是用来在文本内容中指出要提及到的代码片段,或者用来指明不需要Markdown解释器翻译的部分,例如我在提及**的作用时,如果对于文段内的**符号不用行内代码引用,就可能会有其他效果出现(其实这里也可以用反斜杠)。另外,还有当我在文本内容中提及一些HTML标签时,如果不用行内代码引用,有些标签将无法显示。其用法如下:
无行内代码引用的情况:<strong></strong>
有行内代码引用的情况:`<strong></strong>`

其效果如下:
无行内代码引用的情况:<strong></strong>(标签消失了。。。)
有行内代码引用的情况:<strong></strong>

  • 代码块
    代码块就是用来在文章中嵌入代码的,文中已有许多例子,被代码块包裹的代码将不会被编译,这样有助于阅读代码。定义方法就是利用 ``` 在首行和尾行进行标记。被它标记的代码块是存在于<pre></pre>标签中的<code></code>标签中。
```(起始标记)
这里写代码
......
```(结尾标记)

总结####

前天通过看同期的博客有初步学习Markdown,但是其实也就只是学到了刚入门,并就遇到的目录问题写了一篇博客。后来发现需要完成一个Markdown的任务,这才静下心来,又细细过了一遍基础的九种语法,真是有种“纸上得来终觉浅,绝知此事要躬行”的感觉。至此,这个任务应该是完成了,但这也只是个开始,这种做任务,攒经验的感觉还是很棒的。
该去交任务啦~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容

  • 为什么学习Markdown 自从搭建了 Hexo 博客之后,发现还有 Markdown 这种写文章的方法,想到以后...
    lifeColder阅读 20,103评论 10 216
  • 为了方便查找使用我就留一份(部分修改)在这作者地址在下方:<< 访问 Wow!Ubuntu Markdown 语法...
    公孙墨岚阅读 1,781评论 0 5
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,234评论 25 707
  • << 访问 Wow!Ubuntu NOTE: This is Simplelified Chinese Edit...
    im蚂蚁阅读 1,441评论 4 4
  • 那些曾经看过的温柔的眼眸 那些不动声色但却真实的感受 我知道你从我身边走过 反复踟蹰 终没开口 我在位上摇头 叹息...
    栾风阅读 188评论 0 1