编程学习:html图片标签和相对路径以及绝对路径的说明图片标签的介绍场景:在网页中显示图片 代码:<img src=""alt=""> 特点: 单标签img标签需要展示对应的效果,需要借助标签的属性进行设置 标签的完整结构图: 属性注意点: 1、标签的属性写在开始标签内部 2、标签上可以同时存在多个属性 3、属性之间以空格隔开 4、标签名与属性之间必须以空格隔开 5、属性之间没有顺序之分 图片标签的alt属性 属性名:alt 属性值:替换文本 当图片加载失败时,才显示alt的文本 当图片加载成功时,不会显示alt的文本 图片标签的title属性 属性名:title 属性值:提示文本 当鼠标悬停时,才显示的文本 注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签 图片标签的width和height属性 属性名:width和height 属性值:宽度和高度(数字) 注意点:如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形) 如果同时设置了width和height两个,若设置不当此时图片可能会变形 绝对路径绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径 例如: 盘符开头:D:\day01\images1.jpg 完整的网络地址:https://www.baidu.com/favicon.ico 相对路径概念普及 当前文件:当前的html网页 目标文件:要找到的图片 相对路径:从当前文件开始出发找目标文件的过程 相对路径分类1、同级目录:当前文件和目标文件在同一目录中 代码步骤:直接写目标文件的名字即可 方法一 <img src="目标图片.gif"> 方法二 <img src="./目标图片.gif"> 2、下级目录:目标文件在下级目录中 代码步骤 1、先知道在哪个文件夹里面→文件夹名字 2、进入这个文件夹→/ 3、此时看到目标文件直接喊她→直接写目标文件名字 3、上级目录:目标文件在上级目录中 代码步骤: 1、先出当前文件夹,到上一级目录../ 2、此时看到目标文件直接喊她→直接写目标文件 |
|