我在使用Markdown整理文檔的時候發(fā)現(xiàn)，Markdown本身對文本格式的排版很單一，只有編號、字體加粗、固定標題格式等一些基礎的排版，使用不夠靈活，好在Markdown中可以使用HTML，所以我利用HTML增加了一些板塊，方便對文檔進行標注或者分層整理。

一、標注重點

• 功能描述：在不同位置插入圖片作為重點標注。

• 實現(xiàn)效果：

數據分析方法（這是重點！需要進行重點標記）

• 代碼如下：

<img align = "left" ?src="https://img2023.cnblogs.com/blog/2843096/202303/2843096-20230315122541872-818598143.png" ?width="38" height="30">

• 使用場景：

1、標記：可以使用不同的圖片進行標記。那么這些圖片怎么來呢，首先搜索你想要的圖片，例如搜索“紫色五角星圖片”，然后復制圖片到word文檔中插入，點擊圖片格式，刪除圖片背景后處理成你想要的樣子，最后在md中插入圖片調整圖片的位置和大小。

2、存放圖片：例如在用md寫的簡歷中插入證件照，只需將代碼修改成如下形式：

<img align = "right" ?src="這里輸入圖片地址" ?width="114" height="100">

3、文字圍繞圖片：通過HTML可以設置圖片的位置和大小。實際應用效果如下：

輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

二、內容分層

• 功能描述：

有時候想用橫線劃分一下內容的層次，發(fā)現(xiàn)md中橫線與文字間的間距過大，且為固定不可調整。利用HTML可以調整橫線的寬度、顏色以及與文字的間距。

• md中的效果：

• 利用HTML實現(xiàn)效果：

項目

第一段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

第二段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

• 代碼如下：

<div> ? ?<div style="width:100%;height:4px;background:#a79d91;padding:0px 0px 0px 0px;"></div> ? ?<div style="margin-top:0.3%;font-size: 23px;color:#a79d91;font-family:'微軟雅黑';font-weight:500;">項目</div> ? ?<div title="第一段"> ? ? ? ?<span style="font-size:18px;color:#dbd0bf;font-family:'微軟雅黑';font-weight:400;">第一段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本</span> ? ?</div> ? ?<div title="第二段"> ? ? ? ?<span style="font-size:14px;color:#8b8d8e;font-family:'微軟雅黑';font-weight:400;">第二段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本</span> ? ?</div></div>

• 應用場景：

1、添加線上或者線下的文字：示例中給出的是線下添加文字，實際上既可以線上又可以線下添加文字，例如這樣：

項目標題

項目實施計劃

第一段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

第二段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

2、單獨添加橫線：也可以單獨添加一條橫線，用于隔開模塊與模塊之間的內容。

• 為什么這樣設計：

用橫線分隔開后，整體的排版更清晰，模塊間的邊界感更舒服，內容層次一目了然，有助于閱讀和理解。

三、文字居中加橫線

• 功能描述：

文字始終在橫線中間，并且文字和橫線的樣式都可以調整。

• 實現(xiàn)效果：

我是中間的文字,無論如何始終在中間

• 代碼如下：

<div style="width: 100%;height:4px;position: relative;background-color: #a79d91;margin: 2% 0 2% 0;text-align:center;"> ? ? <span style="display:inline-block;background-color: #FFF;padding: 0 20px;color: #303133;transform: translateY(-50%);font-size: 23px;">我是中間的文字,無論如何始終在中間 ? ? ? ?</span></div>

• 應用場景：

1、段落標題：適合放在段落中標題的部分。

2、分隔符：或者作為分隔符放在段與段之間。效果如下：

輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

下面是附錄內容

（1）輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

（2）輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

四、同一行分段調整

• 功能描述：

在同一行中的右側添加一段文字，并且文字樣式可調整。

• 實現(xiàn)效果：

項目名稱2020-2023

• 代碼如下：

<h3><a class="md-header-anchor"></a> ? ?<span>項目名稱</span> ? ?<span style="display:inline-block;position: absolute;right:0;color:red;font-size:18px;font-weight:540;line-height:2.2rem;">2020-2023</span></h3>

• 應用場景：

應用在段落標題中：右邊的文字可以起補充說明的作用，代替以往補充說明常用的“（）”，這樣整體排版也很對稱。

五、添加外框

• 功能描述：

一個可以調整樣式的外框，里面可以輸入可調整樣式的文本。

比如在這樣的樣式中，添加一個方框會顯得內容非常有條理，我時常會用md中的代碼塊替代方框，但是代碼塊中編輯的文字不可以調整樣式，所以做了下面的方框，既可以調整方框的樣式又可以調整里面文字的樣式。

這是代碼框：

輸入內容不可以調整樣式

這是HTML寫的方框：

第一段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

第二段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本

代碼解釋：padding：上右下左（間距）；front-size: 字號。

• 代碼如下：

<div style="width:100%;min-height:100px;background:#f8f8f8;border: 1px solid #e7eaed;" contenteditable="true"> <div title="第一段"> ? ? ? ?<span style="font-size:18px;color:#dbd0bf;font-family:'微軟雅黑';font-weight:400;">第一段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本</span> ? ?</div> ? ?<div title="第二段"> ? ? ? ?<span style="font-size:14px;color:#8b8d8e;font-family:'微軟雅黑';font-weight:400;">第二段輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本輸入文本</span> ? ?</div></div>

六、合并單元格

• 功能描述：

md中對表格的處理很單一，只能進行簡單的行、列刪除和新增，表格中的文字也只有左、右、居中的格式調整，像是常用的合并單元格的操作就需要使用HTML來處理。

• 實現(xiàn)效果：

類型類別函數名描述取整向下floor(expr)返回小于expr的最大整數向上ceil(expr)返回大于expr的最小整數ceiling(expr)返回大于expr的最小整數四舍五入round(expr)四舍五入取整，后面沒有num默認取整round(expr,num)四舍五入取整，num為0表示取整不四舍五入truncate(expr,num)不四舍五入取整，num為0表示取整取小數四舍五入round(expr,num)四舍五入取小數，num指取幾位小數不四舍五入truncate(expr,num)不四舍五入取小數，num指取幾位小數round(floor(expr*temp)/temp,num)其中temp=10^num，num指取幾位小數這是列合并第四列

• 代碼如下：

<table><tr> ?<th>類型</th> ?<th>類別</th> ?<th>函數名</th> ?<th>描述</th></tr><tr> ?<td rowspan = '11'>取整（這是行合并） ?</td></tr><tr> ?<td rowspan = '2'>向下 ?</td></tr><tr> ?<td>floor(expr)</td> ?<td>返回小于expr的最大整數</td></tr><tr> ?<td rowspan = '3'>向上 ?</td></tr><tr> ?<td>ceil(expr)</td> ?<td>返回大于expr的最小整數</td></tr><tr> ?<td>ceiling(expr)</td> ?<td>返回大于expr的最小整數</td></tr><tr> ?<td rowspan = '3'>四舍五入 ?</td></tr><tr> ?<td>round(expr)</td> ?<td>四舍五入取整，后面沒有num默認取整</td></tr><tr> ?<td>round(expr,num)</td> ?<td>四舍五入取整，num為0表示取整</td></tr><tr> ?<td rowspan = '2'>不四舍五入 ?</td></tr><tr> ?<td>truncate(expr,num)</td> ?<td>不四舍五入取整，num為0表示取整</td></tr><tr> ?<td rowspan = '7'>取小數 ?</td></tr><tr> ?<td rowspan = '2'>四舍五入 ?</td></tr><tr> ?<td>round(expr,num)</td> ?<td>四舍五入取小數，num指取幾位小數</td></tr><tr> ?<td rowspan = '4'>不四舍五入 ?</td></tr><tr> ?<td>truncate(expr,num)</td> ?<td>不四舍五入取小數，num指取幾位小數</td><tr><tr> ?<td>round(floor(expr*temp)/temp,num)</td> ?<td>其中temp=10^num，num指取幾位小數</td><tr><tr> ?<td colspan = '3'>這是列合并</td> ?<td>第四列</td></tr></table>

注：文章中具體且完整的應用，會在后續(xù)文章中給出。