Typora_Markdown_图片标题(题注)

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

阳极小甲虫

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

阅读量1.5w

点赞数 45

分类专栏： Typora_使用

本文链接：https://blog.csdn.net/m0_47098916/article/details/117827687

版权

markdown html

Typora_使用专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在Typora中使用Markdown编辑图片时的两种标题添加方法：直接在图片下方添加和封装HTML代码。直接添加方法简单但排版不理想，封装HTML则能实现更美观的贴合效果。通过示例代码展示了如何实现这两种方法，并对比了它们的视觉差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>