MarkdownHTML

Markdown HTML 标签

Markdown 可以解析 HMTL 标签，因此可以使用 HTML 标签实现 Markdown 基本语法，同时实现一些 Markdown 不支持的功能

本篇内容参考了博客文章Markdown语法对应的HTML标签实现-Wu Chenxu，首先进行感谢。

1.标题

使用 HTML 标签实现多级标题

<h1> 标题 </h1>
<h2> 标题 </h2>
<h3> 标题 </h3>

标题

标题

标题

2.格式

使用 HTML 标签实现文字格式设置

<em> 斜体 </em>
<i> 斜体 </i>
<strong> 粗体 </strong>
<b> 粗体 </b>
<del> 删除线 </del>
<s> 删除线 </s>
<ins> 下划线 </ins>
<u> 下划线 </u>

斜体
斜体
粗体
粗体
删除线
删除线
下划线
下划线

利用 HTML 标签实现上下标

H<sub>2</sub>O
E=mc<sup>2</sup>

H₂O
E=mc²

利用 HTML 标签设置字体和颜色

<font size='4' color='blue' face='KaiTi'>Hello World</font>

Hello World

3.引用

利用 HTML 标签实现引用嵌套

<blockquote> 引用 <blockquote> 引用 </blockquote></blockquote>
<q> 引用 <q> 引用 </q></q>

引用

引用

引用 引用

4.分割线

利用 HTML 标签设置分割线

<hr />

---

5.图片

利用 HTML 标签设置图片格式

<img src="https://i.loli.net/2020/03/17/OWtxXFTC7SHUbyV.png" alt="QB.png" width="500" height="500" />

还可以利用 HTML 为图片嵌入超链接

<a href="https://www.bilibili.com/bangumi/media/md28220105"><img src="https://i.loli.net/2020/03/17/OWtxXFTC7SHUbyV.png"> </a>

6.超链接

利用 HTML 标签添加超链接

<a href="https://www.bilibili.com"> BiliBili </a>

BiliBili

7.列表

利用 HTML 标签实现列表
无序列表

<ul>
  <li> Apple </li>
  <li> Banana </li>
  <li> Grape </li>
</ul>

• Apple
• Banana
• Grape

有序列表

<ol start=3>
  <li> Why </li>
  <li> When </li>
  <li> Where </li>
</ol>

3. Why
4. When
5. Where

8.表格

利用 HTML 标签实现表格

<table border.'1' summar='students\' list'
  <caption> List </caption>
  <tr>
    <th> Name </th>
    <th> Age </th>
    <th> Grade </th>
  </tr>
  <tr>
    <td> John </td>
    <td> 12 </td>
    <td> 7 </td>
  </tr>
  <tr>
    <td> Mike </td>
    <td> 10 </td>
    <td> 5 </td>
  </tr>
</table>

List

Name	Age	Grade
John	12	7
Mike	10	5

HTML 表格还可以设置列宽、对齐方式、单元格填充、背景图片等属性

<table>
   <tr>
        <th width=20%> 列宽 width=20% </th>
        <th width=45% style="text-align:center"> 表头居中 style="text-align:center" </th>
        <th widht=20% style="text-align:right">居右</th>
        <th widht=5%>列3</th>
   </tr>
   <tr>
        <td >设置背景色 </td>
        <td bgcolor=rgb(92, 184, 92)> bgcolor=rgb(92, 184, 92) </td>
        <td bgcolor=#eea236> bgcolor=#eea236 </td>
        <td bgcolor=pink> bgcolor=pink </td>
   </tr>
   <tr>
        <td><b>合并列</b></td>
        <td colspan=3 align=center> 起始列colspan=2 align=center</td>
   </tr>
   <tr>
        <td rowspan=3><b>合并行</b> <br> 起始行rowspan=3 </td>
        <td align=center> align=center 对th无效</td>
        <td>cell</td>
        <td>cell</td>
   </tr>
   <tr>
        <td style="text-align:right"> style="text-align:right" </td>
        <td>cell</td>
        <td rowspan=2>合并行 rowspan=2</td>
   </tr>
   <tr>
        <td>cell</td>
        <td>cell</td>
   </tr>
   <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>

列宽	表头居中	居右	列3
设置背景色	rgb(92, 184, 92)	#eea236	pink
合并列	起始列
合并行 起始行	居中	cell	cell
	向右对齐	cell	合并行
	cell	cell
cell	cell	cell	cell

9.代码

利用 HTML 标签设置代码
单行代码

<code> print('Hello world') </code>

print('Hello world')

代码块

<pre>
function()
{
	return 0;
}
</pre>

function()
{
    return 0;
}

---