Markdown(.md)語法的基本使用

簡介:此文檔主要介紹了Markdown的基本語法使用,示例及語法

目錄

一:標題

二:段落及格式

2.1:字體

2.2:分割線

2.3:刪除線

2.4:下劃線

2.5:腳註

三:列表

3.1:單級列表

3.2:有序列表

3.2:列表嵌套

四:區塊

4.1:區塊

4.2:區塊嵌套

4.3:區塊中使用列表

4.4:列表中使用區塊

五:代碼

5.1:代碼

5.2:代碼區塊

六:鏈接

6.1:鏈接

6.2:高級鏈接

七:圖片

7.1:圖片

7.2:img標籤格式

7.3:本地圖片

八:表格

8.1:表格

8.2:對齊方式

九:其他

9.1:設置文字顏色及字體

9.2:高亮文字底色


一:標題

<span style="color:#333333"># 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題</span>

二:段落及格式

Markdown 段落沒有特殊的格式,直接編寫文字就好,段落的換行是使用兩個以上空格加上回車

2.1:字體

<span style="color:#333333">*斜體文本*
**粗體文本**
***粗斜體文本***</span>

斜體文本

粗體文本

斜粗文本

2.2:分割線

<span style="color:#333333">你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線:
***
* * *
*****
- - -
----------</span>

2.3:刪除線

<span style="color:#333333">RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~</span>

s刪除

2.4:下劃線

下劃線可以通過 HTML 的 標籤來實現:

<span style="color:#333333"><u>帶下劃線文本</u></span>

下劃線

2.5:腳註

腳註是對文本的補充說明。

Markdown 腳註的格式如下:

<span style="color:#333333">[^要註明的文本]</span>

以下實例演示了腳註的用法:

<span style="color:#333333">創建腳註格式類似這樣 [^RUNOOB]。
​
[^RUNOOB]: 菜鳥教程 -- 學的不僅是技術,更是夢想!!!</span>

腳註這個是一個腳註

[這個是一個腳註]  我是最帥的

三:列表

3.1:單級列表

Markdown 支持有序列表和無序列表。

無序列表使用星號(*)、加號(+)或是減號(-)作爲列表標記:

<span style="color:#333333">* 第一項
* 第二項
* 第三項</span>
  • *號加空格

  • 回車即可

3.2:有序列表

有序列表使用數字並加上 . 號來表示,如:

<span style="color:#333333">1. 第一項
2. 第二項
3. 第三項</span>
  1. 數字.空格

  2. 回車即可

3.2:列表嵌套

列表嵌套只需在子列表中的選項添加四個空格即可:

<span style="color:#333333">1. 第一項:
    - 第一項嵌套的第一個元素
    - 第一項嵌套的第二個元素
2. 第二項:
    - 第二項嵌套的第一個元素
    - 第二項嵌套的第二個元素</span>
  1. 數字.加空格

    • *號加空格

      • -號加空格

      • 但是

        • ds

  2. 可多級

四:區塊

4.1:區塊

Markdown 區塊引用是在段落開頭使用 > 符號 ,然後後面緊跟一個空格符號:

<span style="color:#333333">> 區塊引用
> 菜鳥教程
> 學的不僅是技術更是夢想</span>

區塊使用(>無需空格)

回車繼續

4.2:區塊嵌套

另外區塊是可以嵌套的,一個 > 符號是最外層,兩個 > 符號是第一層嵌套,以此類推:

<span style="color:#333333">> 最外層
> > 第一層嵌套
> > > 第二層嵌套</span>

一層

二層

三層

4.3:區塊中使用列表

區塊中使用列表實例如下:

<span style="color:#333333">> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項</span>

列表

  1. 數字加空格

  2. 回車繼續

    • 嵌套也行

    • 回車繼續

4.4:列表中使用區塊

如果要在列表項目內放進區塊,那麼就需要在 > 前添加四個空格的縮進。

區塊中使用列表實例如下:

<span style="color:#333333">* 第一項
    > 菜鳥教程
    > 學的不僅是技術更是夢想
* 第二項</span>
  1. 數字加空格

    4個空格 > >回車即可

  2. 繼續回車

五:代碼

5.1:代碼

如果是段落上的一個函數或片段的代碼可以用反引號把它包起來(`),例如:

<span style="color:#333333">`printf()` 函數</span>

代碼

5.2:代碼區塊

你也可以用 ``` 包裹一段代碼,並指定一種語言(也可以不指定):

<span style="color:#333333">```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
​```</span>
<span style="color:#333333">```java回車(可以直接設置這是一個java代碼)</span>

六:鏈接

6.1:鏈接

鏈接使用方法如下:

<span style="color:#333333">[鏈接名稱](鏈接地址)

或者

<鏈接地址></span>

鏈接

這是一個鏈接https://www.runoob.com/markdown/md-link.html

6.2:高級鏈接

我們可以通過變量來設置一個鏈接,變量賦值在文檔末尾進行:

<span style="color:#333333">這個鏈接用 1 作爲網址變量 [Google][1]
這個鏈接用 runoob 作爲網址變量 [Runoob][runoob]
然後在文檔的結尾爲變量賦值(網址)

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/</span>

變量

[1]  https://www.runoob.com/markdown/md-link.html 

七:圖片

7.1:圖片

Markdown 圖片語法格式如下:

<span style="color:#333333">![alt 屬性文本](圖片地址)

![alt 屬性文本](圖片地址 "可選標題")</span>
  • 開頭一個感嘆號 !

  • 接着一個方括號,裏面放上圖片的替代文字

  • 接着一個普通括號,裏面放上圖片的網址,最後還可以用引號包住並加上選擇性的 'title' 屬性的文字。

7.2:img標籤格式

Markdown 還沒有辦法指定圖片的高度與寬度,如果你需要的話,你可以使用普通的 <img> 標籤。

<span style="color:#333333"><img src="http://static.runoob.com/images/runoob-logo.png" width="50%"></span>

 

7.3:本地圖片

此.md文件的同級目錄下創建img文件夾,訪問此文件下的圖片..\的方式訪問,

![alt 屬性文本](圖片地址)

目錄結構:

![本地圖片](..\markdown\img\**.jpg)

八:表格

8.1:表格

Markdown 製作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。

語法格式如下:

<span style="color:#333333">|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |</span>
表頭 必需兩個
   

8.2:對齊方式

我們可以設置表格的對齊方式:

  • -: 設置內容和標題欄居右對齊。

  • :- 設置內容和標題欄居左對齊。

  • :-: 設置內容和標題欄居中對齊。

實例如下:

<span style="color:#333333">| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |</span>
左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

九:其他

9.1:設置文字顏色及字體

採用font標籤設置文字顏色

<span style="color:#333333"><font color=red>***starters***</font></span>

starters

<span style="color:#333333">Size:規定文本的尺寸大小,取值從 1 到 7 ,瀏覽器默認值是 3.
<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font>
<font face="STCAIYUN">我是華文彩雲</font>
<font color=#0099ff size=3 face="黑體">color=#0099ff size=3 face="黑體"</font>
<font color=#00ffff size=4>color=#00ffff size=4</font>
<font color=gray size=5>color=gray size=5</font></span>

Size:規定文本的尺寸大小,取值從 1 到 7 ,瀏覽器默認值是 3. 我是黑體字 我是微軟雅黑 我是華文彩雲 color=#0099ff size=3 face="黑體" color=#00ffff size=4 color=gray size=5

9.2:高亮文字底色

<span style="color:#333333"><table>
    <tr>
        <td bgcolor=#FF4500>十六進制顏色值:#FF4500, rgb(255, 69, 0)</td>
        <td bgcolor=#FFD700>十六進制顏色值:#FF4500, rgb(255, 69, 0)</td>
    </tr>
    <tr>
        <td bgcolor=#FF4500>十六進制顏色值:#FF4500, rgb(255, 69, 0)</td>
        <td bgcolor=#FFD700>十六進制顏色值:#FF4500, rgb(255, 69, 0)</td>
    </tr>
</table></span>
十六進制顏色值:#FF4500, rgb(255, 69, 0) 十六進制顏色值:#FF4500, rgb(255, 69, 0)
十六進制顏色值:#FF4500, rgb(255, 69, 0) 十六進制顏色值:#FF4500, rgb(255, 69, 0)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章