.MD語(yǔ)法入門

.md即markdown文件的基本常用編寫語(yǔ)法,是一種快速標(biāo)記、快速排版語(yǔ)言,現(xiàn)在很多前段項(xiàng)目中的說明文件readme等都是用.md文件編寫的,而且很多企業(yè)也在在鼓勵(lì)使用這種編輯方式,特別作為一個(gè)前端從業(yè)者更要學(xué)會(huì)使用這種語(yǔ)言。下面就簡(jiǎn)單和大家分享一些.md基本語(yǔ)法

一、基本符號(hào):* - +. >

基本上所有的markdown標(biāo)記都是基于這四個(gè)符號(hào)或組合,需要注意的是,如果以基本符號(hào)開頭的標(biāo)記,注意基本符號(hào)后有一個(gè)用于分割標(biāo)記符和內(nèi)容的空格。

二、標(biāo)題

1.前面帶#號(hào),后面帶文字,分別表示h1-h6,只到h6,而且h1下面會(huì)有一條橫線

# 一級(jí)標(biāo)題
## 二級(jí)標(biāo)題
### 三級(jí)標(biāo)題
#### 四級(jí)標(biāo)題
##### 五級(jí)標(biāo)題
###### 六級(jí)標(biāo)題

2.相當(dāng)于標(biāo)簽閉合

# 一級(jí)標(biāo)題 #
## 二級(jí)標(biāo)題 ##
### 三級(jí)標(biāo)題 ###
#### 四級(jí)標(biāo)題 ####
##### 五級(jí)標(biāo)題 #####
###### 六級(jí)標(biāo)題 #####

效果如下:


標(biāo)題.png
三、列表
  1. 無(wú)序列表
//形式一
+ a
+ b
+ c
//形式二
- d
- e
- f
//形式三
* g
* h
* i

以上三種形式,效果其實(shí)都是一樣的:
無(wú)序列表.png
  1. 有序列表
//正常形式
1. abc
2. bcd
3. cde
//錯(cuò)序效果
2. fgh
3. ghi
5. hij

效果圖:
有序列表及錯(cuò)序效果圖.png

如圖,注意,數(shù)字后面的點(diǎn)只能是英文的點(diǎn),有序列表的序號(hào)是根據(jù)第一行列表的數(shù)字順序來的,
錯(cuò)序列表的序號(hào)本來是序號(hào)是亂的, 但是還是顯示 2 3 5

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

效果圖:
嵌套列表.png

列表可以嵌套,使用時(shí)在嵌套列表前按 tab 或 空格 來縮進(jìn),去控制列表的層數(shù)

四、引用說明區(qū)塊

對(duì)某個(gè)部分做的內(nèi)容做一些說明或者引用某某的話等,可以用這個(gè)語(yǔ)法。

  1. 正常形式
> 引用內(nèi)容、說明內(nèi)容。在語(yǔ)句前面加一個(gè) > ,注意是英文的那個(gè)右尖括號(hào),注意空格,引用因?yàn)槭且粋€(gè)區(qū)塊,理論上是應(yīng)該什么內(nèi)容都可以放,比如說:標(biāo)題,列表,引用等等。

效果圖:
區(qū)塊.png
  1. 嵌套區(qū)塊
    這里我只介紹一下我常用的方法,也是個(gè)人認(rèn)為比較規(guī)范的一種方法,就是給區(qū)塊的下一級(jí)區(qū)塊多加一個(gè)右尖括號(hào)
> 一級(jí)引用
>> 二級(jí)引用
>>> 三級(jí)引用
>>>> 四級(jí)引用
>>>>> 五級(jí)引用
>>>>>> 六級(jí)引用

效果圖:
嵌套區(qū)塊.png
五、代碼塊

在發(fā)布一些技術(shù)文章會(huì)涉及展示代碼的問題,這時(shí)候代碼塊就顯得尤為重要。

  1. 少量代碼,單行使用,直接用`包裹起來就行了
` shaoliangdaima,danhangshiyong `

效果圖:
單行代碼塊.png
  1. 大量代碼,需要多行使用,用```包裹起來
    ```
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
        daliangdaima,xuyaoduohangshiyong
    ```

效果圖:
多行代碼.png
六、鏈接
  1. 行內(nèi)式
    鏈接的文字放在[]中,鏈接地址放在隨后的()中,鏈接也可以帶title屬性,鏈接地址后面空一格,然后用引號(hào)引起來
[簡(jiǎn)書](http://www.itdecent.cn "創(chuàng)作你的創(chuàng)作"),
是一個(gè)創(chuàng)作社區(qū),任何人均可以在其上進(jìn)行創(chuàng)作。用戶在簡(jiǎn)書上面可以方便的創(chuàng)作自己的作品,互相交流。 
  1. 參數(shù)式
    鏈接的文字放在[]中,鏈接地址放在隨后的:后,鏈接地址后面空一格,然后用引號(hào)引起來
[簡(jiǎn)書]: http://www.itdecent.cn "創(chuàng)作你的創(chuàng)作"
[簡(jiǎn)書]是一個(gè)創(chuàng)作社區(qū),任何人均可以在其上進(jìn)行創(chuàng)作。用戶在簡(jiǎn)書上面可以方便的創(chuàng)作自己的作品,互相交流。
//參數(shù)定義的其他寫法
[簡(jiǎn)書]: http://www.itdecent.cn '創(chuàng)作你的創(chuàng)作'
[簡(jiǎn)書]: http://www.itdecent.cn (創(chuàng)作你的創(chuàng)作)
[簡(jiǎn)書]: <http://www.itdecent.cn> "創(chuàng)作你的創(chuàng)作"

以上兩種方式其效果圖都是一樣的,如下:
鏈接.png
七、圖片
  1. 行內(nèi)式
    和鏈接的形式差不多,圖片的名字放在[]中,圖片地址放在隨后的()中,title屬性(圖片地址后面空一格,然后用引號(hào)引起來),注意的是[]前要加上!
![my-logo.png](https://upload-images.jianshu.io/upload_images/13623636-6d878e3d3ef63825.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "my-logo")
  1. 參數(shù)式
    圖片的文字放在[]中,圖片地址放在隨后的:后,title屬性(圖片地址后面空一格,然后用引號(hào)引起來),注意引用圖片的時(shí)候在[]前要加上!
[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]
//參數(shù)定義的其他寫法
[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
八、分割線

分割線可以由* - _(星號(hào),減號(hào),底線)這3個(gè)符號(hào)的至少3個(gè)符號(hào)表示,注意至少要3個(gè),且不需要連續(xù),有空格也可以

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

以上代碼的效果圖均為:
分割線.png
九、其他
  1. 強(qiáng)調(diào)字體
    一個(gè)星號(hào)或者是一個(gè)下劃線包起來,會(huì)轉(zhuǎn)換為<em>傾斜,如果是2個(gè),會(huì)轉(zhuǎn)換為<strong>加粗
*md*    
**md**
_md_   
 __md__

效果圖:
強(qiáng)調(diào)字體.png
  1. 轉(zhuǎn)義
    基本上和js轉(zhuǎn)義一樣,\加需要轉(zhuǎn)義的字符
\\
\*
\+
\-
\`
\_
  1. 刪除線
    用~~把需要顯示刪除線的字符包裹起來
~~刪除~~

效果圖:
刪除線.png
十、表格
//例子一
|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

上面三個(gè)例子的效果一樣,由此可得:
1. 表格的格式不一定要對(duì)的非常起,但是為了良好的變成風(fēng)格,盡量對(duì)齊是最好的
2. 分割線后面的冒號(hào)表示對(duì)齊方式,寫在左邊表示左對(duì)齊,右邊為右對(duì)齊,兩邊都寫表示居中

效果圖如下:

表格.png


這篇文章的編寫借鑒了很多前輩的經(jīng)驗(yàn),同時(shí)鑒賞我自己的總結(jié),跟大家一起分享了。
即使遇到了不幸的災(zāi)難,已經(jīng)開始了的事情決不放棄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,917評(píng)論 25 709
  • 在經(jīng)歷了奧克蘭尋工無(wú)果和一段時(shí)間的游玩之后,決定南下暫停在惠靈頓這座城市過冬。 從朋友口中得到機(jī)場(chǎng)subway的招...
    我是長(zhǎng)今閱讀 1,188評(píng)論 12 4
  • 《思維導(dǎo)圖》這本書是我從一個(gè)朋友那看到她所畫的圖開始,我才知道還有個(gè)東西叫思維導(dǎo)圖,我就開始百度,去了解思維導(dǎo)圖這...
    仰慕兒閱讀 1,624評(píng)論 0 2
  • 創(chuàng)業(yè)期的企業(yè)要大家齊心協(xié)力,找對(duì)發(fā)展方向,進(jìn)入成熟期后制定合理的KPI并嚴(yán)格執(zhí)行,達(dá)到好的管理,促進(jìn)團(tuán)隊(duì)的進(jìn)步。 ...
    耿婷婷GTT閱讀 226評(píng)論 0 0
  • 斷舍離這三個(gè)字理解起來很容易,做起來好像也很簡(jiǎn)單,但真正深入其中,才發(fā)現(xiàn)里面有大學(xué)問,需要非常自制的人才能做到。這...
    好好種地閱讀 884評(píng)論 0 2

友情鏈接更多精彩內(nèi)容