HTML 相對路徑與絕對路徑

2021-02-19 web前端營
文件路徑

文件路徑就是文件在電腦(伺服器)中的位置,表示文件路徑的方式有兩種:相對路徑和絕對路徑。

路徑標識:標識符號說明/路徑標識.當前目錄..上一層目錄

「.」和「..」常與「/」結合使用表示各個路徑層次:

路徑說明./當前路徑,可省略/網站根目錄,為絕對路徑../上一層目錄,可重複使用,如../../,表示上上層目錄相對路徑(Relative Path)

相對路徑就是指由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關係。使用相對路徑可以為我們帶來非常多的便利,大部分情況下我們使用的是相對路徑。

相對路徑的例子:

<img src="images/flower_1.jpg" alt="花朵" />

這個是在我們例子主頁index.html裡img標籤使用相對路徑標識圖像來源的例子。

在該例子中,index.html存放於E:/hmtl中,而圖像位置為E:/html/images/flower_1.jpg中。圖像相對於index.html的路徑就是images/flower_1.jpg。

下面的寫法效果是一樣的:


<img src="./images/flower_1.jpg" alt="花朵" />

也就是說,通常對於當前路徑,可以採用省略的寫法,瀏覽器默認為當前路徑。

如果在index.html同目錄下有個1.html,那麼要從index.html做一個連結到1.html,使用相對路徑

<a href="1.html">從index.html連結到當前目錄的1.html</a>

如果1.html在E:/hmtl/test目錄下,要從1.html做一個連結到index.html和使用圖片目錄下的圖片,使用相對路徑:

<a href="../index.html">從1.html連結到上一層目錄的index.html</a><p>指定圖片:</p><img src="../images/flower_1.jpg" alt="花朵" />

絕對路徑(Absolute Path)

絕對路徑一般是指帶有網址的路徑,非本站外的資源都要使用絕對路徑。如本站引用thinkphp.cn的圖片連結

<a href="http://www.thinkphp.cn/" target="_blank"><img src="http://www.thinkphp.cn/logo88X31.gif" /></a>

在該例子中,對超連結標籤和圖像標籤裡的屬性都使用了絕對路徑。

網站根目錄

網站根目錄用「/」表示,是一種特殊的絕對路徑,它表示網站(本站)的第一層次。

使用絕對路徑的例子

<img src="/images/flower_1.jpg" alt="花朵" />

等效於:

<img src="http://www.5idev.com/images/flower_1.jpg" alt="花朵" />

使用根路徑其優點是比較直觀,計算方式是從根目錄開始計算,缺點是如果內容層次發生了變化哪怕產生了同級的變動,都需要變動目錄寫法。

相關焦點

  • C\C++編程中:相對路徑+絕對路徑
    轉自:http://www.cnblogs.com/vranger/p/3820783.html電腦硬碟E盤下,建文件夾「test
  • 以html中插入圖片為例,聊一聊絕對路徑和相對路徑的區別
    src即source(來源)的縮寫,也就是圖片的url(或者說地址、路徑)。通過查閱文檔(例如w3school網站),可以看到這個屬性的語法。如下圖裡面有提到相對路徑和絕對路徑兩種說法。相信還是有一些朋友比如我第一次看到上圖的解釋是懵的。
  • P02-絕對路徑和相對路徑
    本地文件讀寫依賴文件路徑,本節簡單介紹下相對路徑和絕對路徑,只局限在本地路徑,不涉及網絡路徑。
  • Q群問答‖Revit連結的相對路徑與絕對路徑的區別
    問:Revit連結的相對路徑與絕對路徑有什麼區別?答:我們著重來理解兩個詞,相對和絕對。
  • Linux絕對路徑和相對路徑詳解
    說明目錄或文件名位置的方法有兩種,分別使用絕對路徑和相對路徑。絕對路徑指的是從根目錄(/)開始寫起的文件或目錄名稱,而相對路徑則指的是相對於當前路徑的寫法。換句話說,絕對路徑必須以一個正斜線(/),也就是根目錄開始,到查找對象(目錄或文件)所必須經過的每個目錄的名字,它是文件位置的完整路標,因此,在任何情況下都可以使用絕對路徑找到所需的文件。
  • code小知識~工作路徑、絕對路徑、相對路徑
    絕對路徑Windows下絕對路徑就是指包含從盤符開始的完整路徑,這個比較好理解,比如 E:\juzicode\com 就是一條絕對路徑。相對路徑相對路徑有一個「相對」的對象就是當前工作路徑,要搞清楚相對路徑先要明白當前工作路徑。如果在cmd命令行下調試,提示符「>」之前的這段字符就是當前工作路徑。當前工作路徑的基礎上,使用」..\\」(上一層目錄)組合出來的路徑就是一種相對路徑,直接看個例子,在路徑 E:\juzicode\com 下的文件夾結構是這樣的:
  • linux絕對路徑和相對路徑
    在Linux中什麼是一個文件的路徑呢,說白了就是這個文件存在的地方,例如 /root/.ssh/authorized_keys
  • SEO術語之絕對路徑與相對路徑的區別
    最近有很多SEO新手同學問我,,絕對路徑與相對路徑的區別是什麼」,今天為大家詳細解答一番。  什麼是絕對路徑  絕對路徑的指定是從樹型目錄結構頂部的根目錄開始到某個目錄或文件的路徑,由一系列連續的目錄組成,中間用斜線分隔,直到要指定的目錄或文件,路徑中的最後一個名稱即為要指向的目錄或文件。
  • 絕對相對路徑,百度網盤小案例
    絕對、相對路徑  在製作這個小案例之前,我們先來了解一下絕對地址和相對地址
  • linux文件路徑怎麼區分絕對路徑和相對路徑
    一、介紹1,文件路徑什麼是文件的路徑?答:這個文件存放的地方,可以聯想為 文件的「家」。
  • 面對相對路徑和絕對路徑的分岔口,你選對了嗎?
    導論我們都知道,如果我們要找到需要的文件,就要知道文件的位置,表示文件位置的方式就是路徑。在程序中,只要涉及文件的地方(如圖片等)都會涉及到相對路徑和絕對路徑的問題。今天就為大家介紹一下相對路徑和絕對路徑的具體寫法及應用。
  • 【VIP會員精彩答疑】C 語言文件操作中的絕對路徑和相對路徑
    絕對路徑和相對路徑當我們向 fopen() 函數指明操作文件的具體位置時,有兩種表達方式:絕對路徑和相對路徑。1)絕對路徑絕對路徑是以文件的根目錄(拿 Window 系統來說,根目錄指的就是 C 盤、D 盤、E 盤等)為起點,一直到操作文件所在的目錄,然後在此基礎上添加操作文件的文件名。
  • RPO 相對路徑覆蓋攻擊
    主要是利用瀏覽器的一些特性和部分服務端的配置差異導致的漏洞,通過一些技巧,我們可以通過引入相對路徑來引入其他資源文件,以達到我們的目的。漏洞成因:RPO 依賴於瀏覽器和網絡伺服器的反應,基於伺服器的 Web 緩存技術和配置差異,以及伺服器和客戶端遊覽器的解析差異,利用前端代碼中加載的 css/js 的相對路徑來加載其他文件,最終瀏覽器將伺服器返回的不是 css/js 文件,而是當作 css/js 來解析,從而導致xss、信息洩露等漏洞產生。
  • 【避坑指北】Python3相對路徑導入方法
    我以為的相對路徑導入並不是真實的相對路徑導入。Python導入包或方法假設我們的工程項目是這樣的:.sys.path保存的路徑列表包括幾個部分:第三方擴展的site-package目錄,也就是pip安裝第三方包的路徑相對路徑導入的那些坑現在有一個需求就是b目錄下的caller.py希望執行a目錄callee.py中的方法caller_test()方法,這個方法可以對應出調用者的信息。
  • 【技巧】SourceInsight如何設置為相對路徑
    今天主要跟大家分享一下如何把SI設置為相對路徑,方便大家轉移和打包代碼。(還有很多啦,這裡就不一一例舉了)     使用過SI的小夥伴都知道,SI建立工程非常簡單,基本上分為創建工程->添加文件->文件同步便可以進行代碼的閱讀和分析了,然而初次使用的小夥伴都會存在一個路徑的問題。
  • 最近遇到的大坑系列-3-LINUX下PYTHON相對路徑使用
    import syssys.path.append('xxx')引入sys庫,然後在sys路徑裡面增加你需要增加庫的絕對路徑。方便,簡單,直接就能用,比你用各種 . 或者 .. 來做相對路徑再引入方便多了!針對程序中調用的config,或者log,或者其他文件。
  • os.path -- 路徑操作(上篇)
    /test.py') # 文件,相對路徑#Falseprint(os.path.isabs('./')) # 目錄,相對路徑#Falseprint(os.path.isabs('/project/tes')) # 無效路徑,絕對路徑#Trueos.path.isfile(path)如果
  • python:os.path模塊(常用路徑操作)
    只要你擼代碼就會使用到路徑操作,大部分都是讀取配置文件使用的比較多,下面簡介了一些常用的方法,僅供參考.Test/pythonScripts/pythonLibrary', 'python_example.py')Process finished with exit code 0os.apth.join(path, *paths)import os.path as sp# 絕對路徑拼接
  • php爆絕對路徑方法
    id=149'2、錯誤參數值爆路徑說明:將要提交的參數值改成錯誤值,比如-1。單引號被過濾時不妨試試。Eg:www.xxxxxxxxx.com/researcharchive.php?id=-13、Google爆路徑說明:結合關鍵字和site語法搜索出錯頁面的網頁快照,常見關鍵字有warning和fatal error。注意,如果目標站點是二級域名,site接的是其對應的頂級域名,這樣得到的信息要多得多。
  • Python打開文件的兩種路徑介紹
    # 兩種文件路徑# 1. 絕對路徑# 2.