做任务、攒经验系列——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标题######

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

2.分隔线####

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

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

效果如下:





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

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

---
开
___
啦

效果如下:






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


标签。

3.强调####

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

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

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

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

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

4.列表####

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

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

得到的效果如下

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

      效果如下:

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

          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

          就结果而言,两种方式的效果是一样的。但在我看来,行内式较为方便简洁,参考式可能对于一篇文章中出现大量的链接时,可以将链接地址统一放在一处,便于管理。所以各有千秋吧。
          按照前面的惯例,得说说连接是如何实现的,其实也就是将连接地址放到标签中,将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
          

          效果如下
          行内式:

          做任务、攒经验系列——Markdown入门学习_第1张图片
          这是心声

          参考式:
          ![哈哈哈哈][ItsTime]
          [ItsTime]: http://upload-images.jianshu.io/upload_images/3832445-3e07a6d3145b36ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
          对于插入图片的实现,其实就是借助了 标签,在标签中,添加了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文件里自然就是通过

          来实现的。

          8.引用####

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

          做任务、攒经验系列——Markdown入门学习_第2张图片
          举个栗子

          Markdown 编辑引用时是这样的:

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

          显示出来时,是这样的:

          荆轲刺秦王
          ...

          小孩子不要看**

          By 非著名新闻工作者

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

          标签中的。(这个标签以前还真是没见过呢)

          9.代码引用####

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

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

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

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

          总结####

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

          你可能感兴趣的:(做任务、攒经验系列——Markdown入门学习)