为什么要使用Markdown语法编译我们的文本？

很不喜欢有的人写文章，从前到后全都是小四号，密密麻麻的，看到这我想你也会和我一样丧失掉继续看下去的兴趣了吧；

如果你的文章标题是标题，段落时段落，链接是链接，会有更多人愿意花更多的时间仔细研读一下你的文章，不管你的文采怎么样，首先你已将抓住了我的眼球，吸引了我的注意力不是么？

所以做事情，要么不做，要做就做好，我觉得写博客是一件很消耗一个人精力和时间的事情，如果你写了，没人去看，那不是更加的没意义么？

我是一名前端攻城狮，从去年就开始在Hexo上写博客，我觉得Markdown语法和HTML、CSS语法很相似，说白了它就类似于HTML使用正确的标签，CSS添加样式，使文本更加的语义化，让人一目了然，在越来越注重用户体验的当下，是时候花点时间看一下Markdown语法了，相信会对你有所帮助。

怎么使你的文本变得更加的丰富多彩呢，下面就写一下我经常用到的样式对应的语法。

好吧，我的职业病又要犯了，那就联系到我的职业开始说一说这个语法；

一篇文章，就像我即将要做的一个页面，只不过是它是由简单的HTML标签+CSS样式+JS操作来完成的，那么文章肯定有标题、列表、图片、段落等等，不同的标签有不同的表现形式，首先我们应该使用正确的标签做正确的事；

1. 关于标题

使用===或者---或者#

1). 写法一：

主标题

=======================

副标题

-----------------------

表现形式：

主标题

副标题

2). 写法二：

分为六级标题，类似于家族中的

~

标签

# h1，一级标题

## h2，二级标题

### h3，三级标题

#### h4，四级标题

##### h5，五级标题

###### h6，六级标题

表现形式：

h1，一级标题

h2，二级标题

h3，三级标题

h4，四级标题

h5，五级标题

h6，六级标题

2. 关于注释

这里注释使用右尖括号--------->

不是代码中的注释、 //、 /* */

代码中的注释具体写法请参照我之前的总结，下面是跳转链接

写法：

> 这是一段注释

效果：

这是一段注释

当然注释可以实现嵌套，具体的样子你可以试试，比如：

我是前端工程师

喜欢写博客

喜欢看书，喜欢生活

我是前端工程师

哈哈，撸代码

顺便看书，喝咖灰

我是前端工程师

吃饭，睡觉

打豆豆

》 其实我感觉都差不多，只不过>的数量不一样

3. 关于列表

3.1 无序列表

无序列表就是前面加个小圆点，看起来更清晰点

对应于html中：

• 无序列表1
• 无序列表2
• 无序列表3

三种写法，使用 * 或 + 或 - ：

使用 * ：

* 无序列表1

* 无序列表2

* 无序列表3

使用 + ：

+ 无序列表4

+ 无序列表5

+ 无序列表6

使用 - ：

- 无序列表7

- 无序列表8

- 无序列表9

三者效果相同：

*使用 **：

无序列表1

无序列表2

无序列表3

使用 + ：

无序列表4

无序列表5

无序列表6

使用 - ：

无序列表7

无序列表8

无序列表9

3.1.2 无序列表的的嵌套

写法：

* 呆萌小二郎

* 23岁

* 前端工程师

喜欢看书，撸代码，写博客...

* 呆萌小二郎2

* 嘻嘻哈哈

* 开心

* 呆萌小二郎3

展示效果：

呆萌小二郎

23岁

前端工程师

喜欢看书，撸代码，写博客...

呆萌小二郎2

嘻嘻哈哈

开心

呆萌小二郎3

3.2 有序列表

有序列表就是前面加个序列号

对应于html中：

1. 有序列表1
2. 有序列表2
3. 有序列表3

写法：

1. 有序列表1

2. 有序列表2

3. 有序列表3

效果：

有序列表1

有序列表2

有序列表3

注意：

---------->即使前面的标号写错了，它会默认按顺序升序排列

1. 有序列表1

3. 有序列表3

2. 有序列表2

效果：

有序列表1

有序列表3

有序列表2

4. 制作超链接

类似于标签的跳转，需要一个跳转地址

写法：

[链接文字描述](链接地址)

或

举个栗子：

[呆萌小二郎博客跳转链接](http://blog.zhouminghang.xyz)

度娘一下，你就知道：

效果如下：

》 如果你写的链接地址是无效地址，相当于空链接，无法跳转

5. 图片链接


建议制作自己的图片外链，不建议放本地的图片，加载不到；

可以参照我之前的做法，使用千牛云制作网络图片外链；

如果你的图片外链地址失效或者是无效地址，将加载不到图片，图片是裂图，如下：

举个栗子(有效图片地址)：


daiMengXiaoerLang

6. 设置斜体

*斜体写法1* 和 _斜体写法2_

效果如下：-----》 斜体写法1 和 斜体写法2

7. 设置加粗

写法：

**熊仔仔的呆萌小媳妇** 是 __Cc__

展示效果：-----> 熊仔仔的呆萌小媳妇 是 Cc

8. 设置分隔符，也就是下划线效果

写法：

* * *

*****************

- - -

-----------------

展示效果：

9. 关于贯穿文字的效果

写法： 中文双波浪符包裹

一般用于~~错误信息的~~

效果如下：----> 一般用于错误信息的

10. 关于代码的写法和效果如下

写法：

比较短的或单行代码使用英文反撇号包裹，

多行或者代码块使用3个反撇号包裹

`单行代码`

`三个英文反撇号`

多行代码(

\这里用来转义符号，

类似于html中单双引号多层嵌套要转义

)

`三个英文反撇号`

效果如下：

单行代码

多行代码(

\这里用来转义符号，

类似于html中单双引号多层嵌套要转义

)

举个栗子：

var person = {};

person.name = 'daimengxiaoerlang';

person.age = 23,

person.job = 'webEngineer',

person.hobby = function() {

console.log(this.name + ', is a ' + this.job + ',' + "He loves the front work and is good at reading and writing code.");

};

console.log(person.hobby()); // daimengxiaoerlang, is a webEngineer,He loves the front work and is good at reading and writing code.

我的博客 http://blog.zhouminghang.xyz

11. 突然发现个好玩的，代码块之隔行变色，就是要搞事情，你知道怎么玩么？

如果世界漆黑，

其实你很美

在。。。。。。

很失败啊

这个效果，怎么对齐嘞

装逼失败啊，哈哈

+ 以上差不多够用了吧,后续想到什么在添加吧 +

提示：

本文涉及到的! [] () 均为英文符号

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

--daiMengXiaoerLang

--为信仰而生

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++