图片标签

Posted 2020-12-20 erickyx

图片标签

图片标签用于向当前页面中引入一个外部图片

使用img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（块元素与行内元素之间，具有两种元素的特点）

属性：src 指得是图片的路径 alt指得是图片的描述，正常情况下不会显示，当有的浏览器不显示的时候，搜索引擎会根据alt的内容来显示图片，不写则不显示

width 图片的宽度（单位px）

height图片的高度

当宽度或者高度只修改任意一属性值时，则另一个会跟着等比缩放

注意：一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁剪多大的

但是在移动端，经常需要对图片进行缩放

 

图片格式

（效果一样用小的，效果不一样用好的）

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片

gif：支持的颜色比较少，支持简单的透明，支持动图，颜色单一

png：支持的颜色比较丰富，支持复杂透明，不支持动图（专为网页而生）

webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其它图片的所有优点，而且文件还特别小

缺点：兼容性不好

<img src="图片路径">
<img src="图片路径" alt="图片描述">
<img width="300" src="图片路径">