图片的相对路径与绝对路径
相对路径和绝对路径的详讲！！！
相对路径和绝对路径的详讲1.绝对路径绝对路径：绝对：真真地存在你电脑上的实际路径。
⽐如你的window系统的C盘下有个ABC⽂件夹，ABC⽂件夹下有个file⽂件。
那么绝对路径：C:\ABC\file2.使⽤绝对路径的缺点事实上，在编程时，很少会使⽤绝对路径，⽐如你在Window系统上写了个XX系统，需要使⽤“E:\book\⽹页布局\1.jpg”来指定背景图⽚的位置，在⾃⼰的计算机上使⽤绝对路径浏览可能会⼀切正常，但是将系统代码⽂件和背景图⽂件上传到Web服务器(常常是Linux系统，可能不存在C,D,E盘)上部署系统时浏览就很有可能不会显⽰图⽚了。
因为上传到Web服务器上时，可能整个系统并没有放在Web服务器的E盘，有可能是D盘或H盘。
甚⾄可能web服务器根本就没有E盘，即使放在Web服务器的E盘⾥，Web服务器的E盘⾥也不⼀定会存在“E:\book\⽹页布局\1.jpg”这个⽬录，因此在浏览⽹页时会找不到该背景图，然后不会显⽰图⽚。
3.相对路径为了避免这种情况的发⽣，通常在⽹页系统上指定⽂件时，都会选择使⽤相对路径。
所谓相对路径，就是相对于⾃⼰的⽬标⽂件位置。
例如上⾯的例⼦，XX系统⾥引⽤了“1.jpg”图⽚，我们上传系统代码时，将XX系统代码和1.jpg放在同⼀个⽂件夹上传到web服务器，由于“1.jpg”图⽚相对于XX系统代码⽂件来说，是在同⼀个⽬录的，那么要在XX系统的代码⽂件⾥使⽤该1.jpg图后，只要这两个⽂件的相对位置没有变(也就是说还是在同⼀个⽬录内)，那么⽆论上传到Web服务器的哪个位置，在浏览器⾥都能正确地显⽰图⽚。
这⾥XX系统需要使⽤1.jpg时⽤的相对路径就为： background = " 1.jpg " 即可再举⼀个例⼦，假设某个系统的“index..html”⽂件所在⽬录为“E:\book\⽹页布局\”，⽽“bg.jpg”图⽚所在⽬录为“E:\book\⽹页布局\img下”，那么“bg.jpg”图⽚相对于“index.html”⽂件来说，是在其所在⽬录的“img”⼦⽬录⾥，则引⽤图⽚的语句应该为：<body background="img/bg.jpg">注意：相对路径使⽤“/”字符作为⽬录的分隔字符，⽽绝对路径可以使⽤“\”或“/”字符作为⽬录的分隔字符。
相对路径和绝对路径的区别
相对路径和绝对路径的区别绝对路径指对站点的根目录而言某文件的位置，相对路径指以当前文件所处目录而言某文件的位置相对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。
因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
绝对路径-以Web站点根目录为参考基础的目录路径。
之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。
由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
以下为建立路径所使用的几个特殊符号，及其所代表的意义。
"."--代表目前所在的目录。
".."--代表上一层目录。
"/"--代表根目录。
接下来，我们假设读者所建立的Web站点拥有如下图所示目录路径。
假若要在Ref.htm文件中引用BeRef.gif文件时，其相对路径如下：./SubDir2/BeRef.gif上面的引用路径中，"."代表目前的目录(Dir1)，所以"./SubDir2"代表目前目录下的SubDir2。
其实，也可以省略"./"直接用下这个方式引用。
SubDir2/BeRef.gif若使用绝对路径以根目录为参考点引用该文件时，引用路径如下：/Dir1/SubDir2/BeRef.gif如果Web站点的目录之结构如下图时引用BeRef.gif文件的相对路径又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件时其相对路径如下：../SubDir2/BeRef.gif上面的引用路径中，".."代表上一层目录，所以，/Dir2"代表上一层目录下的Dir2子目录。
若使用绝对路径引用时，则引用路径如下：/Dir2/BeRer.gif我们再举一个比较复杂的例子，来比较一下相对路径与绝对路径的使用。
文件的绝对路径与相对路径
⽂件的绝对路径与相对路径⽤DW写HTML的时候，可以直接选择到具体⽂件的路径，现在改⽤了webstorm，只能选择到与HTML⽂件同⼀⽬录下的⽂件。
就此整理⼀下⽂件的绝对路径与相对路径的区别。
1.绝对路径先说在本地计算机上，⽂件的绝对路径当然是指：⽂件在硬盘上真正存在的路径。
例如这个路径：D:/wamp/www/img/icon.jpg告诉我们icon.jpg⽂件是在D盘的wamp⽬录下的img⼦⽬录中。
我们不需要知道其他任何信息就可以根据绝对路径判断出⽂件的位置。
注意：有时候编好的页⾯，在⾃⼰的计算机上浏览⼀切正常，但是上传到Web服务器上浏览就很有可能不会显⽰图⽚了。
因为静态HTML页⾯需要上传到⽹站，⽽在⽹站的应⽤中，通常我们使⽤"/"来表⽰根⽬录，/img/icon.jpg就表⽰photo.jpg⽂件在这个⽹站的根⽬录上的img⽬录⾥。
但是要知道，这⾥所指的根⽬录并不是你的⽹站的根⽬录，⽽是你的⽹站所在的Web服务器的根⽬录。
因为上传到Web服务器上时，可能整个⽹站并没有放在Web服务器的D盘，有可能是F盘或H盘。
即使放在Web服务器的D盘⾥，Web服务器的E盘⾥也不⼀定会存在“D:/wamp/www/img”这个⽬录，因此在浏览⽹页时是不会显⽰图⽚的。
这也是应⽤绝对路径的风险。
2.相对路径相对路径，顾名思义就是⾃⼰相对与⽬标位置。
假设你要引⼊⽂件的页⾯名称为test.htm，它存在叫www的⽂件夹⾥（绝对路径D:/wamp/www/test.htm），那么引⽤同时存在www⽂件夹⾥的“icon.jpg”⽂件（绝对路径D:/wamp/www/icon.jpg），同⼀⽬录下相对路径icon.jpg；如果⽂件“icon.jpg”存在img⽂⽂件夹中（绝对路径D:/wamp/www/img/icon.jpg），那么相对路径img/icon.jpg。
相对路径可以避免上述根⽬录不同的问题。
几种URL地址格式的优缺点介绍
几种URL地址格式的优缺点介绍
URL（Uniform Resource Locator）是统一资源定位符的英文缩写，是互联网上用于标识和定位资源的一种方式。
URL地址格式的不同对于网站的访问和使用体验都有一定的影响。
下面将介绍几种常见的URL地址格式及其优缺点。
1. 绝对路径URL（Absolute Path URL）
2. 相对路径URL（Relative Path URL）
相对路径URL是指相对于当前资源所在位置的URL地址。
例如，在当前页面中引用同一目录下的图片可以使用"image.jpg"的相对路径URL。
相对路径URL的优点是简洁易懂，与当前页面关联紧密，方便网页的移植和兼容性。
缺点是对于资源的引用必须保证其位置与引用资源所在的相对关系始终没有发生变化，否则可能导致资源引用失败或错误展示。
3. 虚拟路径URL（Virtual Path URL）
4. SEO友好的URL（Search Engine Optimization friendly URL）
5. 短链接URL（Shortened URL）
综上所述，不同的URL地址格式有各自的优缺点。
在选择URL地址格式时，需要根据具体需求和场景综合考虑，并确保URL地址的准确、安全和易用性。
html img src 带盘符的绝对路径
主题：使用HTML编写图片标签时，如何使用带盘符的绝对路径?内容：1. 介绍HTML的img标签HTML的img标签是用于在网页中显示图片的标签，通过在img标签中指定图片的路径，可以在网页中展示图片。
2. 相对路径和绝对路径在使用img标签时，可以使用相对路径或绝对路径来指定图片的位置。
相对路径是相对于当前HTML文件的路径来指定图片所在位置的路径，而绝对路径则是指定图片的完整路径。
3. 带盘符的绝对路径带盘符的绝对路径是指图片所在位置的完整路径，包括盘符信息。
在Windows系统中，带盘符的绝对路径通常以盘符开头，例如C:\images\photo.jpg。
4. 在HTML中使用带盘符的绝对路径在HTML中使用带盘符的绝对路径时，需要注意以下几点：- 在img标签的src属性中指定完整的带盘符路径。
- 使用正斜杠（/）或双反斜杠（\\）来连接文件夹和文件名称。
- 将盘符后的路径视作相对路径，从根目录开始计算。
5. 示例假设图片photo.jpg位于D盘的images文件夹中，那么在HTML中使用带盘符的绝对路径可以这样写：```<img src="file:///D:/images/photo.jpg" alt="photo">```6. 注意事项在使用带盘符的绝对路径时，需要注意以下几点：- 由于安全原因，通常在web上使用带盘符的绝对路径会受到限制，因此推荐使用相对路径或将图片上传至服务器再引用。
- 不同操作系统下文件路径的表示方式可能有所不同，需要注意兼容性。
- 在引用外部资源时，需要确保资源的可访问性和合法性。
7. 总结使用HTML的img标签来展示图片是网页设计中常见的操作，而在指定图片路径时，会涉及到相对路径和绝对路径的使用。
带盘符的绝对路径是指图片位置的完整路径，可以在HTML中使用，但需要注意安全性和兼容性等问题。
结尾：希望通过本文的介绍，读者对HTML中使用带盘符的绝对路径来引用图片有了更清晰的了解，能够在实际的网页制作中更加灵活和准确地使用图片路径。
相对路径和绝对路径
相对路径和绝对路径
相对路径和绝对路径是指定位置时常使用的两种路径形式。
相对路径是以当前文件夹为参照，表示文件在当前文件夹所处的结构位置。
它指定的
是文件相对于当前文件夹的路径，一般通过记录文件夹进入和移出的操作来表示。
相对路
径中的每一个结构位置都是以"."来分割，如果楞是指定当前文件夹的路径，则用"./"表示；如果是指定上一级文件夹的路径，则用"../"表示；如果是指定当前文件夹下的子文
件夹的路径，则只用子文件夹的文件夹名即可。
绝对路径是不受当前位置条件限制，指出了文件所在的确切位置，一般是以磁盘为根，从根开始逐渐到达文件所在的文件夹位置。
比如Windows系统文件夹路径表示方式为：磁
盘盘符:\文件夹1\文件夹2\文件3.txt，Linux系统文件夹路径表示方式为：/文件夹1/
文件夹2/文件3.txt。
绝对路径相对于相对路径，它不但包含文件夹的名称，还包含了根
开始的所有路径结构，一定能够准确地定位文件的位置，但是也因此显得冗长，使用上不
如相对路径灵活。
简述相对路径和绝对路径
简述相对路径和绝对路径相对路径和绝对路径是在计算机领域中常用的两个概念，用于表示文件或目录在文件系统中的位置。
它们在文件系统中起到定位和引用文件的作用。
下面将对相对路径和绝对路径进行简要的介绍和比较。
一、相对路径相对路径是指文件或目录相对于当前工作目录的路径。
它不包含完整的路径信息，而是通过指定文件或目录与当前位置之间的关系来定位。
相对路径的起点是当前工作目录，也就是用户当前所在的目录。
相对路径的特点是简洁、灵活，但是在不同的工作目录下可能会引起歧义。
相对路径通常使用"."和".."来表示当前目录和上一级目录。
例如，如果当前目录是“/home/user”，要引用该目录下的文件“file.txt”，可以使用相对路径“./file.txt”来表示。
同样，如果要引用上一级目录下的文件“file.txt”，可以使用相对路径“../file.txt”。
二、绝对路径绝对路径是指文件或目录在文件系统中的完整路径。
它包含从根目录到目标文件或目录的所有路径信息，可以唯一地定位文件或目录。
绝对路径的特点是明确、确定，不会引起歧义。
绝对路径通常以根目录（如“/”）作为起点，逐级指定目录名称，直到定位到目标文件或目录。
例如，要引用根目录下的文件“file.txt”，可以使用绝对路径“/file.txt”来表示。
同样，要引用根目录下的子目录“dir”中的文件“file.txt”，可以使用绝对路径“/dir/file.txt”。
三、相对路径与绝对路径的比较1. 简洁性：相对路径相对于当前工作目录，使用相对路径可以更简洁地表示文件或目录的位置。
而绝对路径需要指定完整的路径信息，相对路径更加简单明了。
2. 灵活性：相对路径可以根据当前工作目录的不同，灵活地引用文件或目录。
而绝对路径不受当前工作目录的限制，可以在任何位置引用文件或目录。
3. 歧义性：相对路径在不同的工作目录下可能会引起歧义，特别是当文件或目录名称相同的情况下。
html中绝对路径和相对路径的区别？比较相对路径和绝对路径的优缺点
html中绝对路径和相对路径的区别？⽐较相对路径和绝对路径的优缺点绝对路径和相对路径的区别？1. 绝对路径：就是你的⽂件或⽬录在硬盘上的真正的路径例如“bg.jpg”这个图⽚是存放在硬盘的“E:\img”⽬录下，那么 “bg.jpg”这个图⽚的绝对路径就是“E:\img\bg.jpg"2. 相对路径：顾名思义，相对路径就是相对于当前⽂件的路径。
⽹页中⼀般表⽰路径都⽤这个⽅法，例如在“s1.html” ⽂件⾥引⽤了“bg.jpg”图⽚，由于“bg.jpg”图⽚相对于“s1.html”来说，是在同⼀个⽬录下的，那么要在“s1.html”⽂件⾥使⽤以下代码后，只要这两个⽂件的相对位置没有变(也就是说还是在同⼀个⽬录内)，那么⽆论上传到Web服务器的哪个位置，在浏览器⾥都能正确地显⽰图⽚。
再举⼀个例⼦，假设“s1.html”⽂件所在⽬录为“E:\html”下⾯，⽽“bg.jpg”图⽚所在⽬录为“E:\html\img”，那么“bg.jpg”图⽚相对于“s1.html”⽂件来说，是在其所在⽬录的“img”⼦⽬录⾥，则引⽤图⽚的路径应该为：img/bg.jpg⽐较相对路径和绝对路径的优缺点（1）绝对路径的优点①如果有⼈将你的⽹页保存到另外⼀台电脑中，⾥⾯的链接、图⽚、css、以及js仍然会链接到你电脑的路径，这个时候就⽆法找到该资源，加载不出来，这样就可以防⽌被抄袭②如果⽹页位置改变，⾥⾯的链接还是指向正确的URL（2）绝对路径的缺点①在编码编写时不⽅便使⽤绝对路径，因为链接应该指向真正的域名，⽽不是开发站点相对路径的优缺点和绝对路径的优缺点⼏乎相反（3）相对路径的优点①容易移动内容，可以整个⽬录移动②测试⽅法⽐较灵活，本机测试时⽐较⽅便（4）相对路径的缺点①部分内容页⾯换了位置时，链接容易失败②容易被⼈⼤⾯积采集抄袭。
简述相对路径、绝对路径
简述相对路径、绝对路径相对路径与绝对路径相对路径和绝对路径是计算机中常用的两种路径表示方式，用于指定文件或目录的位置。
它们在文件系统中起着非常重要的作用，能够帮助我们准确地定位文件的位置。
下面将详细介绍相对路径和绝对路径的概念、用法和区别。
一、相对路径相对路径是相对于当前工作目录或当前文件的路径。
它不是一个完整的路径，而是从当前位置出发，通过一系列相对的位置关系来指定目标文件的位置。
1.1 相对路径的表示方式相对路径的表示方式有两种常见的形式：一种是使用"./"表示当前目录，另一种是直接使用文件或目录的名称。
使用"./"表示当前目录，例如："./file.txt"表示当前目录下的file.txt文件；"./dir/file.txt"表示当前目录下的dir文件夹中的file.txt文件。
直接使用文件或目录的名称，例如："file.txt"表示当前目录下的file.txt文件；"dir/file.txt"表示当前目录下的dir文件夹中的file.txt文件。
1.2 相对路径的使用场景相对路径通常适用于在当前工作目录下进行文件操作的情况。
例如，在命令行中使用相对路径指定要打开的文件，或者在代码中使用相对路径读取文件。
1.3 相对路径的优点和缺点相对路径的优点是简洁，不需要指定完整的路径信息，只需要指定与当前位置的相对关系即可。
它的缺点是不够具体，可能存在歧义，特别是在多层嵌套的文件结构中。
二、绝对路径绝对路径是从根目录开始的完整路径，可以准确地指定文件或目录的位置。
2.1 绝对路径的表示方式绝对路径通常以根目录（如C:\、/）作为起点，通过一系列目录的名称来指定目标文件的位置。
在Windows系统中，绝对路径通常以盘符开头，例如："C:\Users\username\file.txt"表示C盘中Users文件夹下的username文件夹中的file.txt文件。
相对路径和绝对路径的使用场景
相对路径和绝对路径的使用场景相对路径适用于以下情况：1. 当文件或目录与当前工作目录位于同一目录下时，可以使用相对路径来定位它们。
例如，如果当前工作目录是“C:\Users\John”，而文件“test.txt”位于同一目录下，则可以使用相对路径“test.txt”来引用该文件。
2. 当需要在同一层级的目录中定位文件或目录时，相对路径也是很方便的。
例如，如果当前工作目录是“C:\Users\John\Documents”，而文件“notes.txt”位于同一层级的目录“C:\Users\John\Pictures”下，则可以使用相对路径“..\Pictures\notes.txt”来引用该文件。
3.使用相对路径可以更方便地移植代码或项目，因为相对路径不依赖于特定的根目录，而是相对于当前工作目录。
绝对路径适用于以下情况：1.当需要精确地定位文件或目录的位置时，绝对路径是必需的。
绝对路径提供了完整的路径从根目录开始，可以准确地定位文件或目录的位置，不受当前工作目录的影响。
2.在编程中，当需要在不同的操作系统或环境中使用相同的路径时，绝对路径是最可靠的选择。
因为绝对路径不依赖于当前工作目录，而是从根目录开始，所以可以在不同的系统中使用相同的路径。
3.当需要引用特定的系统文件或目录时，绝对路径是必要的。
例如，如果需要引用操作系统的核心文件或系统目录，必须使用绝对路径。
在实际应用中，相对路径和绝对路径可以根据具体需求和情况灵活使用。
相对路径通常用于项目开发中，让代码更加可移植和可维护。
绝对路径通常用于系统级的操作或在不同的平台间共享路径。
其中，相对路径依赖于当前工作目录，而绝对路径始终从根目录开始，提供了更高的精确度和可靠性。
总结起来，相对路径是相对于当前工作目录的位置，适用于定位同一目录或同一层级中的文件或目录，以及移植性强的场景。
而绝对路径从根目录开始，提供了精确和可靠的定位方式，适用于需要精确定位、跨平台或引用系统文件的场景。
（转）WPF中Image控件Source属性的相对路径和绝对路径问题（经验总结）
（转）WPF中Image控件Source属性的相对路径和绝对路径问题（经验总结）WPF中Images控件路径问题在WPF当中，我们经常⽤到Image控件来展⽰图⽚。
Image控件通过Source属性来控制要现实的图⽚。
前台Xaml修改Source。
通过前台Xaml代码为Image指定Source属性时可以是图⽚的相对路径也可以是图⽚的绝对路径。
绝对路径没有问题，但是如果指定的时图⽚的相对路径，我们必须保证图⽚已经包含在当前项⽬当中，并且图⽚的属性“⽣成操作”必须是Resource才可以在程序运⾏时正常显⽰图⽚，如果图⽚仅仅是在项⽬中的⽂件夹下⽽没有包含在项⽬当中，我们指定其为Image控件的Source属性时在Visual Studio的Xaml页⾯预览当中可以看到图⽚，但是在程序运⾏时图⽚是不显⽰的。
需要主要的是但我们在Xaml代码当红直接修改Image的Source属性时经常会有延迟或者类似缓存效应，有时修改了Image的 Source可能不会马上看到效果。
后台C#修改Source。
在实际的开发过程当中，我们经常需要通过后台的C#动态的为Image空间指定Source来显⽰想要展⽰的图⽚。
我们在C#当中通常以Image_Test.Source=new BitmapImage(new Uri(“图⽚路径”,UriKind. RelativeOrAbsolute))的⽅式来为Image控件指定Source 属性。
在C#当中为Image空间指定Source属性时图⽚路径可以是相对路径也可以绝对路径。
相对路径要求⽐较严格，C#中指定Source时图⽚的“⽣成操作”属性必须是“Resource”，与在Xaml当中⼀样。
在需要固定的⼀些项⽬中的图⽚切换时我们可以通过这种⽅式完成。
绝对路径是没有问题的，不需要图⽚⽂件包含在项⽬当中。
直接在实例化Uri时指定图⽚的绝对路径就OK啦。
绝对路径书写起来⽐较⿇烦，我们不可能⼿写图⽚的绝对路径，⽽且当我们的程序移动到了其他位置时⼿写的绝对路径就不再有效啦。
相对路径和绝对路径的写法
相对路径和绝对路径的写法咱来聊聊相对路径和绝对路径的写法吧。
先说说绝对路径。
绝对路径就像是给一个地方写一个特别详细、精确的地址，从最顶层开始，一直到具体的位置。
比如说在电脑里，如果你用的是Windows系统，那绝对路径可能就像这样：C:\Users\你的用户名\Documents\某个文件。
这个路径把文件在电脑磁盘里的具体位置说得清清楚楚，从C盘开始，然后到用户文件夹，再到文档文件夹，最后到那个特定的文件。
就好像你要给一个从来没到过你家的人描述你家在哪，你从城市开始说，然后是街道、小区、楼号、门牌号一样。
在网站上也有绝对路径，比如说一个网页的绝对路径可能是https://www.某个网站.com/具体的文件夹/具体的页面.html。
这个路径不管你从哪里出发，都能准确无误地找到这个网页。
不过绝对路径也有个小麻烦，就是如果你的文件或者网页的位置变了，那这个路径可能就不管用了，就像你家搬家了，但是你给别人的还是老地址，人家就找不到你了。
再说说相对路径。
相对路径就比较灵活了，它是相对于当前位置来描述路径的。
想象你在一个大房子里，你要告诉别人某个房间在哪。
如果你在客厅，你可以说从客厅往左边走第二个房间就是，而不需要说这个房子在哪个城市、哪条街道。
在电脑里也是这样，假如你有一个文件在当前文件夹的子文件夹里，那相对路径可能就是子文件夹名\文件。
如果是在网页里，相对路径就更方便了。
如果一个图片和一个网页在同一个文件夹里，那在网页代码里引用这个图片的时候，可能就直接写图片名加上扩展名就可以了。
相对路径的好处就是如果整个文件夹结构移动了，只要它们之间的相对位置没有变，那这个路径还是有效的。
在实际使用的时候，选择用绝对路径还是相对路径得看情况。
如果你要确保不管在什么情况下都能准确找到某个东西，而且这个东西的位置不太会变，那绝对路径可能比较合适。
但是如果你的文件或者资源之间的位置关系比较固定，而且可能会经常一起移动，那相对路径就更方便了。
hbuilder绝对路径和相对路径
hbuilder绝对路径和相对路径HBuilder是一款非常优秀的前端开发工具，它支持绝对路径和相对路径两种方式来引用文件。
在实际开发中，我们需要根据具体情况来选择使用哪种方式。
我们来了解一下什么是绝对路径和相对路径。
绝对路径是指从根目录开始的完整路径，例如：/Users/username/Documents/index.html。
而相对路径是指相对于当前文件所在目录的路径，例如：./images/logo.png。
使用绝对路径的优点是可以确保文件的准确性，因为它不受当前文件所在目录的影响。
但是，它的缺点是路径过长，不方便维护。
而使用相对路径的优点是路径相对简短，易于维护，但是它的缺点是容易受到当前文件所在目录的影响，如果文件结构发生变化，可能会导致引用文件失败。
在实际开发中，我们需要根据具体情况来选择使用哪种方式。
如果我们需要引用的文件在项目中不会发生变化，我们可以使用绝对路径。
例如，我们在开发一个网站时，网站的logo图片一般不会发生变化，我们可以使用绝对路径来引用它。
而如果我们需要引用的文件可能会发生变化，我们就需要使用相对路径。
例如，我们在开发一个博客网站时，每篇文章的图片可能会不同，我们就需要使用相对路径来引用它们。
除了绝对路径和相对路径，HBuilder还支持使用根路径和别名路径来引用文件。
根路径是指从项目根目录开始的路径，例如：/images/logo.png。
而别名路径是指在项目配置中设置的路径别名，例如：@images/logo.png。
在使用HBuilder开发项目时，我们需要根据具体情况来选择使用哪种路径方式来引用文件。
只有选择合适的路径方式，才能确保项目的正常运行。
简述绝对路径、相对路径的含义
简述绝对路径、相对路径的含义绝对路径和相对路径都是用于描述文件或目录在计算机文件系统中的位置。
绝对路径是一个完整的路径，包含了从根目录开始的所有目录层级。
在Windows系统中，根目录通常用盘符（例如C:）来表示，而在Unix和Linux系统中，根目录用斜杠（/）来表示。
绝对路径可以从文件系统的任何位置开始，可以准确地指定一个文件或目录的位置。
相对路径是相对于当前工作目录或其他参考点的路径。
相对路径只需要提供距离参考点的位置，而不需要提供完整的路径。
相对路径分为以下几种类型：1.当前目录（.）：表示当前工作目录的路径，通常用于文件系统或命令行操作时，引用与当前目录相同路径的文件或目录。
2.父目录（..）：表示当前工作目录的父目录的路径，用于引用与当前目录的父目录相同路径的文件或目录。
3.子目录：指定到当前目录的某个子目录的路径，用于引用当前目录下的子目录中的文件或目录。
4.其他目录：如果要引用与当前目录在不同目录层级的文件或目录，可以使用其他目录的路径。
绝对路径和相对路径的选择取决于需要引用的文件或目录的特定情况和使用场景。
在某些情况下，使用绝对路径可以更为确切地指定文件或目录的位置。
例如，在需要精确查找或引用某个文件时，使用绝对路径可以避免路径的歧义。
绝对路径可以提供完整的路径信息，无论当前工作目录在哪个位置，始终能够准确引用到文件或目录。
相对路径则更适用于文件或目录之间的相对位置关系。
相对路径提供了一种相对于当前工作目录或其他参考点的方式来引用文件或目录。
相对路径更加便于移植和共享，因为它们不依赖于特定的根目录或绝对路径，可以根据不同的环境进行适应。
相对路径的使用也更具灵活性。
例如，在一个大型项目中，各个文件和目录之间的关系可能是动态变化的，此时使用相对路径可以减少代码或文件的修改，因为相对路径可以自动适应当前的工作目录。
而如果使用绝对路径，当文件或目录的位置发生变化时，需要手动修改路径，这可能会导致很多麻烦。
相对路径和绝对路径的表示方法
相对路径和绝对路径的表示方法
相对路径和绝对路径是指使用特定的语言用来指明文件或目录的从属
关系的一种表达方式。
它们分别表示了不同的路径，在计算机定位文
件要求中扮演着重要的角色。
本文将对这两者的表达方式做一个简要
介绍。
一、相对路径
相对路径是相对于某个当前工作目录（CWD）（假设根目录为\）或者
包含此路径指定文件（比如脚本文件）的路径给出，也有可能指向当
前目录本身，在Linux中可以使用“.”来表示一个相对路径，其表达方
式如下：
1. 父路径：“..”
2. 此路径：“.”
3. 无路径：“/”
4. 向上一层父路径：“../”
5. 向下一层子路径：“./”
二、绝对路径
绝对路径表达了一个未知或已知文件位置的完整路径，也叫做全路径，
以根目录“/”开头，它在任何情境下总是指向同一个位置，从而给出了文件的完整位置。
它的表达方式如下：
1. 绝对路径：“/home/userName/test/test.txt”
2. 从根目录到自身文件夹的完整路径：“home/userName/test”
3. 绝对路径的相对路径形式：“../userName/test/test.txt”
综上所述，相对路径和绝对路径是不同的表达方式，它们分别是基于当前目录以及根目录，给出文件在计算机内部完整位置的表达机制，被广泛应用于各类文件路径定位中。
react中img优雅的路径写法
随着前端开发的不断发展，React 已经成为了开发者们最喜欢使用的JavaScript 框架之一。
在 React 中，如何优雅地处理图片路径是开发者们经常遇到的问题之一。
今天，我们就来深入探讨一下在 React 中img 优雅的路径写法。
1. 路径写法的选择在 React 中，我们通常有三种方式来指定图片的路径：相对路径、绝对路径和引用路径。
相对路径是相对于当前文件的路径，而绝对路径是从根目录开始的完整路径。
引用路径则是通过引用模块来实现的，需要在 webpack 的配置中进行相关设置。
2. 使用相对路径在 React 中，使用相对路径是最常见的方式之一。
我们可以直接在img 标签的 src 属性中引入图片，例如：```jsximport React from 'react';import logo from './logo.png';function App() {return (<div><img src={logo} alt="Logo" /></div>);}export default App;```在这个例子中，我们将图片logo.png 放在了当前文件的同级目录下，使用相对路径来引入图片。
这种方式简洁明了，适合一些小型项目或者图片较少的情况。
3. 使用绝对路径当项目比较庞大，图片文件分布在不同目录下时，使用绝对路径可能更为方便。
我们可以使用完整的 URL 路径来引入图片，例如：```jsximport React from 'react';function App() {return (<div><img src="" alt="Logo" /></div>);export default App;```这种方式适合于从 CDN 或者其他服务器上获取图片的情况。
图片路径问题
图⽚路径问题在写图⽚的路径时，有两种写法：相对路径、绝对路径写法⼀：图⽚的相对路径相对当前页⾯所在的路径。
两个标记 . 和 .. 分表代表当前⽬录和上⼀层⽬录。
举例1：<!-- 当前⽬录中的图⽚ --><img src="2.jpg"><img src=".\2.jpg"><!-- 上⼀级⽬录中的图⽚ --><img src="..\2.jpg">相对路径不会出现这种情况：aaa/../bbb/1.jpg../要么不写，要么就写在开头。
举例2：<img src="images/1.jpg">写法⼆：图⽚的绝对路径绝对路径包括以下两种：（1）以盘符开始的绝对路径。
举例：<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">（2）⽹络路径。
举例：<img src="/20200122_200901.png">相对路径和绝对路径的总结相对路径的好处：站点不管拷贝到哪⾥，⽂件和图⽚的相对路径关系都是不变的。
相对路径使⽤有⼀个前提，就是⽹页⽂件和你的图⽚，必须在⼀个服务器上。
问题：我的⽹页在C盘，图⽚却在D盘，能不能插⼊呢？答案：⽤相对路径不能，⽤绝对路径也不能。
注意：可以使⽤file://来插⼊，但是这种⽅法，没有任何意义！因为服务器上没有所谓c盘、d盘。
下⾯的⽅法是⾏的，但是没有任何⼯程上的意义，这是因为服务器没有盘符，linux系统没有盘符：<img src="file://C:\Users\qianguyihao\Pictures\明星\1.jpg" alt=""/>总结⼀下：⽆论是在 a 标签还是 img 标签上，如果要⽤路径。
相对路径和绝对路径（实例）
相对路径和绝对路径（实例）⼀、基本概念相对路径：即相对于当前⽂件的路径，前端开发中⽐较常⽤的路径表⽰⽅法绝对路径：即主页⽂件或者⽬录在硬盘上真正的路径。
⼆、符号表⽰“./”：代表⽬前所在的路径"../"：代表上⼀层路径“/”开头，代码根⽬录三、举例：根⽬录下有demo1和images/1.jpg，demo1下有index1.html⽂件和demo1.1⽂件夹。
demo1.1下有index2.html和2.jpg图⽚⽂件。
⽂件夹⽬录如图所⽰1.⽂件在当前⽬录如index2.html引⽤2.jpg，则⽂件路径应为2.⽂件在上⼀层⽬录如index1.html引⽤images⽂件夹下的1.jpg，则⽂件路径应表⽰为如index2.html引⽤images⽂件夹下的1.jpg，则⽂件路径应表⽰为3.⽂件在下⼀层⽬录index1.html访问demo1.1⽂件夹中的2.jpg，则路径应表⽰为：4.根⽬录表⽰法任何页⾯访问images⽂件夹下的1.jpg，则可以表⽰为四、注意1.CSS中的图⽚路径写到CSS中的图⽚路径，url是图⽚针对样式⽂件的位置。
如，index.html引⽤同⼀根⽬录下CSS⽂件夹中的main.css，⽽在main.css中需要引⼊images⽬录中的1.jpg，则路径应表⽰为：background:url（../images/1.jpg）2.JS中图⽚地址均相对于调⽤JS的页⾯的相对位置如：document.getElementById("IMG1").style.backgroundImage= "url(../Images/login.jpg)";五、优缺点分析相对路径更⽅便更改，相对⽐较灵活，但是如果不慎易造成链接失效，并且容易被⼈抄袭。
绝对路径的话能避免这个问题，但是灵活性上相对较弱。
前端绝对路径和相对路径
前端绝对路径和相对路径前端开发中，路径是一个非常重要的概念。
无论是引用外部资源还是定位本地文件，路径都是必不可少的。
在前端开发中，常用的路径有绝对路径和相对路径。
本文将详细介绍这两种路径的概念、用法和区别。
一、绝对路径绝对路径是从根目录开始的完整路径，可以唯一确定一个文件或者资源的位置。
在前端开发中，绝对路径通常以斜杠“/”开头，表示根目录。
例如，一个图片的绝对路径可能是“/images/logo.png”。
绝对路径的优点是可以直接定位到目标文件，不会受到当前文件所在位置的影响。
然而，缺点是绝对路径比较长，不便于维护和移植，而且在不同环境下可能会发生变化。
二、相对路径相对路径是相对于当前文件所在位置的路径。
相对路径没有根目录的概念，只需要指明与当前文件的相对位置即可。
相对路径的写法有多种形式，具体取决于目标文件与当前文件的位置关系。
常用的相对路径写法有以下几种：1. 相对于当前文件所在目录的相对路径：例如，当前文件位于“/css/style.css”，要引用一个位于同级目录的图片“/css/logo.png”，可以使用相对路径“./logo.png”。
2. 相对于当前文件的父级目录的相对路径：例如，当前文件位于“/css/style.css”，要引用一个位于上级目录的图片“/images/logo.png”，可以使用相对路径“../images/logo.png”。
3. 相对于当前文件的子目录的相对路径：例如，当前文件位于“/css/style.css”，要引用一个位于子目录“/css/images/”下的图片“/css/images/logo.png”，可以使用相对路径“images/logo.png”。
相对路径的优点是简洁，易于维护和移植。
但是，相对路径受到当前文件所在位置的限制，如果路径写错或者文件位置改变，可能会导致无法正确引用目标文件。
三、绝对路径和相对路径的区别绝对路径和相对路径在定位文件或者资源时有所不同。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第4章
在網頁中加入圖片
著作權所有 ©旗標出版股份有限公司
本章提要
4-1 設定網頁背景 4-2 加入 圖檔－<img src> 4-3 設定圖片與文字的配置
2
前言
WWW 全球資訊網之所以會令人如痴如醉, 恐怕就在於其所展現出圖文並茂的畫面, 給 人驚豔的感覺吧。然而對於一個製作 HTML 網頁的設計師而言, 更好的消息應該 是可以輕鬆愉快地作出多彩多姿、圖文並 茂的網頁吧！
5
4-1-1 設定網頁的背景色－ <body bgcolor>
6
4-1-1 設定網頁的背景色－ <body bgcolor>
7
4-1-2 設定網頁背景圖－ <body background>
<body> 標籤的 background 屬性可以 設定網頁的背景圖案, 其用法如下：
首先看看下面的例子：
若改成絕對路徑的表示法呢？上圖中, 我的 網頁資料夾是放在電腦的 C 磁碟機中, 因 此, 指定 bg05.jpg 的路徑變成 “C:\我的 網頁\bg05.jpg”, 而指定 bg06.jpg 的路 徑變成“C:\我的網頁\image\bg06.jpg”。 而實際引用到 background 屬性中, 在本 機則要加上 "file:///", 瀏覽器才知道要到 電腦中尋找該路徑。
23
注意圖檔名稱的大小寫
假設欲使用的圖檔名稱是 Pic01.jpg, 而在 編輯 HTML 文件時將指定的檔名寫成 pic01.jpg。由於 Windows 將英文字母的 大小寫視為相同, 因此在自己的電腦上瀏覽 網頁時一切正常。將網頁上傳到網頁伺服 器 (如學校的主機) 後, 其採用的系統可能 是 Unix 或 Linux, 這些系統將英文字母的 大小寫視為不同, 會造成該圖片在網際網路 上無法觀看。因此請務必注意圖檔名稱的 大小寫, 必須和 HTML文件內一致才行。
8
4-1-2 設定網頁背景圖－ <body background>
9
4-1-2 設定網頁背景圖－ <body background>
如上例所示, 我們所指定的圖 (bg05.jpg) 會變成文件的背景圖案, 而且由於圖片比視 窗小, 所以瀏覽器會自動以貼磁磚的方式, 將圖片貼滿整個視窗。
<body> 標籤的 background 屬性和 bgcolor 屬性只要擇一使用即可。若同時 設定了這 2種屬性, 則只會看到背景圖片。 實際上背景顏色仍然有作用, 只不過被背景 圖片蓋住罷了。
22
圖片的相對路徑與絕對路徑
由於製作好的網頁終究要放到網路上, 請您 以網路上使用的路徑表示法 (也是 W3C 制 定的標準表示法) 來編寫 HTML 中的路徑, 也就是 『image/bg06.jpg』, 而非 『image\bg06.jpg』 (再次強調, 注意斜 線 " / " 和反斜線 " \ " 的不同)。
19
圖片的相對路徑與絕對路徑
所以完整的寫法是 "file:///C:\我的網頁 \bg05.jpg" 及 "file:///C：\我的網頁 \image\bg06.jpg" 。
20
圖片的相對路徑與絕對路徑
上述的絕對路徑有個很大的問題, 當網頁放 在我們的電腦中, 因為圖片同樣在電腦內, 所以可以正常顯示圖片。而在網頁公佈到 網際網路之後, 當其他人瀏覽該網頁時, 同 樣會到瀏覽者的電腦中尋找 "C:\我的網頁 \bg05.jpg" 這張圖, 結果當然是找不到這 張圖, 網頁也就不會顯示這張圖片了。在使 用 "所見即所得" 網頁編輯器編寫網頁時, 特別容易發生這個問題 (編輯器會自行指定 圖片路徑), 請您務必留心。
10
圖片的相對路徑與絕對路徑
background 屬性必須指定 "背景圖片的 位置", 但您是否注意到範例 ex0402.html 中只指定了 "bg05.jpg" 這個圖 檔名稱, 為什麼找得到圖片？究竟背景圖片 放在哪裏呢？
上例的 『background="bg05.jpg"』 已 經指定了圖檔位置, 不過它所指定的是圖檔
的相對路徑。
11
圖片的相對路徑與絕對路徑
所謂的相對路徑, 是以網頁本身的所在為參 考位置, 再敘述要指定的檔案如何對應參考
位置。而不同於相對路徑, 另一種指定檔 案位置的方式稱為絕對路徑。
我們用一個簡單的例子來說明相對路徑與 絕對路徑的概念。請看下列示意圖：
12
圖片的相對路徑與絕對路徑
13
3
4-1 設定網頁背景
在前幾章的內容中, 我們介紹了各種文字的 排版、效果。此時若是配上合適的網頁背 景, 相信網頁會更加有吸引力。
4
4-1-1 設定網頁的背景色－ <body bgcolor>
設定網頁背景色是利用 <body> 標籤的 bgcolor 屬性, 其使用方法如下：
這裏指定顏色的方式和 3-1-3 節介紹的相 同, 請您自行參考該節內容。以下我們直接 來看一個例子：
17
圖片的相對路徑與絕對路徑
如果要指定 bg06.jpg 呢？若順著藍色箭 頭 (相對路徑) 尋找, 就知道必須先進入 image 資料夾中, 才能找到 bg06.jpg。 因此, 其相對路徑的敘述就會變成 『background=“image/bg06.jpg”』。
18
圖片的相對路徑與絕對路徑
圖片的相對路徑與絕對路徑
14
圖片的相對路徑與絕對路徑
藉由上圖, 是否讓您理解了何謂相對路徑與 絕對路徑？底下我們以剛才的範例ex0401.html 為例, 進行更具體的說明。請看 以下的示意圖：
15
圖片的相對路徑與絕對路徑
16
圖片的相對路徑與絕對路徑
如上圖所示, 若 ex04-01.html 要指定 bg05.jpg, 那麼順著綠色的箭頭 (相對路 徑), 就會發現 bg05.jpg 其實就在同一個 位置。因此只要指定 『background=“bg05.jpg”』, ex0401.html 就明白該圖檔和自己在同一個位 置。