為什么要使用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

有序列表2

有序列表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

--為信仰而生

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

總結

以上是生活随笔為你收集整理的HTML超链接文字加粗,Markdown语法之--标题/注释/超链接/下划线/图片/代码/贯穿线/斜体加粗/列表，使你的文本更丰富...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。