图片引入&路径问题

在这几日的学习中,发现这两种方式的图片引入有一定的差异,<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:Inetpubwwwrootsiteslablainfo.html 
假设index.html路径是:c:Inetpubwwwrootsiteslablaindex.html 
在info.html加入index.html超链接的href应该这样写:index.html

2 要引用的文件在下一级文件夹下,文件名前加子文件夹名称 
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html 
假设index.html路径是:c:Inetpubwwwrootsiteslablahtml utorialsindex.html 
在info.html加入index.html超链接的href应该这样写:html/tutorials/index.html

3 要引用的文件在上一级文件夹下,文件名前加../ 
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html 
假设index.html路径是:c:Inetpubwwwrootsitesindex.html 
在info.html加入index.html超链接的代码应该这样写:<a href="../index.html">index.html</a>

举一反三: ../表示源文件所在目录的上一级目录,../../表示源文件所在目录的上上级目录,以此类推。

4 更复杂的情况: 
假设info.html路径是:c:Inetpubwwwrootsiteslablainfo.html 
假设index.html路径是:c:Inetpubwwwrootsiteshtmlindex.html 
在info.html加入index.html超链接的代码应该这样写:<a href="../html/index.html">index.html</a> 

部分转:http://www.cnblogs.com/WhiteM/p/6083012.html

 
原文地址:https://www.cnblogs.com/yanyanstyle/p/11129227.html