1.前言
Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。优快云博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。
系列教程目录
- 关于Markdown
- Markdown基本使用
- Markdown表格和公式
- Markdown UML绘图
- 优快云 Markdown快速上手
- Markdown 参考手册
本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，了解格式化文本，格式化代码、列表、图片、链接、转义符等，下一篇文章我们来研读Markdown的扩展使用。
2.基本语法
2.1文本格式化
2.1.1 强调文字
我们使用*斜体文字*的方式倾斜文字，**加粗的文字**的方式加粗文字，使用***加粗的斜体字***同时加粗和倾斜文字。
下面的Markdown代码：
*斜体文字*
**加粗文字**
***加粗的斜体文字***
- 1
- 2
- 3
将会编译成html：
<em>斜体文字</em>
<strong>加粗文字</strong>
<strong><em>加粗的斜体文字</em></strong>
- 1
- 2
- 3
显示在网页上的结果为：
斜体文字
加粗文字
加粗的斜体文字
2.1.2 添加删除线
我们可以使用markdown给文字添加删除线：
~~添加删除线的文字~~
- 1
编译成html之后：
<del>添加删除线的文字</del>
- 1
显示在网页上结果为：
添加删除线的文字
2.1.3 标题
Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。
类Setext形式采用底线的形式.
一号标题
=============
二号标题
-------------
类Atx形式则是在行首插入1到6个#，对应到标题1到标题6.
# 一号标题
## 二号标题
### 三号标题
#### 四号标题
##### 五号标题
###### 六号标题
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
解析成html：
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
- 1
- 2
- 3
- 4
- 5
- 6
显示在网页上结果为：
2.1.4 引用
Markdown通过在引用的文字之前添加”>”标记达到引用的效果，引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。
> 这里是一段引用
> 也可以偷懒只在首行引用一个段落
> 引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出
来，实现**易读易写**的文章写作，已经逐渐成为事实上的行业标准。
>**结束引用，用个空行**
- 1
- 2
- 3
- 4
- 5
- 6
- 7
编译成html之后：
<blockquote>
<p>这里是一段引用
也可以偷懒只在首行引用一个段落</p>
<p>引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现<strong>易读易写</strong>的文章写作，已经逐渐成为事实上的行业标准。</p>
<strong>结束引用，用个空行</strong>
</blockquote>
- 1
- 2
- 3
- 4
- 5
- 6
显示在网页上结果为：
这里是一段引用
也可以偷懒只在首行引用一个段落引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。
结束引用，用个空行
引用可以嵌套，使用不同数量的“>”表示层次。
> 这里是个引用
> > 嵌套引用
>
> 这里是个引用
- 1
- 2
- 3
- 4
编译成html之后：
<blockquote>
<p>这里是个引用</p>
<blockquote>
<p>嵌套引用</p>
</blockquote>
<p>这里是个引用</p>
</blockquote>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
显示在网页上结果为：
这里是个引用
嵌套引用
这里是个引用
2.2 代码格式化
2.2.1 行内代码
使用反引号”`”包含实现行内代码。
我们可以使用`<br>`换行，也可以使用`<p></p>`实现。
`高亮`文字
- 1
- 2
编译成html之后：
我们可以使用<code><br></code>换行，也可以使用<code><p></p></code>实现。
<code>高亮</code>文字。
- 1
- 2
显示在网页上结果为：
我们可以使用<br>换行，也可以使用<p></p>实现。
高亮文字
2.2.1 区块代码
如果需要在代码内插入反引号，需要多个反引号开始和结束一段代码。
如果需要代码块和语法高亮，可以采用三个反引号的方式，同时可以注明语言类型。
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
- 1
- 2
- 3
- 4
- 5
2.3 列表
2.3.1 无序列表
无序列表使用星号、加号或是减号作为列表标记，如果不按列表显示，前面记得加一空行。
- Red
- Green
- Blue
- 1
- 2
- 3
解析为
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
- 1
- 2
- 3
- 4
- 5
显示在网页上结果为：
- Red
- Green
- Blue
2.3.2 有序列表
使用数字接着一个英文句点表示一个有序列表， 注意前面的数字对列表没有影响。
1. 文字
2. 图片
4. 表格
- 1
- 2
- 3
解析成html：
<ol>
<li>文字</li>
<li>图片</li>
<li>表格</li>
</ol>
- 1
- 2
- 3
- 4
- 5
显示在网页结果为：
- 文字
- 图片
- 表格
2.3.3 列表嵌套
列表可以嵌套，添加tab缩进表示层次。例如下面的Markdown代码：
1. 文字
1. 强调
- 粗体
- 斜体
- 粗体和斜体
2. 引用
2. 图片
3. 表格
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
转换成html为：
<ol>
<li>文字
<ol>
<li>强调
<ul>
<li>粗体</li>
<li>斜体</li>
<li>粗体和斜体</li>
</ul>
</li>
<li>引用</li>
</ol>
</li>
<li>图片</li>
<li>表格</li>
</ol>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
显示在网页上结果为：
- 文字
- 强调
- 粗体
- 斜体
- 粗体和斜体
- 引用
- 强调
- 图片
- 表格
2.3.4 多段列表
列表项里可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：
1. 学习Markdown
学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。
学习起来很简单。
2. 使用Markdown
可以使用客户端和在线编辑器。
- 1
- 2
- 3
- 4
- 5
在网页上显示结果为：
- 学习Markdown
学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。
学习起来很简单。 - 使用Markdown
可以使用客户端和在线编辑器。
2.4 链接
Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。
2.4.1 行内式链接
首先来看行内式，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可。
欢迎大家访问我的[博客](http://blog.youkuaiyun.com/whqet/ "博客")。
也可以不指定[链接](http://blog.youkuaiyun.com)的title。
- 1
- 2
解析成html：
欢迎大家访问我的<a href="http://blog.youkuaiyun.com/whqet/" title="博客">博客</a>。
也可以不指定<a href="http://blog.youkuaiyun.com">链接</a>的title。
- 1
- 2
显示在网页上，结果为：
2.4.2 参考式链接
参考式链接需要进行链接内容定义，然后引用该定义设置链接。
链接内容定义格式为：
[链接名]: 链接地址 "链接title"
[链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略)
- 1
- 2
设置链接的格式为
[链接文字][链接名称]
- 1
如下面代码所说：
请大家访问我的[博客][blog],获取更多信息。
[blog]: http://blog.youkuaiyun.com/whqet "我的优快云博客"
- 1
- 2
解析成html为：
请大家访问我的<a href="http://blog.youkuaiyun.com/whqet" title="我的优快云博客">博客</a>,获取更多信息。
- 1
显示在网页上结果为：
请大家访问我的博客,获取更多信息。
2.4.3 页内导航
我们同样可以使用markdown实现页内导航，步骤如下：
- 先定义一个锚记
<div id="footer"></div> - 然后设置页内链接
[到底部](#footer)
我们可以类似的方式去实现文章的页内导航。单击下面的链接跳转到2.4链接。
2.5 图片
Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。
行内式图片如下所示：
- 1
- 2
参考式图片如下所示：
![Alt text][id]
[id]: url/to/image "Optional title attribute"
- 1
- 2
到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 标签。
注意：优快云图片如果大于显示区域，则图片宽度自适应，如果图片较小则以原始尺寸显示。
2.6 分割线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：
* * *
***
*****
- - -
---------------------------------------
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.7 转义
Markdown 可以利用反斜杠来实现转义， 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3.动手实践
- 大家可以通过优快云的管理博客-博客配置-编辑器类型设置默认的编辑器为Markdown编辑器，然后新建文章，就可以体验Markdown编辑器了。
- 利用在线编辑工具体验Markdown，例如markable，或stackedit, 或作业部落等。
- 下载客户端，window平台下的MarkdownPad或mac平台下的mou。
本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，下一篇文章我们来研读Markdown的扩展使用。
4.声明
前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.youkuaiyun.com/whqet/article/details/44274999
欢迎大家访问独立博客http://whqet.github.io
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
