经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » Markdown » 查看文章
Markdown快速入门
来源：cnblogs　　作者：彭加李　　时间：2021/3/1 9:07:05　　对本文有异议

Markdown是什么

Markdown是一种轻量级的标记语言，允许人们使用易读易写的纯文本编写文档。

马上打开最好的在线Markdown编辑器dillinger，跟着下面的语法亲自来写一篇文档吧

速写

速写能帮助你回忆起它

#
##

两个空格

*
**
***

>

1.
1.

-
-

```javascript

---

[百度](htttps://www.baidu.com 'title')
<https:/ /www.baidu.com>
[博客园][1]

![alt](url "标题")
![][img1]
[![][img1]][1]

\

header1|header2|header3
-|-|-
cnt1|cnt2|cnt3

语法

标题

#
##

使用 = 和 - 标记一级和二级标题

  1. 我展示的是一级标题
  2. =
  4. 我展示的是二级标题
  5. -
  7. // 可以使用多个=或-
  8. 我展示的是一级标题
  9. =======

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

  1. // 推荐
  2. # 一级标题
  3. ## 二级标题

段落&换行

两个空格

段落没有特殊格式，直接编写文字就好，段落的换行使用两个及以上空格加上回车

  1. 床前明月光  // 两个空格
  2. 疑是地上霜

加粗&斜体

*
**
***

斜体使用一个星号，粗体两个星号，粗体斜体三个星号

  1. *斜体是前后各加一个星号*  
  2. **粗体是前后各加两个星号**  
  3. ***粗斜体是前后各加三个星号***

斜体是前后各加一个星号
粗体是前后各加两个星号
粗斜体是前后各加三个星号

块引用

>

块引用使用右尖括号 >

  1. >要创建blockquote，请>在段落前面添加一个。
  3. >块引用可以包含多个段落。>在段落之间的空白行上添加一个。
  4. >
  5. >块引用可以包含多个段落。>在段落之间的空白行上添加一个。

要创建blockquote，请>在段落前面添加一个。

块引用可以包含多个段落。>在段落之间的空白行上添加一个。

块引用可以包含多个段落。>在段落之间的空白行上添加一个。

块引用可以包含其他Markdown格式的元素

  1. // 并非所有元素都可以使用-您需要进行实验以查看哪些元素有效。
  2. > ### The quarterly results look great!
  3. >
  4. > - Revenue was off the chart.
  5. > - Profits were higher than ever.
  6. >
  7. >  *Everything* is going according to **plan**.

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

有序列表&无序列表

1.
1.

-
-

有序列表使用数字和点（.）

下面三种写法效果相同

  1. 1. 第一项
  2. 2. 第二项
  3. 3. 第三项
  4. 4. 第四项
  6. // 数字不必按顺序
  7. 1. 第一项
  8. 8. 第二项
  9. 3. 第三项
  10. 5. 第四项
  12. // 推荐
  13. 1. 第一项
  14. 1. 第二项
  15. 1. 第三项
  16. 1. 第四项
  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

列表嵌套

  1. // 嵌套需要缩进
  2. 1. 第一项
  3. 1. 第二项
  4. 1. 第三项
  5.     1. 缩进项
  6.     1. 缩进项
  7. 1. 第四项
  1. 第一项
  2. 第二项
  3. 第三项
    1. 缩进项
    2. 缩进项
  4. 第四项

无序列表使用破折号（-），星号（*）或加号（+）

  1. /* 下面三种效果相同 */
  3. * First item
  4. * Second item
  5. * Third item
  7. + First item
  8. + Second item
  9. + Third item3
  11. // 推荐
  12. - First item
  13. - Second item
  14. - Third item
  • First item
  • Second item
  • Third item

代码

```javascript

将字符表示成代码，放入反引号`中即可

  1. `console.log("hello-world")`

console.log("hello-world")

代码块可以使用 三个反引号 、 三个反引号+java 或 三个反引号+javascript，也可以通过每行缩进至少4个空格

  1. /* 三个反引号（`）之间不能有空格（这里故意在中间加了一个空格） */
  3. ` ``
  4. <html>
  5.     <head>
  6.     </head>
  7. </html>
  8. ` ``
  10. ```java
  11. <html>
  12.     <head>
  13.     </head>
  14. </html>
  15. ` ``
  17. /* ```javascript - 推荐 */
  18. ```javascript
  19. <html>
  20.     <head>
  21.     </head>
  22. </html>
  23. ` ``
  25. // 每行缩进至少4个空格
  26.     <html>
  27.         <head>
  28.         </head>
  29.     </html>

这几种块级代码的区别是代码有颜色区分，下面两个示例使用的是 三个反引号+javascript 和 三个反引号

  1. <html>
  2.     <head>
  3.     </head>
  4. </html>
  1. <html>
  2.     <head>
  3.     </head>
  4. </html>

水平线

---

创建水平线，请在单独一行使用三个或更多的星号(*)、破折号(-)或下划线(_)

  1. /* 所有渲染输出看起来都相同 */
  3. --- // 推荐
  4. ----
  5. ***
  6. ****
  7. ___
  8. ____

水平线示例：

链接

[百度](htttps://www.baidu.com 'title')
<https:/ /www.baidu.com>
[博客园][1]

[链接名称](链接地址) 或 <链接地址>

  1. [百度1](https://www.baidu.com)
  3. // 鼠标悬停链接时显示：添加标题
  4. [百度2](https://www.baidu.com "添加标题")
  6. <https://www.baidu.com>
  8. <fake@example.com>

百度1

百度2

https://www.baidu.com

fake@example.com

强调链接，添加星号即可

*[百度](https://www.baidu.com/)*

百度

为了可读性，可以将链接提取成一个变量，放到文档其他地方

下面定义了5个链接，由于把链接提取了出去，所以看起来非常清晰

  1. /* 第一部分使用两组[]进行格式化，第一组[]显示为链接的文本，第二组[]指向存储在文档其他位置的链接 */
  2. 这个链接用 1 作为网址变量 [博客园][1]  
  3. 这个链接用 2 作为网址变量 [博客园][2]  
  4. // 第二组[]中的变量不区分大小写，可以包含字母、数字、空格或标点符号
  5. // 链接3和4指向同一个链接
  6. 这个链接用 3 作为网址变量 [博客园][A]  
  7. 这个链接用 4 作为网址变量 [博客园][a]  
  8. 这个链接用 5 作为网址变量 [博客园][a1 ,]  
  1. /* 第二部分可以放在文档任何位置 */
  3. // 下面示例几乎等效，除了第一个没有title
  4. [1]: https://www.cnblogs.com/ 
  5. [2]: https://www.cnblogs.com/ "博客园2"
  6. [A]: https://www.cnblogs.com/ (博客园3)
  7. [a1 ,]: <https://www.cnblogs.com/> (博客园5)

这个链接用 1 作为网址变量 博客园
这个链接用 2 作为网址变量 博客园
这个链接用 3 作为网址变量 博客园
这个链接用 4 作为网址变量 博客园
这个链接用 5 作为网址变量 博客园

图片

![alt](url "标题")
![][img1]
[![][img1]][1]

![alt属性文本](图片地址 "可选标题")

![alt属性文本](https://d33w.../images/shiprock.jpg "可选标题")

alt属性文本

像链接那样使用变量 ![][img1] -推荐

链接图片

[![][img1]][1]

转义字符

\

用 反斜杠\ 进行转义
\* 如果没有反斜杠，这将是无序列表中的项目符号。
* 如果没有反斜杠，这将是无序列表中的项目符号。

表格

header1|header2|header3
-|-|-
cnt1|cnt2|cnt3

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行

  1. |表头|表头头头头头头头|表头|
  2. |-|-|-|
  3. |内容|内容|内容容容容容容容容容|
  5. // 可以省略两头的 -推荐 |
  6. 表头|表头头头头头头头|表头
  7. -|-|-
  8. 内容|内容|内容容容容容容容容容
  10. // 通过冒号（:）实现居中对齐或右对齐
  11. |表头头头头头头头头|表头头头头头头头|表头|
  12. |-|:-:|-:|
  13. |默认左对齐|居中|右对齐|
表头 表头头头头头头头 表头
内容 内容 内容容容容容容容容容
表头 表头头头头头头头 表头
内容 内容 内容容容容容容容容容
表头头头头头头头头 表头头头头头头头 表头
默认左对齐 居中 右对齐

结束语

我在Visual Studio Code中写好的Markdown，放到Typora(一款免费的Markdown编辑器，支持OS X、Windows和Linux三种操作系统)里面，显示会有一些差异，比如图片没有左对齐、链接图片点击不会跳转等等，需要微调。

参考

原文链接：http://www.cnblogs.com/pengjiali/p/14418264.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Markdown热门文章

  • 利用Vue实现一个markdown编辑器实例代码
  • 博客园使用markdown
  • markdown mermaid状态图
  • (转)vscode实现markdown流程图
  • markdown mermaid序列图
  • markdown 使用误区
  • 【原】无脑操作：Markdown可以这样玩
  • markdown简单使用
  • MarkDown的常规用法
  • 把时间留给重要的事——Markdown 模板功能上线

    • Markdown推荐文章

  • JavaScript+Node.js写一款markdown解析器
  • markdown mermaid序列图
  • Markdown快速入门
  • 【原】无脑操作：Markdown可以这样玩
  • 利用Vue实现一个markdown编辑器实例代码
  • Web前端 前端工程师首选的几款编辑器/IDE以及Markdown的编辑器、语法

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号