06-HTML中的图片标签 img

HTML 中的图片标签

1、img标签引入图片

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

​ 属性：

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

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

​ 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

​ width 图片的宽度 (单位是像素)

​ height图片的高度

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

​ 注意：

​ 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大

​ 但是在移动端，经常需要对图片进行缩放（大图缩小）

2、图片的格式

• 图片的格式：

​ jpeg(jpg)

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

​ - 一般用来显示照片

​ gif

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

​ - 颜色单一的图片，动图

​ png

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

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

​ webp

​ - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

​ - 它具备其他图片格式的所有优点，而且文件还特别的小

​ - 缺点：兼容性不好

​ base64

​ - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片

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

​ 效果一样，用小的

​ 效果不一样，用效果好的

 <img src="./img/1.gif" alt="松鼠">

 <img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">