HTML/CSS [20天] 上手Markdown语法

0

[20天] 上手Markdown语法

阅读:217 时间:2022年06月05日

前言 Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档。 由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有...

前言

Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档。

由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。

学习辅助工具

由于是前端开发,所以我使用的是VsCode。

VsCode支持Markdown语言并可以实时预览,比较方便。

打开VsCode,新建一个demo.md文档,点击文档标题右侧第二个[图书+放大镜按钮]即可实时预览文档

微信截图_20220605110252.jpg

Markdown语法目录

一、标题

语法:1~6个 标题内容(注意#号之后有空格)

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

在内容下添加一个以上的-或=也可以标记标题

这是一级标题
===

这是二级标题
---

二、段落

语法: 文本前后包含至少一个空行。

一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。

比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进

微信截图_20220605121652.jpg

三、列表

无序列表

语法:一个 - 或+*符 列表项内容(注意-号之后有空格)

- 苹果
- 香蕉
- 葡萄
- 鸭梨
* 苹果
* 香蕉
+ 葡萄
+ 鸭梨

有序列表

语法:数字加点 + 空格 + 列表项内容

1. JavaScript
2. TypeScript
3. CofeeScript

微信截图_20220605111607.jpg

四、超链接

语法: [超链接名](超链接地址)

[蓝瞳视觉](http://www.lenton.cn/)

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用方括号包起来, Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样,例如:

<http://www.ccued.com/>

微信截图_20220605112437.jpg

五、图片

语法:![图片名](链接url)

其中图片名等价于html img元素的alt属性

![蓝瞳视觉LOGO](http://www.lenton.cn/favicon.ico)

还可以添加title

![蓝瞳视觉LOGO](http://www.lenton.cn/favicon.ico "蓝瞳视觉LOGO")

到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 `` 标签

六、引用

语法: > 引用文本

> 这是引用的文本

引用嵌套

> 这是引用的文本
>> 这是嵌套的内容
>>> - 香蕉
>>> - 苹果

微信截图_20220605114949.jpg

七、强调

斜体: 使用星号(*)或底线(_)作为标记强调字词的符号。

等价于html的 <em>标记

*我很重要*
_我也很重要呢_

加粗:使用双星号(*)或双底线(_)作为标记强调字词的符号

等价于html的<strong>标记

**我很重要**
__我也很重要呢__

微信截图_20220605115549.jpg

八、代码块

语法 ```代码``` 或片段代码 `代码`

使用一对`或多个`对来标记代码

### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`

微信截图_20220605120057.jpg

如果代码块中仍然包含```符号呢?只需要代码块标记`个数大于代码中数量就不会被解释为代码块标记。如:

````
### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`
````

九、表格

语法:

标题|标题|标题

---|---|---

单元格|单元格|单元格

单元格|单元格|单元格

### 表格
姓名|年龄|性别
---|---|---
lenton|24|男
cc|19|女

微信截图_20220605120634.jpg

十、分割线

语法: 三个以上连续的- _ *符号可以生成一条分隔线

___
_ _ _
---
- - -
***
* * *

微信截图_20220605121131.jpg

附录:

特殊字符自动转换

在 HTML 文件中,有两个字符需要特殊处理: < 和 &。

Markdown 让你可以自然地书写字符,需要转换的由它来处理好了。如果你使用的 & 字符是 HTML 字符实体的一部分,它会保留原状,否则它会被转换成 &amp;

反斜杠

可用于将Markdown的标记符号转为普通字符显示。Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

  • \   反斜线

  • `   反引号

  • *   星号

  • _   底线

  • {}  花括号

  • []  方括号

  • ()  括弧

  • #   井字号

  • +   加号

  • -   减号

  • .   英文句点

  • !   惊叹号

列如:

\# 这不是标题
\- 这不是列表
\```这不是代码```

微信截图_20220605122821.jpg

使用Markdown文档重写本文:

完整md文档

### 前言
>Markdown 是一种轻量级标记语言。 它允许人们使用>易读易写的纯文本格式编写文档,然后转换成有效的 >XHTML(或者HTML)文档。
>
>由于 Markdown 的轻量化、易读易写特性,并且对于>图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。
### 学习辅助工具
由于是前端开发,所以我使用的是VsCode。

VsCode支持Markdown语言并可以实时预览,比较方便。

打开VsCode,新建一个demo.md文档,点击文档标题右侧第二个 **[图书+放大镜按钮]** 即可实时预览文档
![学习辅助工具](http://www.ccued.com/zb_users/upload/2022/06/202206051654398192202666.jpg)
### Markdown语法目录
- 标题
- 段落
- 超链接
- 图片
- 引用
- 强调
- 加粗
- 代码块
- 表格
- 分割线
- 特殊字符转换
#### 一、标题
语法:1~6个 `#` 标题内容(注意#号之后有空格)
```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```
在内容下添加一个以上的-或=也可以标记标题
```
这是一级标题
===

这是二级标题
---
```
二、段落
语法: 文本前后包含至少一个空行。
```
一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。

比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进
```
![段落](http://www.ccued.com/zb_users/upload/2022/06/202206051654402621374470.jpg)
### 三、列表
#### 无序列表
语法:一个 `-` 或`+`、 `*`符 列表项内容(注意`-`号之后有空格)
```
- 苹果
- 香蕉
- 葡萄
- 鸭梨
* 苹果
* 香蕉
+ 葡萄
+ 鸭梨
```
#### 有序列表
语法:数字加点 + 空格 + 列表项内容
```
1. JavaScript
2. TypeScript
3. CofeeScript
```
![列表](http://www.ccued.com/zb_users/upload/2022/06/202206051654398982569027.jpg)
### 四、超链接
语法: \[超链接名](超链接地址)
```
[蓝瞳视觉](http://www.lenton.cn/)
```
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用方括号包起来, Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样,例如:
```
<http://www.ccued.com/>
```
![超链接](http://www.ccued.com/zb_users/upload/2022/06/202206051654399493576518.jpg)

### 五、图片
语法:\!\[图片名](链接url)

其中图片名等价于html `img`元素的`alt`属性
```
![蓝瞳视觉LOGO](http://www.lenton.cn/favicon.ico)
```
还可以添加`title`
```
![蓝瞳视觉LOGO](http://www.lenton.cn/favicon.ico "蓝瞳视觉LOGO")
```

到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 \`\` 标签
### 六、引用
语法: \> 引用文本
```
> 这是引用的文本
```
引用嵌套
```
> 这是引用的文本
>> 这是嵌套的内容
>>> - 香蕉
>>> - 苹果
```
![引用](http://www.ccued.com/zb_users/upload/2022/06/202206051654400999848989.jpg)
### 七、强调
**斜体**: 使用星号`*`或底线`_`作为标记强调字词的符号
等价于html的 \<em>标记
```
*我很重要*
_我也很重要呢_
```
**加粗**:使用双星号`**`或双底线`__`作为标记强调字词的符号
等价于html的\<strong>标记
```
**我很重要**
__我也很重要呢__
```
![强调](http://www.ccued.com/zb_users/upload/2022/06/202206051654401363752582.jpg)
### 八、代码块
语法 \`\`\`代码\`\`\` 或片段代码 \`代码\`
````
### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`
````
![代码块](http://www.ccued.com/zb_users/upload/2022/06/202206051654401667342541.jpg)
### 九、表格
语法:

标题 \| 标题 \| 标题
----\|----\|----
单元格 \| 单元格 \| 单元格
单元格 \| 单元格 \| 单元格
```
### 表格
姓名|年龄|性别
---|---|---
lenton|24|男
cc|19|女
```
![表格](http://www.ccued.com/zb_users/upload/2022/06/202206051654402004366904.jpg)
### 十、分割线
语法: 三个以上连续的`-` `_` `*`符号可以生成一条分隔线
```
___
_ _ _
---
- - -
***
* * *
```
![分割线](http://www.ccued.com/zb_users/upload/2022/06/202206051654402301250396.jpg)

本文内容还算比较全面,可以参考使用。


参考资料: 

https://www.appinn.com/markdown/

https://juejin.cn/post/6844903927205330951

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^