Web前端開發(fā)技術(shù)項目教程課件 2.3.2 知識點2：相對路徑和絕對路徑VIP

絕對路徑和相對路徑《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識儲備絕對路徑概述1相對路徑概述2相對路徑設(shè)置3路徑無效原因401絕對路徑概述前端技術(shù)開發(fā)絕對路徑概述前端技術(shù)開發(fā)01定義絕對路徑是指向一個特定文件或資源的完整、確切的路徑，它包含了從根目錄（或某個特定起始點）到目標文件或資源的所有目錄和子目錄的名稱。特點絕對路徑是從文件系統(tǒng)的根目錄開始的，因此它不依賴于當(dāng)前工作目錄。解析系統(tǒng)會根據(jù)絕對路徑直接定位到指定的文件或目錄，無需其他參照信息。絕對路徑概述前端技術(shù)開發(fā)01絕對路徑提供了文件或目錄的精確位置，不受當(dāng)前工作目錄的影響，因此在使用上更為穩(wěn)定和可靠。優(yōu)勢由于絕對路徑包含了從根目錄開始的完整路徑信息，因此它通常比相對路徑更長，也更難以管理和維護。此外，如果文件系統(tǒng)結(jié)構(gòu)發(fā)生變化（如目錄移動或重命名），那么相關(guān)的絕對路徑也需要相應(yīng)地進行更新，否則可能會導(dǎo)致路徑失效。局限性02相對路徑概述前端技術(shù)開發(fā)相對路徑概述前端技術(shù)開發(fā)02定義相對路徑是指相對于當(dāng)前文件所在位置的路徑。在網(wǎng)頁設(shè)計中，相對路徑通常用于鏈接到同一網(wǎng)站內(nèi)的其他頁面或資源。相對路徑不是完整的路徑，而是基于當(dāng)前文件位置與目標文件位置之間的相對關(guān)系來構(gòu)建的。特點相對路徑是相對于當(dāng)前文件的URL，不依賴于完整的URL地址，只根據(jù)文件之間的相對位置來確定。相對路徑概述前端技術(shù)開發(fā)02靈活性高，便于移植和部署，不依賴于具體的域名或服務(wù)器地址。優(yōu)勢當(dāng)文件結(jié)構(gòu)復(fù)雜或文件被移動時，相對路徑可能需要調(diào)整，否則可能導(dǎo)致鏈接失效。在大型項目中，過多的相對路徑可能導(dǎo)致路徑變得復(fù)雜且難以管理。局限性03相對路徑設(shè)置前端技術(shù)開發(fā)相對路徑設(shè)置前端技術(shù)開發(fā)03子目錄下文件的訪問若目標文件位于當(dāng)前HTML文件的子目錄中，需先輸入子目錄名，然后跟上文件名，如`images/photo.jpg`。父目錄及更上層目錄文件的訪問要訪問父目錄或更上層目錄中的文件，可使用`..`來表示上一級目錄，如`../images/photo.jpg`表示訪問當(dāng)前文件所在目錄的上一級目錄中的`images`子目錄下的`photo.jpg`文件。同一目錄下文件的訪問如果目標文件與當(dāng)前HTML文件在同一目錄下，只需直接輸入文件名即可，如`photo.jpg`。030201圖片標記案例前端技術(shù)開發(fā)04插入同一目錄下的圖片<imgsrc="siso.png"width="100px">圖片標記案例前端技術(shù)開發(fā)04插入子目錄下的圖片<imgsrc="img/siso.png"width="100px">圖片標記案例前端技術(shù)開發(fā)04插入父目錄下的圖片<imgsrc="../siso.png"width="100px">04路徑無效原因前端技術(shù)開發(fā)路徑無效原因前端技術(shù)開發(fā)04檢查鏈接地址是否正確，是否存在拼寫錯誤或格式問題。鏈接地址錯誤確認目標文件是否已被移動、重命名或刪除，導(dǎo)致鏈接失效。文件位置變動檢查相對路徑的設(shè)置是否正確，是否考慮到了當(dāng)前文件與目標文件的位置關(guān)系。路徑設(shè)置問題010203小結(jié)前端技術(shù)開發(fā)05避免使用絕對路徑注意文件命名規(guī)則保持文件結(jié)