相对路径:指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系 ../ 表示上一级目录
举个🌰
在div.html中插入店招.png的图片
我们以 div.html 所在的文件夹 web 去找 店招.png所在位置
<img src="../../images/店招.png">
第一个../ 表示到了html的目录,第二个../到了路径test的目录,然后再往下在找 image/店招.png
比喻成小蝌蚪找妈妈,小蝌蚪(div.html)去找妈妈(店招.png),
1、小蝌蚪(div.html)先穿上web的衣服, web文件夹此为文件所在的路径
2、穿上衣服的小蝌蚪,要先走进html屋子(html文件夹) ../ 到了html文件夹
3、在走到院子里(路径test的目录), ../../ 到了路径test文件夹
4、在走到另一个屋子(images), ../../images到了 image文件夹
5、找到了妈妈 店招.png ../../images/店招.png
再看另一个例子 巩固一下
绝对路径
绝对路径包括以下两种:
(1)以盘符开始的绝对路径。举例:<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">
(2)网络路径。举例:<img src="http://img.smyhvae.com/2016040102.jpg">
相对路径和绝对路径的总结
相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。
问题:我的网页在C盘,图片却在D盘,能不能插入呢?
答案: 用相对路径不能,用绝对路径也不能。
注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。
下面的方法是行的,但是没有任何工程上的意义,这是因为服务器没有盘符,linux系统没有盘符:
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
总结一下:
我们现在无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径。
相对路径,就是../ image/ 这种路径。从自己出发,找到别人;
绝对路径,就是http://开头的路径。
绝对不允许使用file://开头的东西,这个是完全错误的!
img标签的其他属性
width:宽度
height:高度
Align:指图片的水平对齐方式,属性值可以是:left、center、right
title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。
border:给图片加边框(描边),单位是像素,边框的颜色是黑色
Hspace:指图片左右的边距
Vspace:指图片上下的边距
Alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)