markdown語法

1. md 教學#

這是一個 md 格式的教學文件，主要用於進行 md 文件練習，文章撰寫的比較倉促，如有不足和錯誤，希望指出，感謝您的理解和支持

1.1 md 目錄#

TOC 會自動為當前文檔生成目錄，目錄是根據當前文檔的標題來生成的，TOC 寫在文檔什麼位置，目錄就會出現在哪個位置

有些網站不支持 TOC 功能

1.2 md 文字修飾#

在 markdown 文檔中，可以為文字添加加粗，斜體，刪除線，下劃線，當然這些效果也是可以疊加的，例如英文就比較適宜使用斜體，例如：*This is a test mark down text.* 而當我們發現已經寫過的內容存在誤導他人或者本身就錯誤明顯的時候，我們可以使用刪除字符來刪除文字，比如：~~太陽是從東邊出來的~~當然除了使用加粗文字來強調之外，你也可以使用為句子畫橫線的方法，例如：使用這種方法就可以達到畫橫線的目的

1.3 md 分割線#

在 md 文件中分割線是使用三個星號或者三個 "-" 來實現的，具體效果，你可以看我標題之間的內容。

1.4 列表#

有序列表
有序列表是使用數字和點來完成的，這個很好理解，因為我們平時的任務清單也是類似這個形式，比如把大象放進冰箱有幾步：

打開冰箱門
把大象放進冰箱
關上冰箱門

無序列表
無序列表非常簡單，只需要用加減號或者星號即可實現，還是剛才那個例子
- 打開冰箱門
- 把大象放進冰箱
- 關上冰箱門
待辦列表
待辦列表主要是用來表現事情是否完成比如下面的內容：
- [] 做博客網站
- [] 複習高數和數邏
- 擺爛
列表嵌套
這一部分的內容我覺得不需要做什麼教學，實在是很簡單啦，就是在下一行前用一次 Tab 即可

1.5 引用#

一级引用
引用使用的是大於號，例如我下面的句子：

橫眉冷對千夫指，俯首甘為孺子牛

多級引用
幾級引用，就有幾個 >, 自己試著就行了

1.6 代碼塊#

代碼的用法也是兩種，行內代碼和多行代碼。下面是一些具體例子：

行內代碼
C 語言第一課上的是Hello,World
多行代碼

	int a,b,c;
	scanf("%d",&a,&b);
	c=a+b;
	printf("%d",c);

註釋：如果想實現多行代碼的縮進排版，前面一定要有空行，同時每行要有一個制表符

1.7 表格#

表格的書寫方法也是比較容易的，用豎線來分隔不同的單元格，使用橫線 - 來分隔表頭和其他行，下面我以遺傳病的分類為例，寫一個內容吧。

常見遺傳病	舉例
單基因遺傳病	白化病、先天性耳聾
多基因遺傳病	糖尿病、高血壓
染色體病	唐氏綜合徵
體細胞遺傳病	惡性腫瘤
線粒體遺傳病	Leber 遺傳性視神經病

1.8 超級鏈接#

表示方法
超級鏈接的表示方式如下：
[超級鏈接文字] (網址)，所以最後你看到的實際上只有文字了，但是其實文字是鏈接到一個網址的，比如：[我的博客] (https://kkkk33t.github.io/)
直接顯示鏈接
使用 <> 符號將連接地址括住：比如< https://www.baidu.com/ >
使用錨點
使用錨點，首先是先定義錨點，然後再引用錨點。關於錨點的使用我會在下一次更加詳細的介紹

1.9 圖片#

插入圖片有四種方式，分別是：

插入本地圖片
插入網絡圖片
把圖片存入 Markdown 文件
使用 HTML <img> 標籤

引入圖片的基本格式是![描述](路徑)，你可以選擇適合自己的方式。

1.9.1 插入本地照片#

![描述圖片的文字](圖片本地路徑) 例如： ![niubi](23-06-01/wallhaven-m3ppwy.jpg)
** 註釋：** 這裡的路徑可以是相對的，也可以是本地的。

1.9.2 插入網絡圖片#

![](圖片的網絡鏈接)
這種方式應該是公認的最好的方式了，不過重點是圖床的選擇，關於圖床，我會再下一次更加詳細的介紹

1.9.3 把圖片存入 markdown 文件#

將圖片以 base64 編碼的形式存入 Markdown 會增加文件大小，但這種方法的好處是可以直接將圖片嵌入文檔中，不需要另外引用圖片文件。下面是具體的步驟：
將要存入 Markdown 文件的圖片轉換為 base64 編碼格式，可以使用在線工具實現，例如：
https://www.base64-image.de/
在 Markdown 文件中添加以下語法：
![描述文字](data:image/png;base64,base64編碼內容)其中，描述文字是圖片的文字描述，base64 編碼內容是第一步得到的 base64 編碼字符串。
如果有多張圖片需要存入 Markdown 文件中，可以單獨聲明圖片的 base64 字符串，例如：
[圖片1]: data:image/png;base64,base64編碼內容1 [圖片2]: data:image/png;base64,base64編碼內容2
正文內容中插入圖片：
![描述文字1][圖片1] ![描述文字2][圖片2]
這種方式不太方便，使用頻率極低，不建議使用

1.9.4 使用 HTML`<img>` 標籤#

我個人認為這是一種很好的方式，主要是可以控制圖片的大小比較方便，上面幾種方式的調整大小方式我還在研究，具體請看我以後的補充吧
舉例：

<img src="https://cdn.jsdelivr.net/gh/kkkk33t/cdntc/*img/*wallhaven-m3ppwy.jpg" width=100/>

1.9.5 補充：通過使用`<img>`標籤更改圖片尺寸，支持設定寬度、高度、對齊方式等屬性。#

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="600" />

說明：屬性後面的數值也以寫成百分比的形式，如 width = “60%”
帶尺寸的圖片，需同時指定：width = “600”，height = “600”
寬度確定高度等比例的圖片，只要指定：width = “600”
高度確定寬度等比例的圖片，只要指定：height = “600”

1.9.5.1 調整對齊方式一#

可通過在<img>標籤內添加 align=“center” 屬性修改圖片的對齊方式。

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  align = "right"  width="600" />

說明：該種方法也可以實現左圖右字或左字右圖的效果
居中對齊：align = “middle”，不知道為啥在 CSDN 中測試的時候居中不起作用
靠左對齊：align = “left”
靠右對齊：align = “right”

1.9.5.2 調整對齊方式二（推薦)#

也可通過將<img>標籤包裹在 . . . 標籤內修改圖片的對齊方式。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

通過這種方式還可以實現多張圖片的並列排版，只需在 . . . 標籤內添加多行<img>標籤。每行圖片的個數會根據圖片的大小及瀏覽器窗口的大小自動進行調整。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

說明：對單張和多張圖片均有效，使用 html 插入圖片時align=可以省略，但是將圖片右置的時候不能省略

1.9.5.3 實現左圖右文或左文右圖的效果。#

可通過將<img>標籤包裹在 . . . 標籤內，並在<img>標籤內添加 align=“left” 屬性來實現。

（1）左圖右文
說明：需要左右混排的文字放在 . . . 標籤內，且需在<img>標籤行的下面。放在 . . . 標籤外的排版為正常的上下排版樣式。
左圖右文：align = “left”
左文右圖：align = “right”

<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="400"  align="left" />
文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。文字在右邊，圖片在左邊。
</p>

（2）左文右圖

文字在左邊，圖片在右邊。文字在左邊，圖片在右邊。文字在左邊，圖片在右邊。文字在左邊，圖片在右邊。文字在左邊，圖片在右邊。

1.9.5.4 給圖像加個標註：#

Figure 1. Lena

2.0 文字的上下標#

上標使用^{，下標使用_，如下：}

下標：X<sub>2</sub>
上標：Y<sup>2</sup>
下標文字: X<sub>上標文字</sub>
上標文字: Y<sup>上標文字</sup>

效果如下：
下標：X₂

上標：Y²

下標文字: X_下標文字

上標文字: Y^上標文字

2.1 文字縮寫#

文字縮寫使用 HTML 標籤，如下所示：

<abbr title="Hyper Text Markup Language">HTML</abbr> 是一種標記語言。

效果如下：

HTML 是一種標記語言。

2.2 註腳#

使用註腳也是分兩步，一是定義註腳，二是使用註腳。
定義註腳的語法如下：

[^註腳名稱]:註腳內容
中括號內有一個上尖括號 ^，後邊緊跟註腳名稱，中括號後邊是一個冒號:，再後邊是註腳內容。一般註腳定義會被顯示在文檔的最後，多個註腳定義不能寫在同一行。使用註腳時，只需要在需要註解的文字後邊加上 [^ 註腳名稱] 即可，如下：

註腳示例[^note]
註腳示例二[^note2]
[^note]:這是註腳示例內容        
[^note2]:這是註腳示例內容2

效果：
註腳示例¹

註腳示例二²

2.3 Markmap 思維導圖#

Markmap 是一個支持 Markdown 語法的思維導圖工具，通過 Markmap，你可以使用 Markdown 語法來生成思維導圖。Markmap 開源免費，簡單易用。你可以在這裡將你寫的 Markdown 文檔轉換為思維導圖。
在 Markmap 中支持的 Markdown 符號有：

標題符號#
無須列表符號 -
分隔符 ---
超級鏈接符號和 <>
文字修飾，例如加粗，斜體，刪除線
代碼塊，包括行內代碼塊和多行代碼塊
Markmap 支持:
標題符號
- 一級標題
- 二級標題
- 三級標題
無序列表
- 列表 1
- 列表 2
分隔符
`- 第一部分
---``
- 第二部分
  --- ``
- 第三部分
- 第四部分
  `
超級鏈接

- <https://www.google.com>
- [Google](https://www.google.com)

文字修飾
- 斜體
- 加粗
- ~~刪除線~~

代碼塊
- 單行代碼塊 -
多行代碼塊1
多行代碼塊2
多行代碼塊3

其效果如下：

這是註腳示例內容 ↩
這是註腳示例內容 2 ↩