HTML/CSS [20天] 上手Markdown语法
[20天] 上手Markdown语法
前言
Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。
学习辅助工具
由于是前端开发，所以我使用的是VsCode。
VsCode支持Markdown语言并可以实时预览，比较方便。
打开VsCode，新建一个demo.md文档，点击文档标题右侧第二个[图书+放大镜按钮]即可实时预览文档
Markdown语法目录
一、标题
语法：1~6个 # 标题内容（注意#号之后有空格）
# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
在内容下添加一个以上的-或=也可以标记标题
这是一级标题 === 这是二级标题 ---
二、段落
语法： 文本前后包含至少一个空行。
一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。 比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进
三、列表
无序列表
语法：一个 - 或+、 *符 列表项内容（注意-号之后有空格）
- 苹果 - 香蕉 - 葡萄 - 鸭梨 * 苹果 * 香蕉 + 葡萄 + 鸭梨
有序列表
语法：数字加点 + 空格 + 列表项内容
1. JavaScript 2. TypeScript 3. CofeeScript
四、超链接
语法： [超链接名](超链接地址)
[蓝瞳视觉](http://www.lenton.cn/)
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用方括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：
<http://ccued.com/>
五、图片
语法：
其中图片名等价于html img元素的alt属性
还可以添加title
到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 `` 标签
六、引用
语法： > 引用文本
> 这是引用的文本
引用嵌套
> 这是引用的文本 >> 这是嵌套的内容 >>> - 香蕉 >>> - 苹果
七、强调
斜体： 使用星号（*）或底线（_）作为标记强调字词的符号。
等价于html的 <em>标记
*我很重要* _我也很重要呢_
加粗：使用双星号（*）或双底线（_）作为标记强调字词的符号
等价于html的<strong>标记
**我很重要** __我也很重要呢__
八、代码块
语法 ```代码``` 或片段代码 `代码`
使用一对`或多个`对来标记代码
### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`
如果代码块中仍然包含```符号呢？只需要代码块标记`个数大于代码中数量就不会被解释为代码块标记。如：
````
### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`
````
九、表格
语法：
标题|标题|标题
---|---|---
单元格|单元格|单元格
单元格|单元格|单元格
### 表格 姓名|年龄|性别 ---|---|--- lenton|24|男 cc|19|女
十、分割线
语法： 三个以上连续的- _ *符号可以生成一条分隔线
___ _ _ _ --- - - - *** * * *
附录：
特殊字符自动转换
在 HTML 文件中，有两个字符需要特殊处理： < 和 &。
Markdown 让你可以自然地书写字符，需要转换的由它来处理好了。如果你使用的 & 字符是 HTML 字符实体的一部分，它会保留原状，否则它会被转换成 &
反斜杠
可用于将Markdown的标记符号转为普通字符显示。Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
-
\ 反斜线
-
` 反引号
-
* 星号
-
_ 底线
-
{} 花括号
-
[] 方括号
-
() 括弧
-
# 井字号
-
+ 加号
-
- 减号
-
. 英文句点
-
! 惊叹号
列如：
\# 这不是标题 \- 这不是列表 \```这不是代码```
使用Markdown文档重写本文：
完整md文档
### 前言
>Markdown 是一种轻量级标记语言。 它允许人们使用>易读易写的纯文本格式编写文档，然后转换成有效的 >XHTML（或者HTML）文档。
>
>由于 Markdown 的轻量化、易读易写特性，并且对于>图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。
### 学习辅助工具
由于是前端开发，所以我使用的是VsCode。
VsCode支持Markdown语言并可以实时预览，比较方便。
打开VsCode，新建一个demo.md文档，点击文档标题右侧第二个 **[图书+放大镜按钮]** 即可实时预览文档
### Markdown语法目录
- 标题
- 段落
- 超链接
- 图片
- 引用
- 强调
- 加粗
- 代码块
- 表格
- 分割线
- 特殊字符转换
#### 一、标题
语法：1~6个 `#` 标题内容（注意#号之后有空格）
```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```
在内容下添加一个以上的-或=也可以标记标题
```
这是一级标题
===
这是二级标题
---
```
二、段落
语法： 文本前后包含至少一个空行。
```
一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。
比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进
```
### 三、列表
#### 无序列表
语法：一个 `-` 或`+`、 `*`符 列表项内容（注意`-`号之后有空格）
```
- 苹果
- 香蕉
- 葡萄
- 鸭梨
* 苹果
* 香蕉
+ 葡萄
+ 鸭梨
```
#### 有序列表
语法：数字加点 + 空格 + 列表项内容
```
1. JavaScript
2. TypeScript
3. CofeeScript
```
### 四、超链接
语法： \[超链接名](超链接地址)
```
[蓝瞳视觉](http://www.lenton.cn/)
```
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用方括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：
```
<http://ccued.com/>
```
### 五、图片
语法：\!\[图片名](链接url)
其中图片名等价于html `img`元素的`alt`属性
```
```
还可以添加`title`
```
```
到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 \`\` 标签
### 六、引用
语法： \> 引用文本
```
> 这是引用的文本
```
引用嵌套
```
> 这是引用的文本
>> 这是嵌套的内容
>>> - 香蕉
>>> - 苹果
```
### 七、强调
**斜体**： 使用星号`*`或底线`_`作为标记强调字词的符号
等价于html的 \<em>标记
```
*我很重要*
_我也很重要呢_
```
**加粗**：使用双星号`**`或双底线`__`作为标记强调字词的符号
等价于html的\<strong>标记
```
**我很重要**
__我也很重要呢__
```
### 八、代码块
语法 \`\`\`代码\`\`\` 或片段代码 \`代码\`
````
### 代码
```
console.log('lenton');
alert('Hello')
```
console的log方法: `console.log('lenton')`
````
### 九、表格
语法：
标题 \| 标题 \| 标题
----\|----\|----
单元格 \| 单元格 \| 单元格
单元格 \| 单元格 \| 单元格
```
### 表格
姓名|年龄|性别
---|---|---
lenton|24|男
cc|19|女
```
### 十、分割线
语法： 三个以上连续的`-` `_` `*`符号可以生成一条分隔线
```
___
_ _ _
---
- - -
***
* * *
```
本文内容还算比较全面，可以参考使用。
参考资料：
