Web前端开发技术项目教程课件 2.3.2 知识点2：相对路径和绝对路径

绝对路径和相对路径《前端技术开发》前端技术开发知识储备绝对路径概述1相对路径概述2相对路径设置3路径无效原因401绝对路径概述前端技术开发绝对路径概述前端技术开发01定义绝对路径是指向一个特定文件或资源的完整、确切的路径，它包含了从根目录（或某个特定起始点）到目标文件或资源的所有目录和子目录的名称。特点绝对路径是从文件系统的根目录开始的，因此它不依赖于当前工作目录。解析系统会根据绝对路径直接定位到指定的文件或目录，无需其他参照信息。绝对路径概述前端技术开发01绝对路径提供了文件或目录的精确位置，不受当前工作目录的影响，因此在使用上更为稳定和可靠。优势由于绝对路径包含了从根目录开始的完整路径信息，因此它通常比相对路径更长，也更难以管理和维护。此外，如果文件系统结构发生变化（如目录移动或重命名），那么相关的绝对路径也需要相应地进行更新，否则可能会导致路径失效。局限性02相对路径概述前端技术开发相对路径概述前端技术开发02定义相对路径是指相对于当前文件所在位置的路径。在网页设计中，相对路径通常用于链接到同一网站内的其他页面或资源。相对路径不是完整的路径，而是基于当前文件位置与目标文件位置之间的相对关系来构建的。特点相对路径是相对于当前文件的URL，不依赖于完整的URL地址，只根据文件之间的相对位置来确定。相对路径概述前端技术开发02灵活性高，便于移植和部署，不依赖于具体的域名或服务器地址。优势当文件结构复杂或文件被移动时，相对路径可能需要调整，否则可能导致链接失效。在大型项目中，过多的相对路径可能导致路径变得复杂且难以管理。局限性03相对路径设置前端技术开发相对路径设置前端技术开发03子目录下文件的访问若目标文件位于当前HTML文件的子目录中，需先输入子目录名，然后跟上文件名，如`images/photo.jpg`。父目录及更上层目录文件的访问要访问父目录或更上层目录中的文件，可使用`..`来表示上一级目录，如`../images/photo.jpg`表示访问当前文件所在目录的上一级目录中的`images`子目录下的`photo.jpg`文件。同一目录下文件的访问如果目标文件与当前HTML文件在同一目录下，只需直接输入文件名即可，如`photo.jpg`。030201图片标记案例前端技术开发04插入同一目录下的图片<imgsrc="siso.png"width="100px">图片标记案例前端技术开发04插入子目录下的图片<imgsrc="img/siso.png"width="100px">图片标记案例前端技术开发04插入父目录下的图片<imgsrc="../siso.png"width="100px">04路径无效原因前端技术开发路径无效原因前端技术开发04检查链接地址是否正确，是否存在拼写错误或格式问题。链接地址错误确认目标文件是否已被移动、重命名或删除，导致链接失效。文件位置变动检查相对路径的设置是否正确，是否考虑到了当前文件与目标文件的位置关系。路径设置问题010203小结前端技术开发05避免使用绝对路径注意文件命名规则保持文件结