Markdown学习笔记(1):Markdown基础

写在前面

在刚搭建起博客的时候,便要开始学会博文的撰写。这难度甚至要大于建立和优化博客,虽然我可以简单地用普通纯文本文档来当我的博文,不过未免也太low了一点。于是,爱学习的码农Tim开始了他的Markdown学习之旅…


Markdown基础

如何生成标题?

在html语句中,一共有六种html标题标签(h1-h6),所以在Markdown中相对应的也有六种标题语句

效果:
标题效果

代码:

1
2
3
4
5
# h1标题
## h2标题
### h3标题
...
###### h6标题

注意,#后面要有一个空格!

当然,为了文档美观以及方便调用,最常用的h1、h2标题有简写的方法

1
2
3
4
5
h1标题
===

h2标题
---

自然段换行

在Markdown语句中,单个回车是不能实现换行的。有两种比较简单的方法来换行:

法一:敲两下回车

1
2
3
abcdefg

hijklmn

法二:在回车后加两个空格

1
2
abcdefg  
hijklmn

当然,你也可以使用类似HTML的语法来写(br/):

法三:使用HTML的br/语句

1
2
3
4
abcdefg<br/>hijklmn

abcdefg<br/>
hijklmn

段落引用

Markdown中,有非常简单的方法将一段文字转换成引用的样式,就是在文字前面加一个“>”符号(一样要加空格)

1
> abcdefg

效果:

我是引用来的

添加分割线

Markdown中,有非常简单的方法生成分割线,有以下四种代码:

1
2
3
4
5
6
7
---

***

___

- - -

这四种代码相当于HTML中的hr标签,四种效果也是完全一样

文字的强调显示

在Markdown中,打出粗体和斜体也是非常简单的:

1
2
斜体: *XXX*_XXX_
粗体: **XXX**__XXXX__

效果:
斜体
粗体
粗斜体

列表表示

Markdown中,可以有简单的符号来让你的文字更有序,列表也分两种,有序与无序表:

无序表

第一种:“-”

效果:

  • 目录1
  • 目录2
    • 子目录1
    • 子目录2
  • 目录3

代码:

1
2
3
4
5
- 目录1
- 目录2
- 子目录1
- 子目录2
- 目录3

第二种:“+”

效果:

  • 目录1
  • 目录2
    • 子目录1
    • 子目录2
  • 目录3

代码:

1
2
3
4
5
+ 目录1
+ 目录2
+ 子目录1
+ 子目录2
+ 目录3

第三种:“*”

效果:

  • 目录1
  • 目录2
    • 子目录1
    • 子目录2
  • 目录3

代码:

1
2
3
4
5
* 目录1
* 目录2
* 子目录1
* 子目录2
* 目录3

有序表

效果:

  1. 目录1
  2. 目录2
  3. 目录3
  4. 目录4
  5. 目录5
1
2
3
4
5
6
7
1. 目录1  
1. 目录2
1. 目录3
1. 目录4
1. 目录5

第一项必须写1.,其他的项可以用任何数字替代

待办列表

效果:

  • [ ] 不勾选
  • [x] 勾选

代码:

1
2
3
- [ ] 不勾选
- [x] 勾选
VSCode中无法正常显示

超文本链接的书写

Markdown中,非常容易用到超链接,代码如下:

第一种:直接写链接

效果:
https://bilibili.com

1
https://bilibili.com

第二种:链接打上尖括号

效果:
https://bilibili.com

1
<https://bilibili.com>

以上两种方法都无法控制链接文字,要控制超链接文字,请用三、四种

第三种:可控文字

效果:
小破站nb

代码:

1
[小破站nb](https://bilibili.com)

第四种:可控文字+鼠标悬停显示

效果:
小破站nb

代码:

1
[小破站nb](https://bilibili.com "干杯!")

代码高亮显示

不多说,码农必备~:

代码区块

效果:

1
2
char a = "HelloWorld!";
printf("%d",a);

代码:

1
2
3
4
5
6
`+``cpp(填写语言类型) 
char a = "HelloWorld!";
printf("%d",a);
`+``

去掉加号(不然我的博客显示有问题)

行中代码

效果:

C++语言中字符要用Char类型存储,如:char a = "HelloWorld!";

代码:

1
C++语言中字符要用Char类型存储,如:`char a = "HelloWorld!";`

附:Markdown支持的语言:点击跳转

图片显示

写文章用图片数量可不少,先找到个好图床,再来学习也不迟:

这里推荐一个免费的图床:路过图床

图片显示

效果:
我用的壁纸

代码:

1
2
3
![我用的壁纸](https://s2.ax1x.com/2019/08/14/mPsJe0.jpg "小厉的壁纸")

![alt文字](链接 "鼠标悬停文字")

点击图片跳转链接

效果:
点击跳转到破站

代码:

1
2
3
4
[![点击跳转到破站](https://s2.ax1x.com/2019/08/14/mPsJe0.jpg "点击跳转到破站")](https://bilibili.com "点击跳转到破站")

(超文本链接代码嵌套图片显示代码)
(由于本方法被主题放大图片功能覆盖,失效)

表格制作

非常常用,非常重要!

如下:

效果:

标题1 标题2 标题3
内容1 内容2 内容3
内容1 内容2 内容3

代码:

1
2
3
4
| 标题1 | 标题2 | 标题3 |
----|----|----
| 内容1 | 内容2 | 内容3 |
| 内容1 | 内容2 | 内容3 |

文字对齐的做法

效果:

居左 居中 居右
1 2 3
1 2 3

代码:

1
2
3
4
| 居左 | 居中 | 居右 |
|:----|:----:|----:|
|1|2|3|
|1|2|3|

文章作者: Tim
文章链接: http://itstim.xyz/Markdown%E2%95%A4%D0%B7%E2%95%A7%E2%96%91%E2%96%92%E2%95%A9%E2%95%9D%E2%95%9F-1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Tim's Blog
支付宝恰饭打赏
微信恰饭打赏