图片标签用于向当前页面中引入一个外部图片
img标签引入外来图片,img标签时一个字节数标签
<img src="" alt="">
img这种元素属于替换元素(基于块元素和行内元素之间,具有两种元素的特点)
显示的是外部引用的资源
资源替换了该标签在页面的显示
属性:
src:指定外部图片的路径(路径规则和超链接一样的)
也可以复制其他网站的图片链接
alt 图片的描述,描述默认情况下不会显示,有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片
如果不写alt属性,图片就不会呗搜索引擎所收录
width 图片的宽度(单位是像素)
heigh 图片的高度
-宽度和高度如果只修改了一个,则另一个会等比例缩放
注意:
一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大,但在移动端,经常对图片进行修改(大图缩小)
1.大图缩小 浪费内存
2.小图放大 像素失帧
图片的格式:
jpeg(jpg)
-支持的颜色比较丰富,不支持透明效果,不支持动图
-一般用来显示照片
gif
-支持颜色比较少,支持简单透明,支持动图
-颜色单一的图片,动图
png
-支持颜色丰富,支持复杂透明,不支持动图
-颜色丰富,复杂透明的图片(专为网页而生)
webp
-是谷歌新推出的专门用来表示网页中的图片的格式,它具备了其他图片格式的所有优点,而且文件还特别的小
-缺点就是兼容性不好
-一般用于火狐、谷歌、移动端
base64
-将图片进行base64编码
-这样可以将图片转换为字符,通过字符的形式来引入图片
-一般都是一些需要和网页一起加载的图片才会使用base64
总结:
效果一样,用小的
效果不一样,用效果好的,同时考虑文件大小