如何在html中插入图片

文章介绍了在HTML中插入图片的方法,包括使用img标签,设置src属性来指定图片路径(绝对路径和相对路径),alt属性提供替代文本,以及title属性为图片添加悬停提示。还讨论了不同类型的图片格式,如JPEG、GIF、PNG和webp的特性。
摘要由CSDN通过智能技术生成

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

如何插入图片?

1.标签名:img

2.属性:

3.图片的类型


前言

学习html中必学的一个知识点,如何插入图片

在学习了如何插入图片后,页面会变的丰富很多

在枯燥的文字中添加了一抹亮色


如何插入图片?

1.标签名:img

2.属性:

              src:输入引入图片的地址

              绝对路径:与当前文件位置无关

                      比如:网址

              相对路径:与当前文件位置有关

                      在同一个文件夹   =>          ./或者将./省略

                      不在同一个文件夹

<img src="../img/图片.png">

              alt:当图片不能正常显示的时候显示alt的内容

<img src="../img/图片.png" alt="显示alt的内容">

              title:鼠标悬停时,title里面内容显示

3.图片的类型

             JPEG(jpg):支持的颜色表较多,图片可以压缩,但是不支持透明=》保存照片等颜色丰富的图片

             GIF:支持颜色较少,支持简单透明和动图=》图片颜色单一或动图

             PNG:支持颜色多,支持复杂透明,但不支持动图=》用来显示颜色复杂的透明图片,多用于网页

             webp:谷歌推出专门用来表示网页的一种格式,具备其他格式的所有优点,文件格式小,但是兼容性不好

             base64:将图片使用base64编码,图片转换成字符,通过字符形式来引入=》需要和网页一起加载的图片才会使用base64

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值