一：圖片部分
因為博客園可能會吞我語法，所以我把代碼放到下面部分
https://files.cnblogs.com/files/blogs/827070/markdown的優雅html語法.zip?t=1757144163&download=true
第一範式
圖 2 全字段排序
<center>
<img style="border-radius: 0.3125em;
box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);"
width = "500" height = "400"
src="https://static001.geekbang.org/resource/image/6c/72/6c821828cddf46670f9d56e126e3e772.jpg?wh=1142*856" width = "60%" alt=""/>
<br>
<div style="color:orange; border-bottom: 1px solid #d9d9d9;
display: inline-block;
color: #999;
padding: 2px;">
圖 2 全字段排序
</div>
</center>
第二範式
你想要的標題
我選定的論文標題
學院：你的學院
專業：你的專業
學號：你的學號
姓名：你的名字
2020年6月20日
你想要的標題
我選定的論文標題
學院：你的學院
專業：你的專業
學號：你的學號
姓名：你的名字
2020年6月20日
二：字體部分
聲明一個範式：
其實我們都知道，更新請求對 IOPS 的壓力，在主庫和備庫上是無差別的
<font color="red">其實我們都知道，更新請求對 IOPS 的壓力，在主庫和備庫上是無差別的</font>
第一範式：
第二範式
第三範式
第四範式
這是一個使用內聯樣式優化後的邊框，文字已居中並變為紅色
<div id="border-example" style="
border: 1px solid #333;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
color: red; /* 將文字顏色設置為紅色 */
text-align: center; /* 水平居中 */
display: flex; /* 使用flex佈局實現垂直居中 */
justify-content: center; /* 水平方向上的居中（與text-align: center在flex容器中效果相同，但為保持一致性可保留） */
align-items: center; /* 垂直方向上的居中 */
height: 100px; /* 設置div的高度，以便觀察垂直居中效果 */
line-height: initial; /* 如果不需要利用line-height進行垂直居中，則重置此行高 */
">
這是一個使用內聯樣式優化後的邊框，文字已居中並變為紅色
</div>
/*
text-align: center;足以實現文字的水平居中。display: flex;、justify-content: center;和align-items: center;是用於實現垂直居中的。同時，我設置了一個height值來確保div有足夠的高度來展示垂直居中的效果。
如果您不希望使用flex佈局，且div的高度是固定的或可預測的，您還可以通過設置line-height等於div的高度來實現垂直居中（這種方法適用於單行文字）。但請注意，在上面的代碼中，我已經將line-height重置為initial，因為我們使用了flex佈局。
如果您想保持div的高度自適應內容，並且只想要單行文字垂直居中，那麼您可以使用line-height配合height（當height由內容決定時，這種方法不適用），或者簡單地使用flex佈局，如上所示。
*/
這是一個使用內聯樣式優化後的邊框，文字已居中並變為紅色
<div id="border-example" style="
border: 1px solid #333;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
color: red; /* 將文字顏色設置為紅色 */
text-align: center; /* 水平居中 */
">
這是一個使用內聯樣式優化後的邊框，文字已居中並變為紅色
</div>
多行實例
原則 1：加鎖的基本單位是 next-key lock。希望你還記得，next-key lock 是前開後閉區間。
原則 2：查找過程中訪問到的對象才會加鎖。
優化 1：索引上的等值查詢，給唯一索引加鎖的時候，next-key lock 退化為行鎖。
優化 2：索引上的等值查詢，向右遍歷時且最後一個值不滿足等值條件的時候，next-key lock 退化為間隙鎖。
一個 bug：唯一索引上的範圍查詢會訪問到不滿足條件的第一個值為止。
原則 2：查找過程中訪問到的對象才會加鎖。
優化 1：索引上的等值查詢，給唯一索引加鎖的時候，next-key lock 退化為行鎖。
優化 2：索引上的等值查詢，向右遍歷時且最後一個值不滿足等值條件的時候，next-key lock 退化為間隙鎖。
一個 bug：唯一索引上的範圍查詢會訪問到不滿足條件的第一個值為止。
<div id="border-example" style="
border: 1px solid #333;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
color: red; /* 將文字顏色設置為紅色 */
text-align: left; /* 水平居中 */
">
原則 1：加鎖的基本單位是 next-key lock。希望你還記得，next-key lock 是前開後閉區間。</br>
原則 2：查找過程中訪問到的對象才會加鎖。</br>
優化 1：索引上的等值查詢，給唯一索引加鎖的時候，next-key lock 退化為行鎖。</br>
優化 2：索引上的等值查詢，向右遍歷時且最後一個值不滿足等值條件的時候，next-key lock 退化為間隙鎖。</br>
一個 bug：唯一索引上的範圍查詢會訪問到不滿足條件的第一個值為止。</br>
</div>
