Typora_Markdown_多图片显示
\qquad 多图显示分为两种情况:一种是整体不需要标题,另一种每一个图片都需要标题。
1 整体不需要标题
\qquad
此时由于每一张图片下不需要标题,结构也简单了很多。Typora的多图片显示主要基于html的<table>
标签来实现,构造出内容只有图片的表格。效果如下:
![Typora-Logo](https://i-blog.csdnimg.cn/blog_migrate/61ced1e1e7a5f6065363c3a971fef03a.bmp)
\qquad 代码如下:
<table frame=void> <!--使用table标签,且frame=void消除外边框-->
<tr> <!--<tr>一行的内容<\tr>,<td>一个格子的内容<\td>-->
<td><center><img src="第一张图片的路径"
alt="第一张图片显示不出时显示的文字"
height="填数字作为高度"/></center></td> <!--<center>标签将图片居中-->
<td><center><img src="第二张图片的路径"
alt="第二张图片显示不出时显示的文字"
height="高度一致会好看"/></center></td>
</tr>
</table>
\qquad 下面是四张图片构成田字格的例子:
![Typora-Logo](https://i-blog.csdnimg.cn/blog_migrate/a541fd15cc1a9463bf02f251263938ea.bmp)
\qquad 代码如下:
<table frame=void>
<tr>
<td><center><img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="100"/></center></td>
<td><center><img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="100"/></center></td>
</tr>
<tr> <!--第二行-->
<td><center><img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="100"/></center></td>
<td><center><img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="100"/></center></td>
</tr>
</table>
2 每张图片都需要标题
\qquad
在比较正经的排版中,只要是一张图片,就需要一个标题进行标注,所以当同时显示多张图片时,严格意义上还是需要加上标题。所以我是将单张图片和其标题用块级<div>
标签进行封装再嵌入表中。这样的拓展性好,同时排版也更清爽。效果如下:
![Typora-Logo](https://i-blog.csdnimg.cn/blog_migrate/2cf685e3093e68e9ec4f247907836086.bmp)
\qquad 代码如下:
<div><table frame=void> <!--用了<div>进行封装-->
<tr>
<td><div><center> <!--每个格子内是图片加标题-->
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/> <!--高度设置-->
<br> <!--换行-->
Typora-Logo1 <!--标题1-->
</center></div></td>
<td><div><center> <!--第二张图片-->
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/>
<br>
Typora-Logo2
</center></div></td>
</tr>
</table></div>
\qquad 下面是四张图片加标题的显示:
![Typora-Logo](https://i-blog.csdnimg.cn/blog_migrate/2a945df1cf80bd1b092d18b9e648f3ea.bmp)
\qquad 代码如下:
<div><table frame=void>
<tr>
<td><div><center>
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/>
<br>
Typora-Logo1
</center></div></td>
<td><div><center>
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/>
<br>
Typora-Logo2
</center></div></td>
</tr>
<tr> <!--第二行-->
<td><div><center>
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/>
<br>
Typora-Logo3
</center></div></td>
<td><div><center>
<img src="02_Typora_Pictures_Many/typora-logo.png"
alt="Typora-Logo"
height="120"/>
<br>
Typora-Logo4
</center></div></td>
</tr>
</table></div>