Typora_Markdown_多图片显示

Typora_Markdown_多图片显示

\qquad 多图显示分为两种情况：一种是整体不需要标题，另一种每一个图片都需要标题。

1 整体不需要标题

\qquad 此时由于每一张图片下不需要标题，结构也简单了很多。Typora的多图片显示主要基于html的<table>标签来实现，构造出内容只有图片的表格。效果如下：

\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 下面是四张图片构成田字格的例子：

\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>标签进行封装再嵌入表中。这样的拓展性好，同时排版也更清爽。效果如下：

\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 下面是四张图片加标题的显示：

\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>