Typora_Markdown_图片排版

1 Typora默认图片显示

\qquad 直接将图片拖到Typora中，便可以进行显示，还可以调整其缩放大小
\qquad 而管理默认图片显示的时候，我的习惯是将所有显示的图片放入同样名字的文件夹中，这样随意在网页，在其他文件夹拖动图片到我们正在编辑的typora中，都可以在当前的typora同名文件夹中找到显示的图片。

偏好设置>图像>下拉选择“复制到指定路径”

\qquad 这样就可以达到上述的效果，下面用一个例子看看它的html代码：

<img src="Typora_Pictures/typora-logo.png" 
	 alt="typora-logo" 
	 style="zoom:25%;" />

\qquad 可以看出，上面的Typora图标的显示构造是非常简单的，只能应付简单显示，不能达到一些复杂的效果。
\qquad 下面将借助html达到较为复杂的图片效果。

2 Typora_Markdown_图片标题(题注)

\qquad 总体有两种方法，一种是简单粗暴的,直接在图片下加文字作标题，而另一种是封装可拓展性强。

1 直接下加标题

\qquad 效果如下，下图即为在Typora中该做法的效果，还是可以达到预期的效果，标题在图片正下方，但由于是默认图片显示和自加html标题，二者分开编程，在Typora中显示略有逊色，标题和图片会有隔一行的感觉，让人觉得标题和图片贴合度不高，不够排版美观。

\qquad 代码如下：

<img src="这里放图片路径"
     alt="这里放图片显示不出的时候出现的文字"
     style="zoom:这里写缩放的百分比，比如:30%"/>
<!--上面的是Typora默认的，不用自己写-->

<center><p>这里放标题</p></center>

2 封装型

\qquad 封装型效果如下，整个html代码在一起没有分开，整个代码要自己写。但从下图可以看出，在Typora的显示中，图片和标题(题注)贴合性高，整体感觉比直接下加标题的方法更美观。

\qquad 代码如下：

<div>			<!--块级封装-->
    <center>	<!--将图片和文字居中-->
    <img src="图片路径放这里"
         alt="无法显示图片时显示的文字"
         style="zoom:这里写图片的缩放百分比"/>
    <br>		<!--换行-->
    这里是图片的标题	<!--标题-->
    </center>
</div>

3 Typora_Markdown_多图片显示

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

3.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>

3.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>