Web前端开发技术第四周周四课堂笔记

Posted on 2026-03-26 16:40  福寿桃呐  阅读(16)  评论(0)    收藏  举报

插入图片

常用的图像格式

GIF格式

GIF(Graphics Interchange Format,图形交换格式)是一种历史悠久的无损压缩位图格式,以支持动画和透明背景而闻名。GIF 最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失。再加上GIF支持透明(全透明或全不透明),因此很适合在互联网上使用。

PNG格式

PNG(Portable Network Graphics,便携式网络图形)是一种无损压缩的位图图像格式,专为互联网传输设计。

JPG格式

JPG(全称 Joint Photographic Experts Group,联合图像专家小组)是目前互联网和数字设备中应用最广泛的有损压缩图像格式。

最新的两种图像格式

SVG格式:同样的文件要毕JPEG和PNG格式小的多。
WEBP格式:可以使在图片文件更小时,拥有极高的图像质量。
代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
	</head>
	<body>
		<img src="img/23-螃蟹.png" />
	</body>
</html>

插入图片的格式

将图片保存到本地地址,在img文件中用

方法一:
<img src="img/23-螃蟹.png" />
方法二:
<img src="https://www-file.huawei.com/admin/asset/v1/pro/view/533cf2a5c0ab478fb021786fe8ec5593.png" />
方法三:

复制SVG代码即可

补充:

alt—当图片不能正常显示时,替换的文字,方便爬虫去捕获页面信息。

title—鼠标悬停到图片上显示的文字。

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3