图片链接

基础

• ＜img>标签用来在网页中插入图片
• 一定注意，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中
• 图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传

<p><img src="images/beijing/1.jpg" alt="鸟巢"></p>

alt 属性

• alt 属性是alternate “替代品”的缩写，它是对图像的文本描述，不是强制性的
• 如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本
• 供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本

width,height属性

• width. height属性分別没置充度和高度，単位是像素，但是不需要写单位
• 如果省略其中一个属性，则表示按原始比例缩放图片

支持格式

格式	说明
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动画（比如表情包）
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于10g0、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法非常优秀的图片格式

路径

相对路径

• 相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了〞
• 随着网页和图片的位置关系不同，插入图片的代码随之改变
• 如果需要回退层级，使用“../”这样的写法

<img src="images/beijing/1.jpg">

绝对路径

• 绝对路径：描述图片精准地址。比如“北京市海淀区西三环北路甲2号院中关村国防科技园2号楼〞
• 不管网页在哪里 ，绝对路径不需要改变

<img src="https://www.imooc.com/static/img/index/logo2020.png" alt="">