▚ 01 原图表示
- 语法为:
![替代文本](图片链接地址)
-
其中,替代文本是在无法显示图片时显示的替代文本,而图片链接是指向图片的URL或相对路径。
-
例如,插入Panda图片:
![panda](https://img-blog.csdnimg.cn/e5f32e4e6ca0489c8ad45d6e17ab6292.png)
- 显示效果:
▚ 02 原图缩放
📢 使用HTML标签和属性改变原图的显示效果,比如调整样式和布局。
- 语法为:
<div align="center">
<img src=图片链接地址 width=scale alt="替代文本">
</div>
- 其中,
-
<div>
:HTML的<div>
标签用于创建一个容器,它可以用来组织和布局其他元素。在这种情况下,<div>
标签被用来将图片和对齐属性包裹在一起。 -
align="center"
:align是<div>
标签的属性之一,用于指定其内容的水平对齐方式。在这里,align="center"将内容居中对齐。 -
<img>
:HTML的<img>
标签用于插入图像。它是自闭合标签,没有结束标签。在这里,<img>
标签被用于插入图片。 -
src
:<img>
标签的属性之一,用于指定图片的URL或相对路径。在这里,src属性指定了图片的URL。 -
width
:<img>
标签的属性之一,用于指定图片的宽度。 -
alt
:<img>
标签的属性之一,用于提供替代文本。如果图片无法加载或显示,替代文本将作为替代内容显示。
- 例如,插入Panda图片,并将其缩放为原图的60%,居中显示,替代文本为Panda:
<div align="center">
<img src=https://img-blog.csdnimg.cn/e5f32e4e6ca0489c8ad45d6e17ab6292.png width=60% alt="Panda">
</div>
- 显示效果: