絕對路徑和相對路徑《前端技術開發》前端技術開發知識儲備絕對路徑概述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避免使用絕對路徑注意文件命名規則保持文件結