1、图片标签 img
1.1、语法和基础
注：
图片必须存放在项目文件夹中，如：images 中
图片只是引入到网页中，本质上没有被插入到网页中
1.2、img 标签的 alt 属性
TIP
<img src="images/logo.png" alt="老六博客Logo" />
1.3、img 标签的 width、height 属性
width、height 属性设置图片宽度和高度，单位是 PX（像素），可不写
如果省略其中一个属性，则表示按原始比例缩放图片
<img src="images/logo.png" alt="老六博客Logo" width="200" />
1.4、图片标签规范
TIP
PC 端 img 图片必须填写 src、width、height、alt 属性，统称图片标签的四要素
移动端必须填写 alt 属性
alt 不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称
2、网页上支持的图片格式
| 支持格式 | 描述 |
|---|---|
.bmp | windows 画图软件默认保存的格式，位图 |
.jpeg（.jpg） | 有损压缩图片，通常用于照片显示 |
.png | 便携式网络图像，用于 logo，背景图形等。支持透明和半透明 |
.gif | 动画 ，如：表情包 |
.svg | 矢量图片 |
.webp | 最新的压缩算法，非常优秀的图片格式 |
3、相对路径和绝对路径
TIP
深入相对路径 和 绝对路径本质
3.1、相对路径
从当前网页出发，要找到图片的路径就叫 相对路径
<img src="images/logo.png" /><img src="../images/logo.png" /><img src="../../images/logo.png" />.....
../表示回退上一级目录
./表示当前目录通过
cmd命名行dir命令可查
3.2、绝对路径
描述文件或文件夹的精准完整地址
<img src="D:\web\icoding-WEB\images\logo.png" /><img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png"/>
还没有评论，来说两句吧...