前言##
既然是入门学习,那还是要稳扎稳打,根据简书官方给出的献给写作者的 Markdown 新手指南和Markdown 语法说明 (简体中文版),将Markdown细细了解一下。下面就进入正题。
Markdown是什么?##
通过度娘,我们可以知道,
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
通俗的说,Markdown是一种标记规则,它通过一些约定好的符号来整理文本格式。
那么我们来体验一下:
Markdown形式的文本:我们来尝试一下**加粗**,*斜体*,还可以尝试[看看其他文章](//www.greatytc.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. 项目三
效果如下:
- 项目一
- 子项目
- 项目二
- 项目三
子项目可以视为项目一的子项,在书写时,在子项目的符号前注意添加一个tab。有序列表就是将列表项放到<ol></ol>
标签中的<li></li>
标签下,某项的子项就放到该list item下的<ol></ol>
标签中。以此类推。有序列表的序号不会因为认为定义而乱序。
5.链接####
链接是个有意思的功能,以前上知乎的时候就有见过,明明看着就是几个蓝字,但是点一下就别有洞天。在学了Markdown之后,更是对这种不把url地址直接写明的方式甚是喜欢。下来,我们就来看看Markdown的链接是如何定义的。
Markdown 支持两种形式的链接语法: 行内式 和参考式 两种形式。
不管是哪一种,链接文字都是用 [方括号] 来标记。也就是说链接的入口要用[]
框起来。
对于行内式而言,地址直接在入口后用()
括起来,如下格式:
[到处看看](//www.greatytc.com/p/7d3ff4831031)
产出的效果就是到处看看。
而对于参考式而言,则是在链接文字的括号后面再接上另一个方括号,而在第二个方括号里面要填入用以辨识链接的标记,如下格式:
[有点意思][here]
[here]://www.greatytc.com/p/806afc163dc4
产出效果就是[有点意思][here]
[here]://www.greatytc.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的任务,这才静下心来,又细细过了一遍基础的九种语法,真是有种“纸上得来终觉浅,绝知此事要躬行”的感觉。至此,这个任务应该是完成了,但这也只是个开始,这种做任务,攒经验的感觉还是很棒的。
该去交任务啦~