概述

Markdown的目标是实现易读易写,一份使用Markdown格式撰写的文件应该可以直接以纯文本发布

Markdown的语法全由一些符号所组成,它的语法种类很少,只对应HTML标记的一小部分。由于Markdown实际上就是简化版的HTML,所以直接写HTML也是可以的

段落

不加任何符号的一段字符,就是一个段落。多个段落之间用空行分隔
[注意]在markdown中,多个空行会合并为一个空行显示

p1   p2p3

输出HTML为

<p>p1</p><p>p2</p><p>p3</p>

换行

如果段落之间没有空行,则解析为HTML标签<br>

p1p2
p3

输出HTML为

<p>p1<br>p2<br>p3</p>

标题

#、##、###、####、#####、######分别对应<h1><h2><h3><h4><h5><h6>。其实我个人感觉,不如直接使用<h>标签方便,特别是到标题3以后

#h1##h2###h3####h4#####h5######h6

输出HTML为

<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>

区块

说起区块,可能听说的人比较少。它用'>'这个符号来表示,对应于HTML中的<blockquote>标签,用于引用块元素。《Head first HTML And CSS》一书中,还专门针对<blockquote><q>进行了详细的区分,但实际用的比较少
但是,markdown对应区块引用的实现上,并不能完整表达<blockquote>标签的语义,应该可以引用多个段落,但实际上markdown的'>'符号只能引用一个段落

>p1p2

输出HTML为

<blockquote><p>p1</p></blockquote><p>p2</p>

列表

【无序列表】

无序列表使用星号、加号和减号来做为列表的项目标记

* red* blue* green+ red+ blue+ green- red- blue- green

输出HTML为

<ul><li>red</li><li>blue</li><li>green</li></ul>

【有序列表】

有序的列表则是使用一般的数字接着一个英文句点作为项目标记

1. Red2. Green3. Blue

输出HTML为

<ol><li>red</li><li>blue</li><li>green</li></ol>

[注意]如果在项目之间插入空行,那项目的内容会用<p>包起来

分隔线

可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线

* * *********- - -
---------------------------------------

输出HTML为

<hr><hr><hr><hr><hr>

链接

Markdown支持三种形式的链接语法:行内、参考和自动。行内和参考链接都使用角括号把文字转成链接

[注意]由于Markdown默认产生的链接是当前页打开,且无法实现_blank,所以,就个人而言还是直接使用<a>更方便

【行内链接】

行内形式是直接在后面用括号直接接上链接

This is an [example link](http://cnblogs.com/)

输出HTML为

<p>This is an<a href="http://cnblogs.com/">example link</a></p>

【参考链接】

参考形式的链接可以为链接定一个名称,之后可以在文件的其他地方定义该链接的内容。title属性是选择性的,链接名称可以用字母、数字和空格,但是不分大小写

I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].[1]: http://google.com/ "Google"[2]: http://search.yahoo.com/ "Yahoo Search"[3]: http://search.msn.com/ "MSN Search"

输出HTML为

<p>I get 10 times more traffic from <a href="http://google.com/"title="Google">Google</a> than from <a href="http://search.yahoo.com/"title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"title="MSN Search">MSN</a>.</p>

【直接链接】

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

[注意]在网址前一定要加http://,否则将不会被识别为URL

<http://cnblogs.com/>

输出HTML为

<a href="http://cnblogs.com/">http://cnblogs.com/</a>

图片

图片的语法和链接很像。先是一个惊叹号!,接着一个方括号,里面放上图片的替代文字,接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的'title'文字

【行内形式】

![alt text](/path/to/img.jpg "Title")

【参考形式】

![alt text][id][id]: /path/to/img.jpg "Title"

上面两种方法都会输出HTML为:

<img src="/path/to/img.jpg" alt="alt text" title="Title" />

代码

【code】

使用反引号`来标记代码区段<code>,区段内的&、<和>都会被自动的转换成HTML实体

`<p>`段落`</p>`

输出HTML为

<code><p></code>段落<code></p></code>

【pre】

如果要建立一个已经格式化好的代码区块,只要每行都缩进 4 个空格或是一个 tab 就可以了,而 &、< 和 > 也一样会自动转成 HTML 实体

<blockquote><p>For example.</p></blockquote>

输出HTML为

<pre><code>&lt;blockquote&gt;&lt;p&gt;For example.&lt;/p&gt;&lt;/blockquote&gt;</code></pre>

强调

Markdown 使用星号*和底线_作为标记强调字词的符号,被*或_ 包围的字词会被转成用 <em>标签包围,用两个* 或_包起来的话,则会被转成<strong>

如果* 和 _ 两边都有空白的话,它们就只会被当成普通的符号。如果要在文字前后直接插入普通的星号或底线,可以用反斜线:

\*em* **strong*\*

输出HTML为

<em>em</em><strong>strong</strong>

转义

在markdown中,有一些符号具有特殊的用途,如\、*等,如果要使用它们的本意,则需要在前面加一个反斜杠\来实现

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号

\   反斜线
`   反引号*   星号
_   底线
{}  花括号
[]  方括号
()  括弧#   井字号+   加号-   减号
.   英文句点
!   惊叹号

空两格

使用markdown排版时,很常用的需求是实现首行缩进,一般使用两个全角空格&emsp$emsp来实现

注意

在博客园中使用markdown写博客时,由于没有即时显示的功能,经常因为多敲了几个空格,而被解析为<br>的情况

转载于:https://blog.51cto.com/jsw55667/1932605

前端学Markdown相关推荐

  1. 前端学HTTP之web攻击技术

    前端学HTTP之web攻击技术 前面的话 简单的HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击的对象.应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用等资源才是攻击目 ...

  2. vue怎么插入接口demo_前端学起来特别吃力,新人入前端怎么学?

    最近知乎收到一些问题,问前端学起来吃力,连续更新几次回答的比较全了.现在整理下分享给掘金的小伙伴们. 原知乎问题: 前言 前端工作两年多.大部分前端原理.框架都能完全运用.工作中几乎遇不到解决不了的问 ...

  3. markdown 目录缩进_页面排版很难吗?一起来学Markdown吧!01基础语法

    为什么要学习markdown markdown入门门槛低,适用面广,排版格式简洁明了: 学习路径 基础语法->GFM扩展语法->写作规范->编译器 基础语法 1. 标题分级 语法: ...

  4. 前端学起来特别吃力,新人入前端怎么学?

    最近知乎收到一些问题,问前端学起来吃力,连续更新几次回答的比较全了.现在整理下分享给博客的小伙伴们. 前端工作两年多.大部分前端原理.框架都能完全运用.工作中几乎遇不到解决不了的问题(除了那些恶心无法 ...

  5. 为什么要学Markdown?有什么用?

    为什么要学Markdown?有什么用? 本文目录 一. Markdown是什么? 二.我为什么要去学习Markdown? 三.Markdown 语法 四.去哪里可以试玩? 五.怎么跟公众号结合使用?六 ...

  6. 前端学不动了怎么办?3年,5年,10年,都需要规划!

    前端学不动的根本原因是目标感不强或者根本就没有目标.在学习前端之前,我们需要先思考我们要成为一个什么样前端工程师.接下来我们以时间线的方式,来告诉我们什么时间该做什么事儿.本文以普通人为例,也是想给普 ...

  7. 小白都能看得懂的教程 一本教你如何在前端实现markdown编辑器

    小白都能看得懂的教程 一本教你如何在前端实现markdown编辑器   大家好,我是亓官劼(qí guān jié ),在[亓官劼]公众号.CSDN.GitHub.B站.华为开发者论坛等平台分享一些技 ...

  8. 前端学python有什么用-杭州前端需要学习python

    杭州前端需要学习python 来源:教育联展网 编辑:佚名 发布时间:2018-09-13 现在Python的就业前景怎么样 Python既是一种面向对象的编程语言又因为其简单.易学.开源.脚本语言 ...

  9. 前端学到什么程度可以找到工作?

    前端开发一直是一个比较热门的行业,目前自学和培训班正在学习前端的同学不在少数,大家都有一个疑问,那就是前端到底学到什么程度才能找到工作呢?今天小千就来带大家分析一下. 前端开发职业需求 首先我们先来看 ...

最新文章

  1. redis python zset
  2. tcpdump抓包对性能的影响
  3. 数字数据fzu 2120 数字排列
  4. Employee Bonus --leetcode
  5. 代码评析与重构——求完数问题
  6. java中索引超出怎么办_Java-字符串索引超出范围异常“字符串索引超出范围”
  7. Web Deploy发布网站及常见问题解决方法(图文)
  8. C#的未来:简化参数空值验证
  9. [蓝桥杯2015决赛]积分之迷-枚举(水题)
  10. java操作ssdb:set、map、list..
  11. 【http】记一次http无法连通总是超时的问题
  12. PHP全文索引 讯搜xunsearch
  13. MR_LINUX_DRIVER安装教程,ovito安装说明(windows+linux)
  14. LSTM(RNN)中的注意力机制
  15. authc过滤器 shiro_shiro原理之过滤器
  16. 创建物理卷报错Can't open /dev/sdb5 exclusively. Mounted filesystem的问题解决过程记录
  17. 怎样制作CHM格式的电子书?
  18. unity 打开项目路径无效_怎么打开已有的unity工程文件?如何打开一个已有的unity3d游戏工程啊?...
  19. python普通类实现接口_python3从零学习-5.8.1、socket—底层网络接口
  20. java导出excel表头斜线_Java导出Excel三表头

热门文章

  1. 我自学python的路-Python的学习路经
  2. 学python有哪些用途-Python语言有哪些用途
  3. python语言的官方网站地址-Python网络编程 - 请求地址上的文件并下载
  4. NVIDIA Jetson 系列产品开发相关文档,TAO、TLT、NGC
  5. python利用opencv自带的颜色查找表(LUT)进行色彩风格变换
  6. windows如何实现视屏自动定时、全屏、轮播 播放
  7. Opengl-法线贴图(用来细化表面的表现表现的凹凸)
  8. php cache缓存 购物车,Yii2使用Redis缓存购物车等数据
  9. LeetCode Counting Bits(动态规划)
  10. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏