【Markdown】用 Markdown 代码写出好看的页面

作为一个学习计算机相关知识的人，如果不经常写博客，就容易把刚学到的知识忘记，写博客是一个很好的学习习惯，而写好博客也就是要学会熟练使用Markdown，这样可以很好地使我们的博客页面变得更加美观，这篇文章介绍的就是一些使用的Markdown使用技巧。

推荐工具：Typora，VScode(插件Markdown-preview-enhanced)

段落格式

字体设置

Markdown代码

<font size=10 face="隶书" color=#ff0000>红色10号隶书</font>

运行结果：

红色10号隶书

粗斜体

1. 用*表示
   Markdown代码

   *斜体*  
   **粗体**  
   ***粗斜体***
   

   显示结果为：
   斜体
   粗体
   粗斜体

2. 用下划线表示
   Markdown代码

   _斜体_  
   __粗体__  
   ___粗斜体___
   

   显示结果为：
   斜体
   粗体
   粗斜体

---

下划线

Markdown代码：

<u>带下划线文本</u>

显示结果为：
带下划线文本

---

删除线

Markdown代码：

~~删除线~~

显示结果为：
删除线

脚注格式

Markdown代码：

创建脚注格式是这样的 [^lorem]。  
[^lorem]: Lorem ipsum dolor.

显示结果为：
创建脚注格式是这样的 ¹。

---

引用格式

嵌套结构

Markdown代码：

> 最外层
>> 第一层嵌套
>>> 第二层嵌套

显示结果：

最外层

第一层嵌套

第二层嵌套

---

引用中使用列表

Markdown代码：

> 引用中使用列表
> 1. 有序列表第一项
> 2. 有序列表第二项
> 3. 有序列表第三项
> + 无序列表第一项
> + 无序列表第二项
> + 无序列表第三项

显示结果：

引用中使用列表

1. 有序列表第一项
2. 有序列表第二项
3. 有序列表第三项

• 无序列表第一项
• 无序列表第二项
• 无序列表第三项

---

列表项中的引用

Markdown代码：

1. 第一项
    > 第一行引用
    > 第二行引用
2. 第二项
3. 第三项

显示结果：

1. 第一项

   第一行引用
   第二行引用

2. 第二项
3. 第三项

---

代码格式

行内代码

Markdown代码：

Python代码`print('helloworld')`，控制台打印helloworld

显示结果：

Python代码print('helloworld')，控制台打印helloworld

---

代码块

1. 按Tab键或四个空格
2. 用```包括起来，第一个后面加上代码语言，可以高亮显示

---

图片样式

1. 直接放置图片
   Markdown代码：

   ![戴帽子的犬夜叉.png] (https://img-blog.csdnimg.cn/20200223224726458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA3ODAy,size_16,color_FFFFFF,t_70)
   

   显示结果：
   
2. 鼠标悬浮时，显示名称
   Markdown代码：

   ![戴帽子的犬夜叉.png] (https://img-blog.csdnimg.cn/20200223224726458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA3ODAy,size_16,color_FFFFFF,t_70 "戴帽子的犬夜叉")
   

   显示结果：
   
3. 使用img标签定义图片的宽高
   Markdown代码：

   <img src='https://img-blog.csdnimg.cn/20200223224726458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA3ODAy,size_16,color_FFFFFF,t_70' width=50% height=50%>
   

   显示结果：
   

---

链接样式

1. 直接写
   Markdown代码：

   [百度一下，你就知道](https://www.baidu.com)
   

   显示结果：
   百度一下，你就知道

2. 链接用a作为网址变量,然后为变量赋值
   Markdown代码：

   [百度一下，你就知道][a]
   [a]: https://www.baidu.com
   

   显示结果：
   百度一下，你就知道

---

表格样式

Markdown代码：

| 左对齐 | 居中对齐 | 右对齐 |
| :----- | :------: | -----: |
| 1      |    2     |      3 |
| 4      |    5     |      6 |

显示结果：

左对齐	居中对齐	右对齐
1	2	3
4	5	6

---

支持的HTML标签

Markdown支持很多HTML标签,下面列举几个常用的标签
Markdown代码：

<kbd>Win</kbd>+<kbd>Prtsc</kbd> 快速截图  
<em>强调</em>  
<strong>加强强调</strong>  
<b>加粗</b>  
<i>倾斜</i>  
上标如，3<sup>2</sup>  
下标，如CO<sub>2</sub>  
换行符<br>  
分割线<hr>  

显示结果：
Win+Prtsc 快速截图
强调
加强强调
加粗
倾斜
上标如，3²
下标，如CO₂
换行符

分割线

---

转义字符

以下这些符号前面加上反斜杠\来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

特殊符号

符号	代码
©	©
™	™
&	&
<	&lt;
>	&gt;
£	&pound;
¥	&yen;
€	&euro;
®	&reg;
±	&plusmn;
§	&sect;
X²	X&sup2;
Y³	Y&sup3;
¾	&frac34;
«	&laquo;
»	&raquo;
37ºC	37&ordm;C

---

1. Lorem ipsum dolor. ↩︎