常用表格
大标题
小标题效果展示附标题2
区别展示（表格）
let const var主要区别 | var | let | const |
|---|---|---|---|
| 变量提升 | ✔️ | ⛔ | ⛔ |
| 全局变量 | ✔️ | ⛔ | ⛔ |
| 重复声明 | ✔️ | ⛔ | ⛔ |
| 重新赋值 | ✔️ | ✔️ | ⛔ |
| 暂时性死区 | ⛔ | ✔️ | ✔️ |
| 块作用域 | ⛔ | ✔️ | ✔️ |
| 只声明不初始化 | ✔️ | ✔️ | ⛔ |
命令工具选项说明表格
| 选项 | 示例 | 说明 |
|---|---|---|
| - i | tcpdump -i eth0 | 指定网络接口，eth0表示接口0 |
左文字，右图片（1:1）
| 大标题 小标题 | |
| 效果展示附标题2 |
左右图片
1:1
1：3
<table>
<tr>
<td colspan="4" align="center">
<h2>mkdocs-material 基础风格</h2>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<h3>h5手机端</h3>
<img src="http://localhost:45462/image/202203041720911.png"/>
</td>
<td colspan="3" align="center">
<h3>web端</h3>
<img src="http://localhost:45462/image/202203041715284.png"/>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="center">
<h2>mkdocs-material 基础风格</h2>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<h3>h5手机端</h3>
<img src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041720911.png"/>
</td>
<td colspan="3" align="center">
<h3>web端</h3>
<img src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041715284.png"/>
</td>
</tr>
</table>
上下图片（基于 <table>）
- 指定宽度
<table>
<tr>
<td align="center">
<img width="800" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202281419377.png"/>
</td>
</tr>
<tr>
<td align="center">
<h2>vue2</h2>
<br/>
</td>
</tr>
<tr>
<td align="center">
<img width="800" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202171654270.png"/>
</td>
</tr>
<tr>
<td align="center">
<h2>vue3</h2>
<br/>
</td>
</tr>
</table>
<table>
<tr>
<td align="center">
<img width="800" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202281419377.png"/>
</td>
</tr>
<tr>
<td align="center">
<h2>vue2</h2>
<br/>
</td>
</tr>
<tr>
<td align="center">
<img width="800" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202171654270.png"/>
</td>
</tr>
<tr>
<td align="center">
<h2>vue3</h2>
<br/>
</td>
</tr>
</table>
左右图片（基于 <table>）
- 左右居中，且固定图片宽度为500
<table>
<tr>
<td colspan="2" align="center">
<b>标题</b>
<br/>
<a>附标题</a>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<b>代码演示</b>
<a>附标题1</a>
<br/>
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202221718853.png"/>
</td>
<td colspan="1" align="center">
<b>效果展示</b>
<a>附标题2</a>
<br/>
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202202221719180.png"/>
</td>
</tr>
</table>
四宫格图片
<table>
<tr>
<td colspan="2" align="center">
<h2>基础功能</h2>
<a src="https://interactjs.io/">interactjs</a>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041441481.gif"/>
<h3>基础功能</h3>
</td>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041441875.gif"/>
<h3>基础功能</h3>
</td>
</tr>
<!-- <内容2> -->
<tr>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041442121.gif"/>
<h3>基础功能</h3>
</td>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041442854.gif"/>
<h3>基础功能</h3>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="center">
<h2>基础功能</h2>
<a src="https://interactjs.io/">interactjs</a>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041441481.gif"/>
<h3>基础功能</h3>
</td>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041441875.gif"/>
<h3>基础功能</h3>
</td>
</tr>
<tr>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041442121.gif"/>
<h3>基础功能</h3>
</td>
<td colspan="1" align="center">
<img width="500" src="https://gitee.com/capsion-images/notebook/raw/master/image/202203041442854.gif"/>
<h3>基础功能</h3>
</td>
</tr>
</table>