HTML浅析—img标签

基础

首先初识几个概念：

1. 使用img标签来引入外部照片，img标签是一个自结束标签
2. img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
3. 图片的格式：
   jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图
   一般用来显示照片
   gif：支持的颜色比较少，支持简单透明，支持动图
   一般用来显示颜色单一的图片，动图
   png：支持的颜色比较丰富，支持复杂透明，不支持动图
   专为网页而生
   webp：谷歌推出的专门用来表示网页中的图片的一种格式
   它具备其他图片格式的优点，而且文件还比较小
   base64：将图片使用base64进行编码，这样可以将图片转化为字符
   通过字符形式引入图片
   一般都是一些需要和网页一起加载起来的图片才会使用

效果一样，用小的
效果不一样，选效果好的

属性：

1. src： 指定的是外部图片的路径，这个是必须写的，同样的可以是相对路径也可以是绝对路径
2. alt： 对图片的描述，描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，可写可不写
   tip：搜索引擎会根据alt中的内容来识别图片
3. width 图片的宽度（单位是像素）
   height 图片的高度
   两个如果改变一个，另一个也会等比例缩放
   注意：
   一般在pc端不建议修改图片的大小，需要多大裁多大
   但是在移动端，经常需要对图片进行缩放
   我一般都是宽高都设置为100%，即占满整个父元素（内边距不会占据）
4. title：用来告诉浏览器，当鼠标悬停在图片时显示的内容
5. loading ：指示浏览器应当如何加载该图像。
   允许的值：
   eager：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
   lazy：延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。
   6.像很久之前 的align属性，border属性等等都已经被弃用了，上面讲的也是一般用的，记住上面的属性即可。

如有错误请大家多多指教！