一、img 标签简介
1.是自结束标签
2.用于向当前页面引入一个 外部图片
3.可以引入 gif 动图
4.img 是 替换元素,具有块元素和行内元素的某些特点
二、img标签基础
0.使用img标签将 图片 引入 网页!
1.代码:
<img src="图片的相对路径/绝对路径/网页链接">
2.示例(图片链接):
3.引用成功:
三、img标签 -> alt属性
1.作用:
1.1 对图片的描述,一般不会显示这个文本。如果图片加载失败,那么有些浏览器就会显示 alt 中的字样,就像这样:
1.2 alt属性能够被搜索引擎识别!所以你搜索“松鼠”的时候,就出现了松鼠的图片
2.代码:
<img src="松鼠的图片地址" alt="松鼠">
四、img标签 -> width属性
1.用来设置图片的宽度
2.示例:我们要将图片的宽度设置成500像素
<img width="500" src="图片地址" alt="图片介绍">
五、img标签 -> height属性
1.用来设置图片的高度
2.示例:我们要将图片的高度设置成1000像素
<img height="1000" src="图片地址" alt="图片介绍">
六、图片格式选择
0.加载速度极快,和网页同时加载:base64
1.透明效果(玻璃、水):png
2.照片:jpg
3.logo:gif
4.效果优、显示好,但是兼容效果差:webp
5.将图片转换成编码:base64
我们可以直接将文本格式的base64文件内容复制进 src 属性中,然后就会直接显示这个图片