第一篇感想

搭建站点

之前一直有去折腾一个自己的个人博客网站,最近闲了还是要折腾一下比较好


定个小目标

接下来的目标就是把之前所学的前端的知识梳理一遍,都放进自己的博客里面,不仅对之前的知识算是一个复习,也能够与看到我的博客的那些前端初学者们共勉。
先是整理下MD的语法


Markdown语法测试

标题

行首插入1到六个#,代表标题1到6阶。

效果

三级标题

代码

### 三级标题


区块引用

使用>角括号

效果

区块引用内容

代码

> 区块引用内容


强调内容

星号标记强调的区段

效果

段落中需要强调的内容斜体内容等等。

代码

段落中**需要强调的内容**和*斜体内容*等等。


无序列表

使用* - + 表示无序列表

效果

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

代码

1
2
3
4
- 无序列表项1
- 无序列表项2
- 无序列表项3
- 无序列表项4

有序列表

使用1. 2. 3. 等数字加点号表示

效果

  1. 有无序列表项1
  2. 有无序列表项2
  3. 有无序列表项3
  4. 有无序列表项4

代码

1
2
3
4
1. 有无序列表项1
2. 有无序列表项2
3. 有无序列表项3
4. 有无序列表项4

项目中插入多项内容

效果

  • 无序列表
    内容区域1
    内容区域2

    无序列表内的区块引用

  • 无序列表
    内容区域1
    内容区域2

    无序列表内的区块引用

代码

1
2
3
4
5
6
7
8
9
- 无序列表
内容区域1
内容区域2
> 无序列表内的区块引用

- 无序列表
内容区域1
内容区域2
> 无序列表内的区块引用

链接

效果

我的博客

代码

[我的博客](http://xutianshi.top/)


带title的链接

效果

我的博客

代码

[我的博客](http://xutianshi.top/ "This is my blog")


图片

效果

This is a image

代码

![This is a image](https://upload-images.jianshu.io/upload_images/3084260-c9fd01df969c99f1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700 "image's title")


代码

效果

<p>这是一个段落</p>

<p>这是一个段落</p>

代码

1
2
3
`<p>这是一个段落</p>`

<p>这是一个段落</p>

代码块

效果

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
</head>
<body>
</body>
</html>

代码

1
2
3
4
5
6
7
8
9
10
```html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
</head>
<body>
</body>
</html>

`

文章目录
  1. 1. 搭建站点
  2. 2. 定个小目标
  3. 3. Markdown语法测试
    1. 3.1. 三级标题
|