HTML 图片标签

图片标签

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

　　使用 <img> 标签来引入外部图片，img标签是一个自结束标签

　　img 属于替换元素（基于行内元素和块元素之间）行内块元素inline-block 图片标签。

属性：

　　【src】：属性指定的是外部图片的路径（路径规则和超链接是一样的）

　　【alt】: 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载出来的时候显示在页面上。搜索引擎会根据alt中的内容来识别图片（搜索松鼠会出现松鼠）

　　【width】：图片的宽度

　　【height】：图片的高度

如果宽度和高度只改变一个，图片会等比例缩小或是放大

建议：在PC端不建议修改图片的大小，大图缩小浪费内存，小图放大图片失真，最好是切图。但是在移动端，经常需要对图片进行缩放（大图缩小）

 img{
       width:200px;
       height:auto;
        }

 

图片引入

可以用相对路径引入一个外部图片

<img src='./img/1.gif' alt=’松鼠‘>

也可以使用绝对路径引入外部图片

<img src='https://www.baidu.com/s?wd=%E9%9B%AA%E5%9C%B0%E6%9D%BE%E9%BC%A0&tn=monline_3_dg&usm=5&ie=utf-8&rsv_cq=%E6%9D%BE%E9%BC%A0&rsv_dl=0_left_pet_multi_6829'>

图片的格式

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

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

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

webp：
    这种图片格式是谷歌新推出的专门用来表示网页中的图片的一种格式
    它具备其他图片格式的所有优点，而且图片还特别的小，显示效果好，透明度也好，还支持动图
    缺点：兼容性不好，尤其是在IE浏览器中

选用规则：  效果一样用文件小的，效果不一样用效果好的
Base64：
    base64编码，还可以将图片使用base64进行编码，将图片转换为字符，通过字符的形式来引入图片
    一般都是一些需要和网页一起加载的图片才会使用base64

  base64在线编码解码工具  https://base64.us/