【九月打卡】第13天图片标签相关知识点总结

一、课程概述

1、学习课程名称：前端工程师2022版

2、章节名称：HTML5多媒体与语义化标签第一章至第二章1-1-2-5

（1-1 课程简介-慕课网体系课 (imooc.com)）

3、讲师名称：一阶段老师

二、内容分享

图片标签img

1、使用<img >标签插入图片，首先要先将图片放在images文件夹中，然后在src属性中填入图片路径，不要忘记后缀名；

2、常见属性有：

（1）src：source(来源)图片路径

（2）alt：alternate替代品，图片加载失败后的备用信息，它是对图像的文本描述，不是强制性的，如果由于某种原因无法加载图片，浏览器会在页面上显示alt属性中的备用文本，也可以供视力不方便的朋友使用的网页朗读器朗读alt中的文本

（3）width和height：宽高，单位px，如果省略了width或height中的一个属性，则按原始比例缩放照片

3、网上支持的图片格式：bmp、gif、jpg、png、svg、webp

4、相对路径与绝对路径：

（1）相对路径：从网页出发找到文件的过程../返回上一级，随着网页和图片的位置关系不同，插入图片的代码随之改变

（2）绝对路径：描述图片精准地址，类似偷图，比如以http或者https开头的路径，提供一个准确的网址或者路径，不管网页在哪里，绝对路径不需要改变

（3）其他注意点

'/' :  表示根路径

./ ：标签当前层级（当前文件的路径）

../ ：回退到上一层级

盘符路径：C:UsersadminDesktopprojectsourceing.png

ul地址形式的绝对路径：https://www.baidu.com/index.css.

注意事项：

①项目中，不要使用盘符形式的路径，因为最后文件会上传到服务器中，服务器中的盘符名字与项目中的盘符名字不同，那么会导致文件找不到图片而无法显示

②在练习时尽量少用 '/'根路径形式的路径，因为当项目运行服务器环境下时， '/' （根路径）才能被正常使用。

③windows系统中， 盘符是 '\' ，而 MAC系统中，盘符是 '/'

三、学习心得

img标签的内容属性掌握难度较低，需要注意的是图片的路径一定要写对，不然图片将无法显示