html常见图片类型、图片链接的使用.

Happy Moment!

已于 2023-12-20 18:34:12 修改

阅读量561

点赞数 9

文章标签：前端 html5 html 开发语言

于 2023-12-11 10:49:11 首次发布

本文链接：https://blog.csdn.net/2301_78753262/article/details/134919921

版权

🥝html常见图片类型、图片链接的使用

🍒1.html常见图片类型有：

🍇(1).jpg格式

概述：是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。

主要特点：支持的颜色丰富，占用空间较小，不支持透明背景，不支持动态图。

使用场景：对图片细节没有极高要求的场景，如：网站的产品宣传图。

🧊(2).png格式

概述：是一种有损的压缩格式，能够更高质量的保存图片。

主要特点：支持的颜色丰富，占用空间略大，支持透明背景，不支持动态图。

使用场景：（1）想让图片有透明背景；（2）想要更高质量的呈现图片；如：logo图，重要配图。

🥭(3).bmp格式

概述：不进行压缩的一种格式，在最大程度上保留图片更多的细节。

主要特点：支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。

使用场景：对图片细节要求极高的场景，如：一些大型游戏中的图片。

🍉(4).gif格式

概述：仅支持256种颜色，色彩呈现不是很完整。

主要特点：支持的颜色较少，支持简单透明背景，支持动态图。

使用场景：网页中的动态图。

🥝2.图片类型、图片链接的使用

下面进行代码演示：
常见普通图片类型的代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片类型以及图片链接的使用</title>
</head>
<body>
<!--常见普通图片类型的代码演示-->
<img src="../imges/index.jpg" height="365" width="550"/>
</body>
</html>

运行效果如下:
在这里插入图片描述

加了超链接以后的代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片类型以及图片链接的使用</title>
</head>
<body>
<!--jpg格式-->
<a href="https://www.baidu.com/">
<img src="../imges/index.jpg" height="365" width="550"/></a>
</body>
</html>

运行效果如下：
点击一下图片跳转页面
跳转前:
在这里插入图片描述跳转后：

🍎3.html链接：

img：标签

src:属性图片源文件所在路径

alt:当图片无法显示时alt中的替换文字会显示在页面中

height：图片的高度

width:图片的宽度

title:定义图片的提示信息

🍋最后🍋

总结不易，希望小宝们不要嫌弃哦!😀