图片引入&路径问题

在这几日的学习中，发现这两种方式的图片引入有一定的差异，<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