.MD語法入門

轉載地址：https://www.jianshu.com/p/399e5a3c7cc5

 

.md即markdown文件的基本經常使用編寫語法,是一種快速標記、快速排版語言，如今不少前段項目中的說明文件readme等都是用.md文件編寫的，並且不少企業也在在鼓勵使用這種編輯方式，特別做爲一個前端從業者更要學會使用這種語言。下面就簡單和你們分享一些.md基本語法

1、基本符號：* - +. >

基本上全部的markdown標記都是基於這四個符號或組合，須要注意的是，若是以基本符號開頭的標記，注意基本符號後有一個用於分割標記符和內容的空格。

2、標題

1.前面帶#號，後面帶文字，分別表示h1-h6,只到h6，並且h1下面會有一條橫線

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

2.至關於標籤閉合

# 一級標題 #
## 二級標題 ##
### 三級標題 ###
#### 四級標題 ####
##### 五級標題 #####
###### 六級標題 #####

效果以下：

 

標題.png

3、列表

1. 無序列表

//形式一 + a + b + c //形式二 - d - e - f //形式三 * g * h * i 

 

 

以上三種形式，效果其實都是同樣的：

 

無序列表.png

2. 有序列表

//正常形式 1. abc 2. bcd 3. cde //錯序效果 2. fgh 3. ghi 5. hij 

 

 

效果圖：

 

有序列表及錯序效果圖.png

如圖，注意，數字後面的點只能是英文的點，有序列表的序號是根據第一行列表的數字順序來的，
錯序列表的序號原本是序號是亂的， 可是仍是顯示 2 3 5

3. 嵌套列表

//無序列表嵌套 + 123 + abc + bcd + cde + 465 + 789 //有序列表嵌套 1. abcd 1. abcde 2. abcde 3. abcde 2. bcde 3. cdef 

 

 

效果圖：

 

嵌套列表.png

列表能夠嵌套，使用時在嵌套列表前按 tab 或 空格 來縮進,去控制列表的層數

4、引用說明區塊

對某個部分作的內容作一些說明或者引用某某的話等，能夠用這個語法。

1. 正常形式

> 引用內容、說明內容。在語句前面加一個 > ，注意是英文的那個右尖括號，注意空格，引用由於是一個區塊，理論上是應該什麼內容均可以放，好比說：標題，列表，引用等等。

 

 

效果圖：

 

區塊.png

2. 嵌套區塊
   這裏我只介紹一下我經常使用的方法，也是我的認爲比較規範的一種方法，就是給區塊的下一級區塊多加一個右尖括號

> 一級引用 >> 二級引用 >>> 三級引用 >>>> 四級引用 >>>>> 五級引用 >>>>>> 六級引用 

 

 

效果圖：

 

嵌套區塊.png

5、代碼塊

在發佈一些技術文章會涉及展現代碼的問題，這時候代碼塊就顯得尤其重要。

1. 少許代碼，單行使用，直接用`包裹起來就好了

` shaoliangdaima,danhangshiyong ` 

 

 

效果圖：

 

單行代碼塊.png

2. 大量代碼，須要多行使用，用```包裹起來

``` daliangdaima,xuyaoduohangshiyong daliangdaima,xuyaoduohangshiyong daliangdaima,xuyaoduohangshiyong daliangdaima,xuyaoduohangshiyong daliangdaima,xuyaoduohangshiyong ``` 

 

 

效果圖：

 

多行代碼.png

6、連接

1. 行內式
   連接的文字放在[]中，連接地址放在隨後的()中，連接也能夠帶title屬性，連接地址後面空一格，而後用引號引發來

[簡書](https://www.jianshu.com "創做你的創做"), 是一個創做社區,任何人都可以在其上進行創做。用戶在簡書上面能夠方便的創做本身的做品,互相交流。 

2. 參數式
   連接的文字放在[]中，連接地址放在隨後的:後，連接地址後面空一格，而後用引號引發來

[簡書]: https://www.jianshu.com "創做你的創做" [簡書]是一個創做社區,任何人都可以在其上進行創做。用戶在簡書上面能夠方便的創做本身的做品,互相交流。 //參數定義的其餘寫法 [簡書]: https://www.jianshu.com '創做你的創做' [簡書]: https://www.jianshu.com (創做你的創做) [簡書]: <https://www.jianshu.com> "創做你的創做" 

 

 

以上兩種方式其效果圖都是同樣的，以下：

 

連接.png

7、圖片

1. 行內式
   和連接的形式差很少，圖片的名字放在[]中，圖片地址放在隨後的()中，title屬性（圖片地址後面空一格，而後用引號引發來）,注意的是[]前要加上!

![my-logo.png](https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo") 

2. 參數式
   圖片的文字放在[]中，圖片地址放在隨後的:後，title屬性（圖片地址後面空一格，而後用引號引發來）,注意引用圖片的時候在[]前要加上!

[my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo" ![my-logo.png] //參數定義的其餘寫法 [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 'my-logo' [my-logo.png]: https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 (my-logo) [my-logo.png]: <https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240> "my-logo" 

 

 

以上兩種方式其效果圖都是同樣的，以下：

 

my-logo.png

8、分割線

分割線能夠由* - _（星號，減號，底線）這3個符號的至少3個符號表示，注意至少要3個，且不須要連續，有空格也能夠

---
- - -
------
***
* * *
******
___
_ _ _
______

 

 

以上代碼的效果圖均爲：

 

分割線.png

9、其餘

1. 強調字體
   一個星號或者是一個下劃線包起來，會轉換爲<em>傾斜，若是是2個，會轉換爲<strong>加粗

*md*    
**md**
_md_   
 __md__

 

 

效果圖：

 

強調字體.png

2. 轉義
   基本上和js轉義同樣,\加須要轉義的字符

\\
\*
\+
\-
\`
\_

3. 刪除線
   用~~把須要顯示刪除線的字符包裹起來

~~刪除~~

 

 

效果圖：

 

刪除線.png

10、表格

//例子一 |123|234|345| |:-|:-:|-:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| //例子二 |123|234|345| |:---|:---:|---:| |abc|bcd|cde| |abc|bcd|cde| |abc|bcd|cde| //例子三 123|234|345 :-|:-:|-: abc|bcd|cde abc|bcd|cde abc|bcd|cde 

上面三個例子的效果同樣，由此可得：
1. 表格的格式不必定要對的很是起，可是爲了良好的變成風格，儘可能對齊是最好的
2. 分割線後面的冒號表示對齊方式，寫在左邊表示左對齊，右邊爲右對齊，兩邊都寫表示居中

效果圖以下：

 

表格.png

做者：憶小五 連接：https://www.jianshu.com/p/399e5a3c7cc5 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。