简介

Markdown是一种轻量级标记语言,它以纯文本形式编写文档,并最终以HTML格式发布。

本文描述的Markdown语法为其标准实现,不含扩展实现。本文描述的HTML语法遵循HTML5标准。

本文旨在找寻Markdown和HTML的对应关系,并指导转换器的设计。因此目标文件应当是不含CSS的纯HTML文件(但预留CSS接口)。

由于本人不是Markdown或HTML的专家,因此疏漏在所难免,如有发现错误请联系本人改正,不胜感激!

Markdown与HTML的语法对比

标题:

Markdown:

  1. 一级标题:在普通文本行之后的下一行写下三个以上等号=,或前缀一个#号并空格;
  2. 二级标题:在普通文本行之后的下一行写下三个以上减号-,或前缀两个#号并空格;

语法如下:

一级标题  
===

或
# 一级标题

二级标题
---

或
## 二级标题

HTML:

使用<h1>标签。语法如下:

<h1>一级标题</h1>

次标题:

Markdown:

前缀1~6个#号并空格(注:如果#后面没有空格,则不起作用)。语法如下:

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

HTML:

使用<h1>~<h6>标签。语法如下:

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

分割线:

Markdown:

连续三个以上*-_,语法如下:

***
---
___

HTML:

使用<hr />标签。语法如下:

<hr />

段落:

Markdown:

段落的前后都要有空行。

HTML:

段落使用<p>标签分割,语法如下:

<p>段落内容</p>

换行符:

Markdown:

行末输入两个空格加回车产生换行,语法如下:

第一行  
第二行

HTML:

使用<br />标签,语法如下:

第一行<br />
第二行

斜体:

Markdown:

  1. 使用一对*(星号)包围,显示效果:斜体内容
  2. 使用一对_(下划线)包围,显示效果:斜体内容

语法如下:

*斜体内容*
_斜体内容_

HTML:

  1. 使用<i>标签,显示效果:斜体内容
  2. 使用<em>标签,显示效果:强调内容

语法如下:

<i>斜体内容</i>
<em>强调内容</em>

粗体:

Markdown:

  1. 使用一对**(两个星号)包围,显示效果:粗体内容
  2. 使用一对__(两个下划线)包围,显示效果:粗体内容;

语法如下:

**粗体内容**
__粗体内容__

HTML:

  1. 使用<b>标签,显示效果:粗体内容
  2. 使用<strong>标签,显示效果:重要内容

语法如下:

<b>粗体内容</b>
<strong>重要内容</strong>

等宽字型:

Markdown:

使用`符号包围,显示效果:等宽字型,语法如下:

`等宽字型`

HTML:

使用<code>标签,显示效果:等宽字型,语法如下:

<code>等宽字型</code>

无编号列表:

Markdown:

使用+-*前缀(可混用,但不建议),后面至少空一格,显示效果:

  • 无编号列表1
  • 无编号列表2
  • 无编号列表3

语法如下:

+ 无编号列表1
- 无编号列表2
* 无编号列表3

HTML:

使用<ul>包围列表,每一个条目用<li>包围,显示效果:

  • 无编号列表1
  • 无编号列表2
  • 无编号列表3

语法如下:

<ul>
    <li>无编号列表1</li>
    <li>无编号列表2</li>
    <li>无编号列表3</li>
</ul>

编号列表:

Markdown:

使用1.前缀(注意.符号和正文之间的空格),序号务必保持连续,显示效果:

  1. 编号列表1
  2. 编号列表2
  3. 编号列表3

语法如下:

1. 编号列表1
2. 编号列表2
3. 编号列表3

HTML:

使用<ol>包围列表,每一个条目用<li>包围,显示效果:

  1. 编号列表1
  2. 编号列表2
  3. 编号列表3

语法如下:

<ol>
    <li>编号列表1</li>
    <li>编号列表2</li>
    <li>编号列表3</li>
</ol>

超链接:

Markdown:

  1. 行内式
    1. 格式:[超链接文本](URL)
    2. 显示效果:维基百科,自由的百科全书
  2. 参考式
    1. 格式:
      [超链接文本][序号]
      [序号]:URL "鼠标悬停提示文本"(这部分通常放在文末)

    2. 显示效果:
      维基百科,自由的百科全书

语法如下:

行内式:
[维基百科,自由的百科全书](https://zh.wikipedia.org/)
参考式:
[维基百科,自由的百科全书][1]
[1]:https://zh.wikipedia.org/ "维基百科"

HTML:

使用<a>标签并指定其href属性,显示效果:维基百科,自由的百科全书

语法如下:

<a href="https://zh.wikipedia.org/">维基百科,自由的百科全书</a>

图片:

Markdown:

格式:![图片备注](URL),类似于超链接(前边加一个感叹号),其中图片备注用于当图片无法正常显示时起到文本替代的作用(可选)。
显示效果:脑阔疼

语法如下:

![脑阔疼](https://bufbrane.com/content/images/2018/09/naokuoteng.jpg)

HTML:

使用<img>标签并指定其src属性、alt属性(替换文本,相当于Markdown的图片备注)、title属性(鼠标悬停时的文字提示)。
显示效果:logo

语法如下:

<img title="脑阔疼" alt="logo" src="https://bufbrane.com/content/images/2018/09/naokuoteng.jpg">

区块引用:

Markdown:

使用>字符前缀(注意>符号与正文之间的空格),效果如下:

第一行

嵌套第二行

嵌套第三行

语法如下:

> 第一行
>> 嵌套第二行
>>> 嵌套第三行

HTML:

使用<blockquote>标签,显示效果:

第一行
嵌套第二行
嵌套第三行

语法如下:

<blockquote>
    第一行
    <blockquote>
    嵌套第二行
        <blockquote>
        嵌套第三行
        </blockquote>
    </blockquote>
</blockquote>

代码区块:

Markdown:

每行前面加4个空格或一个制表符,显示效果:

#include <stdio.h>
int main()
{
    printf("Hello World\n");
    return 0;
}

语法如下:

    #include <stdio.h>
    int main()
    {
        printf("Hello World\n");
        return 0;
    }

HTML:

使用<pre>标签,同时注意将HTML中的字符进行转义,显示效果:

#include <stdio.h>
int main()
{
    printf("Hello World\n");
    return 0;
}

语法如下:

<pre>
#include &lt;stdio.h&gt;
int main()
{
    printf("Hello World\n");
    return 0;
}
</pre>

多行引用:

Markdown:

使用三个连续的```符号,并成对使用。

HTML:

使用<pre>标签。但需要对特殊字符进行转义,如

  1. 左尖括号'<':&lt;
  2. 右尖括号'>':&gt;

表格:

Markdown:

  1. 使用|表示表格纵向边界(文字和分隔符之间需要有空格);
  2. (可选)使用-隔开表头和表内容;
  3. (可选)使用:进行对齐设置,默认左对齐。

注:Markdown表格功能简单,仅提供如上的基本功能。

显示效果:

A B C
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3

语法如下:

|   |  A  |  B  |  C  |
| - | :-- | :-: | --: |
| 1 | A1  | B1  | C1  |
| 2 | A2  | B2  | C2  |
| 3 | A3  | B3  | C3  |

HTML:

使用<table>标签定义表格,使用<tr>标签定义表格的行,使用<td>定义单元格。
注:HTML5 不支持 <td> align 属性。请使用 CSS 代替。

显示效果:

A B C
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3

语法如下:

<table>
    <tr>
        <td></td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
    </tr>   
    <tr>
        <td>3</td>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>   
</table>

参考资料:

  1. Markdown - 维基百科,自由的百科全书
  2. Markdown基本语法
  3. HTML教程|菜鸟教程