一、课程概述
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标签的内容属性掌握难度较低,需要注意的是图片的路径一定要写对,不然图片将无法显示