【博客及MarkDown教程】第一篇博客怎么写？MarkDown怎么用？

---

前言

大家好，这是Uu的第一篇博客，写博客是一件很重要的事，想要写一篇美观的博客从学习MarkDown开始，以下是我学习MarkDown 写出的第一篇博客。

---

一、为什么要写博客？

首先解释一下什么是博客，博客其实就是一篇文章，比如说你正在看的我的第一篇博客，或者CSDN你点进去的任何一篇都是博客。

• 深入学习相关知识点

费曼学习法：一种通过教学来加深理解的学习技巧，强调将复杂概念简化并教授给他人，以检验自己的理解程度。

• 整理一份复习笔记
• 作为未来面试的谈资
  在未来找工作时，在简历中将自己的博客链接写上去，面试官可以更加具体的了解你，同时增加你面试的谈资。

---

二、博客可以写什么？

1. 知识点整理
2. 竞赛的感受和心得
3. 遇到的问题 & 解决方案
4. 算法题的思路 & 题解

---

三、怎么写博客？如何写出美观的博客？

写博客最重要的是什么？—— 开始去写！

学习优秀博客的写法 —— 从模仿开始！

1. 写文章
   CSDN网页的右上角有一个发布——写文章
   

2. 想要写出美观的博客，首先你要学会使用MarkDown编辑器，同时咱们可以使用总分、总分总的结构，首有前言，尾有总结。
   进入写文章页面后，点击头像下面（右上角）的使用MD编辑器，这里的MD编辑器就是MarkDown编辑器的缩写。
   
   进来后是这个页面：
   左边是编辑区，是给作者编辑的。
   中间是预览区，显示出来的东西是读者所看见的。
   右边是目录区，目录由标题自动生成，可以快速到达读者想看的部分。
   

四、MarkDown语法教程 ← （建议点击收藏自行学习）

• 标题

  俗话说得好：标题一半文
  好的标题可以吸引更多的流量，同时标题也要和实际内容相符。

  1. Markdown标题

  在标题的前面加上"#"（不同个数的#对应不同大小的字体）
  #
  ##
  ###
  …
  ######
  后面再加上一个空格即可
  例如，在编辑区：
  
  预览区显示效果：

  一级标题

  二级标题

  三级标题

  四级标题

  五级标题

  六级标题

2. Markdown列表

2.1. 无序列表
- 或 * 或 +
后面再加上一个空格即可。
例如，在编辑区：

预览区显示效果：

• 你好

• 我是

• Uu

2.2.有序列表
和我们平时敲数字一样，1. 2. 3. 4.
后面再加上一个空格即可。
例如，在编辑区：

预览区显示效果：

1. 你好
2. 我是
3. Uu

2.3.列表嵌套
有序列表的子列表（无序列表）的前面添加两个或四个空格（Tab键）。
例如，在编辑区：

预览区显示效果：

1. 你好~
   • Hello~
   • 嘻嘻~
2. 吃了吗
   • 睡了吗
   • 拉了吗（bushi

3. Markdown区块（引用）

3.1.开头一个 > 符号（后面有没有空格都可以）
例如，在编辑区：

预览区显示效果：

每天进步一点点

3.2.嵌套区块
一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推。
例如，在编辑区：

预览区显示效果：

往上爬

一步

一步

我要

3.3.区块中使用列表
例如，在编辑区：

预览区显示效果：

buibui~

1. 嘻嘻
2. 嘿嘿

• 哈哈
• 呵呵

4. Markdown代码

一个函数或代码可以用反引号把它包起来 `

例如，在编辑区：

预览区显示效果：
printf("%d",x);

也可以用三个反引号 ``` 包裹代码，并指定一种语言（也可以不指定）。
例如，在编辑区：

预览区显示效果：

include <stdio.h>
int main()
{
    
    
	printf("Hello World!");
}

这样子出来的代码标识及颜色都很清晰美观。

当然还有一种代码块是开头直接使用 4 个空格或者一个制表符（Tab 键），这种操作相对简单但没有颜色标识，就不做展示了。

5. Markdown链接

5.1.链接名称

例如上文中用到的链接，在编辑区：

预览区显示效果：
MarkDown语法教程 ← （建议点击收藏自行学习）

5.2.链接地址

例如，在编辑区：

预览区显示效果：
https://www.csdn.net/ 点击可直接跳转。

5.3.高级链接（链接名+链接地址）
我们可以通过变量来作为链接名，链接地址在文档末尾说明，例如，在编辑区：

预览区显示效果：
CSDN
Uu
然后在文档的结尾为变量赋值（网址）

同样可以直接点击跳转页面。

6. Markdown图片

6.1.直接将图片复制到编辑区，或者点击编辑页面的图片（动图）插入也很方便， 如下图。

6.2.也可以像网址那样对图片网址使用变量，例如，在编辑区:

预览区显示效果：
CSDN
同样变量来作为链接名，链接地址在文档末尾说明（赋值）

同样点击可以直接跳转页面。

6.3.图片宽度设置
Markdown 还没有办法指定图片的高度与宽度，需要的话可以使用普通的 < img > 标签。

例如，在编辑区：

预览区显示效果：

7. Markdown表格

7.1.Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
例如，在编辑区：

预览区显示效果：

女生	男生
吃吃	喝喝
睡睡	玩玩

7.2.对齐方式（相比上图语法多了 : 的使用位置）
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
（注意冒号是英文冒号）
例如，在编辑区：

预览区显示效果：

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

8.Markdown按键、转义、数学表达式

8.1.按键标签
例如，在编辑区：
预览区显示效果：
使用 Ctrl+Alt+Del 重启电脑

8.2.转义
Markdown使用了很多特殊符号来表示特定的意义，如果需要显示特定符号需要在符号前面使用转义字符，Markdown使用反斜杠 \ 转义特殊字符，例如，在编辑区：

预览区显示效果：
文本加粗
** 正常显示星号 **

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

8.3.分隔符
默认下的分隔符：

例如，在编辑区：

预览区显示效果：
$f(x)=sin(x)+12$
$$\sum _{n=1}^{100}n$$

9.补充（黄色荧光笔效果、截图工具、生成目录）

9.1. 黄色荧光笔效果等
编辑区：

预览区显示效果：
x²
加粗
斜体
加粗斜体
删除线

• 待办1
• 待办2
  黄色

以及编辑区上方的操作直接点击也很方便~
9.2. 截图工具
给大家推荐一个截图工具——QQ，这是我目前见过的最好用的截图工具，方便涂画标记，在QQ设置自己喜欢的截图快捷键即可，可以去试试噢~
效果如下，点击下方就可以直接在图上做标记：

9.3. 生成目录
在文章前面加上一下固定模板，发布文章后即可自动根据标题生成目录。

效果如下：

……好啦，技术有限，更多高级技巧等你解锁~
第一次写博客可以使用新手模板，学习模仿别人的博客，还等什么呢，快点开始吧！

---

总结

今天写了自己的第一篇博客，学会了MarkDown 的基本用法，如果帮到你可以给我点点关注噢，谢谢你们~
人常不能善始善终，在写博客这件事上，希望我能坚持下去！

《庄子·大宗师》：“善妖善老，善始善终。”