Typora_Markdown_图片标题(题注)

最新推荐文章于 2024-04-17 09:33:10 发布

要加油GW

最新推荐文章于 2024-04-17 09:33:10 发布

阅读量2k

点赞数 4

分类专栏：论文阅读文章标签： python

本文链接：https://blog.csdn.net/weixin_44627093/article/details/126053460

版权

论文阅读专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在Typora中使用Markdown编辑图片时如何添加标题或题注的两种方法。第一种是简单地在图片下方添加HTML代码实现标题，但可能会造成标题与图片间隔不美观。第二种是通过封装HTML代码，使图片和标题更紧密地结合，提高排版的美观度。详细展示了两种方法的代码实现和效果。

摘要由CSDN通过智能技术生成

Typora_Markdown_图片标题(题注)

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

直接下加标题

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

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

代码如下：

<img src="这里放图片路径"
     alt="这里放图片显示不出的时候出现的文字"
     style="zoom:这里写缩放的百分比，比如:30%"/>
<center><p>这里放标题</p></center>

2 封装型

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

代码如下：

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