markdown html图片,Markdown语法对应的HTML标签实现

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

邓紫棋-后会无期

最近学习HTML，这篇文章记录，用Markdown和HTML语法，来实现同一种标记。一方面来巩固HTML的语法，一方面来通过对比感受一下Markdown的简洁。

HTML(Hyper Text Markup Language)超文本标记语言，是万维网的基础，静态网页都是用HTML语言写就；Markdown也是一种标记语言，Markdown兼容HTML，但挑选了一些常用的语法比HTML更简单，Markdown只是一种书写语言，最终呈现在网页上的还是转换成HTML格式的。

一共支持六级标题html1

2

3

一级标题

二级标题

三级标题

一级标题

二级标题

三级标题markdown1

2

3# 一级标题

## 二级标题

### 三级标题

一级标题

二级标题

三级标题

文字格式

斜体 Italichtml1

2 这是斜体1

这是斜体2

这是斜体1

这是斜体2markdown1

2*这是斜体1*

_这是斜体2_

这是斜体1

这是斜体2

粗体 Boldhtml1

2这是粗体1

这是粗体2

这是粗体1

这是粗体2markdown1

2**这是粗体1**

__这是粗体2__

这是粗体1

这是粗体2

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

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

李商隐说:

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

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

2> 李商隐说:

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

删除线 Strikethroughhtml1

2This is strikethrough 1.

This is strikethrough 2.

This is strikethrough 1.

This is strikethrough 2.GFM1~~This is strikethrough,only for GFM.~~

This is strikethrough,only for GFM.

下划线 Underlinehtml1

2我带下划线1.

我带下划线2.

我带下划线1.

我带下划线2.

上下标html1

2下标：H₂O

上标：E=mc²

下标：H2O

上标：E=mc2

字体html1hello,个性化的格式。

hello,个性化的格式。

代码 Code

单行代码html1var i=10;

var i=10;markdown1`var i=10;`

var i=10;

多行代码html1

2

3

4

5

6

if (isOK)

{

return true;

}

if (isOK)

{

return true;

}```c

if (isOK)

{

return true;

}

```1

2

3

4if (isOK)

{

return true;

}

水平横线html1

---

markdown1

2

3---

我是分割线

***

我是分割线

列表 List

无序列表 Unordered Listul-li标签1

2

3

4

5

• Coffee
• Tea
• Milk

Coffee

Tea

Milkmarkdown1

2

3*Coffee

*Tea

*MilkCoffee

Tea

Milk

有序列表 Ordered Listol-li标签1

2

3

4

5

2. Coffee
3. Tea
4. Milk

Coffee

Tea

Milkmarkdown1

2

32.Coffee

3.Tea

4.MilkCoffee

Tea

Milk

链接 Link

文字html1chenxu's blogmarkdown1[chenxu's blog](wuchenxu.com)

图片html1

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

图片嵌入链接html1

markdown1[](https://wuchenxu.com)

表格 Tablehtml1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

成绩统计

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

成绩统计班级学生数平均成绩

一班3089

二班3585 html表格支持boder宽度，对齐，单元格填充，单元格间距，背景图片，单元格跨行跨列等属性设置；

原生markdown并不支持表格，在[GFM](https://guides.github.com/features/mastering-markdown/)支持一种简单的表格语法。

[神器-表格生成工具](http://www.tablesgenerator.com/)GFM1

2

3

4| 班级 | 学生数 | 平均成绩 |

|--------|:----------------:|----------:|

| 一班 | 30 | 89 |

| 二班 | 35 | 85 |班级学生数平均成绩一班3089

二班3585

Reference: