HTML图片标签详解

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

    img标签引入外来图片，img标签时一个字节数标签

<img src="" alt="">

    img这种元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）

    显示的是外部引用的资源

    资源替换了该标签在页面的显示

    属性：

        src：指定外部图片的路径(路径规则和超链接一样的)

             也可以复制其他网站的图片链接

        alt 图片的描述，描述默认情况下不会显示，有些浏览器会在图片无法加载时显示

            搜索引擎会根据alt中的内容来识别图片

            如果不写alt属性，图片就不会呗搜索引擎所收录

        width 图片的宽度（单位是像素）

        heigh 图片的高度

            -宽度和高度如果只修改了一个，则另一个会等比例缩放

        注意：

        一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但在移动端，经常对图片进行修改（大图缩小）

        1.大图缩小 浪费内存

        2.小图放大 像素失帧

        图片的格式：

        jpeg（jpg）

              -支持的颜色比较丰富，不支持透明效果，不支持动图

              -一般用来显示照片

        gif

              -支持颜色比较少，支持简单透明，支持动图

              -颜色单一的图片，动图

        png

              -支持颜色丰富，支持复杂透明，不支持动图

              -颜色丰富，复杂透明的图片（专为网页而生）

        webp

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

              -缺点就是兼容性不好

              -一般用于火狐、谷歌、移动端

        base64

              -将图片进行base64编码

              -这样可以将图片转换为字符，通过字符的形式来引入图片

              -一般都是一些需要和网页一起加载的图片才会使用base64

         总结：

        效果一样，用小的

        效果不一样，用效果好的，同时考虑文件大小