0%

Markdown语法对应的HTML标签实现

发表于 更新于 分类于 ， 阅读次数： Valine：
邓紫棋-后会无期

最近学习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="https://wuchenxu.com">chenxu's blog</a>

chenxu’s blog

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

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](https://github.com/images/modules/contact/heartocat.png)

图片嵌入链接

html
1
<a href="https://wuchenxu.com"> <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)](https://wuchenxu.com)

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](https://guides.github.com/features/mastering-markdown/)支持一种简单的表格语法。 [神器-表格生成工具](http://www.tablesgenerator.com/)
GFM
1
2
3
4
| 班级   |      学生数      |  平均成绩 |
|--------|:----------------:|----------:|
| 一班   |          30      |     89    |
| 二班   |          35      |     85    |
班级 学生数 平均成绩
一班 30 89
二班 35 85

Reference:

  1. html
  2. imooc
  3. Learn HTML Free in [2021] – Basic HTML Codes for Beginners