在这几日的学习中,发现这两种方式的图片引入有一定的差异,<img src="">和url()
前者定义:
<img> 标签的 src 属性是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。
后者定义:
在CSS中有用url语法来指定background-image或是其他引用文件中
区别简言之:
1.前者是写在html中,后者写在css(叠层样式表)中
2.img是图片插入语法 src是源 source 简写 url是地址栏(网络或本地)
3.<img src="'img/ds.png"> 不需要设置宽高
background-image:url('img/ds.png'); 因为是作为背景,所以需要设置宽高,才可以显示出来
4.引用路径详解
绝对路径:
· /
:代表根目录,绝对路径。如:<ahref="/abc">
文本</a>
或<img src="/abc" />
· D:/abc/
:代表根目录,绝对路径。
相对路径:
· .
:代表目前所在的目录,相对路径。如:<ahref="./abc">
文本</a>
或<img src="./abc" />
· ..
:代表上一层目录,相对路径。如:<ahref="../abc">
文本</a>
或<img src="../abc" />
· ../../
:代表的是上一层目录的上一层目录,相对路径。如:<imgsrc="../../abc" />
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
1 两个文件在同一个文件夹下,直接写文件名即可
假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的href应该这样写:index.html
2 要引用的文件在下一级文件夹下,文件名前加子文件夹名称
假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的href应该这样写:html/tutorials/index.html
3 要引用的文件在上一级文件夹下,文件名前加../
假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写:<a href="../index.html">index.html</a>
举一反三: ../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。
4 更复杂的情况:
假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是:c:\Inetpub\wwwroot\sites\html\index.html
在info.html加入index.html超链接的代码应该这样写:<a href="../html/index.html">index.html</a>
部分转:http://www.cnblogs.com/WhiteM/p/6083012.html