Markdown语法对应的HTML标签实现


邓紫棋-后会无期

最近学习HTML,这篇文章记录,用Markdown和HTML语法,来实现同一种标记。一方面来巩固HTML的语法,一方面来通过对比感受一下Markdown的简洁。
HTML(Hyper Text Markup Language)超文本标记语言,是万维网的基础,静态网页都是用HTML语言写就;Markdown也是一种标记语言,Markdown兼容HTML,但挑选了一些常用的语法比HTML更简单,Markdown只是一种书写语言,最终呈现在网页上的还是转换成HTML格式的。

标题 Headline

一共支持六级标题

html
1
2
3
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>

一级标题

二级标题

三级标题


markdown
1
2
3
# 一级标题
## 二级标题
### 三级标题

一级标题

二级标题

三级标题

文字格式

斜体 Italic

html
1
2
<em> 这是斜体1 </em>
<i> 这是斜体2 </i>

这是斜体1
这是斜体2

markdown
1
2
*这是斜体1*
_这是斜体2_

这是斜体1
这是斜体2

粗体 Bold

html
1
2
<strong>这是粗体1</strong>
<b>这是粗体2</b>

这是粗体1
这是粗体2

markdown
1
2
**这是粗体1**
__这是粗体2__

这是粗体1
这是粗体2

引用 Quote

html
1
<q>李商隐说:<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q></q>

李商隐说:庄生晓梦迷蝴蝶。望帝春心托杜鹃。

html
1
<blockquote>李商隐说:<blockquote>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</blockquote></blockquote>

李商隐说:
庄生晓梦迷蝴蝶。望帝春心托杜鹃。
markdown
1
2
> 李商隐说:
>> 庄生晓梦迷蝴蝶。望帝春心托杜鹃。

李商隐说:

庄生晓梦迷蝴蝶。望帝春心托杜鹃。

删除线 Strikethrough

html
1
2
<del>This is strikethrough 1.</del>
<s>This is strikethrough 2.</s>

This is strikethrough 1.
This is strikethrough 2.

GFM
1
~~This is strikethrough,only for GFM.~~

This is strikethrough,only for GFM.

下划线 Underline

html
1
2
<ins>我带下划线1.</ins>
<u>我带下划线2.</u>

我带下划线1.
我带下划线2.

上下标

html
1
2
下标:H<sub>2</sub>O
上标:E=mc<sup>2</sup>

下标:H2O
上标:E=mc2

字体

html
1
<font size="3" color="red" face="KaiTi">hello,个性化的格式。</font>
hello,个性化的格式。

代码 Code

单行代码

html
1
<code>var i=10;</code>

var i=10;

markdown
1
`var i=10;`

var i=10;

多行代码

html
1
2
3
4
5
6
<pre>
if (isOK)
{
return true;
}
</pre>
if (isOK)
{
return true;
}

```c
if (isOK)
{
return true;
}
```

1
2
3
4
if (isOK)
{
return true;
}

水平横线

html
1
<hr />

markdown
1
2
3
---
我是分割线
***

我是分割线


列表 List

无序列表 Unordered List

ul-li标签
1
2
3
4
5
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

  • Coffee
  • Tea
  • Milk

markdown
1
2
3
* Coffee
* Tea
* Milk
  • Coffee
  • Tea
  • Milk

有序列表 Ordered List

ol-li标签
1
2
3
4
5
<ol start=2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

  1. Coffee
  2. Tea
  3. Milk

markdown
1
2
3
2. Coffee
3. Tea
4. Milk
  1. Coffee
  2. Tea
  3. Milk

链接 Link

文字

html
1
<a href="http://wuchenxu.github.io">chenxu's blog</a>

chenxu’s blog

markdown
1
[chenxu's blog](wuchenxu.github.io)

chenxu’s blog

图片

html
1
<img src="https://github.com/images/modules/contact/heartocat.png" alt="github" width="50" height="50" />

github
html支持图片高度、宽度等属性的设置,markdown暂不支持此类属性的设置。

markdown
1
![github](https://github.com/images/modules/contact/heartocat.png)

github

图片嵌入链接

html
1
<a href="http://wuchenxu.github.io"> <img src="https://github.com/images/modules/contact/heartocat.png" width="50" height="50"></a>

markdown
1
[![github](https://github.com/images/modules/contact/heartocat.png)](http://wuchenxu.github.io)

github

表格 Table

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border='1' summary="2015年xx学校xx年级">
<caption>成绩统计</caption>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</table>



成绩统计
班级学生数平均成绩
一班3089
二班3585

html表格支持boder宽度,对齐,单元格填充,单元格间距,背景图片,单元格跨行跨列等属性设置;
原生markdown并不支持表格,在GFM支持一种简单的表格语法。
神器-表格生成工具
GFM
1
2
3
4
| 班级 | 学生数 | 平均成绩 |
|--------|:----------------:|----------:|
| 一班 | 30 | 89 |
| 二班 | 35 | 85 |

班级 学生数 平均成绩
一班 30 89
二班 35 85

Reference:

  1. html
  2. imooc