複習html中的相對路徑和絕對路徑的區別

2022-09-12 16:51:27 字數 1590 閱讀 6089

在html裡只要涉及檔案的地方(如超級鏈結、等)就會涉及絕對路徑與相對路徑的概念。

1.絕對路徑

絕對路徑是指檔案在硬碟上真正存在的路徑。例如「bg.jpg」這個是存放在硬碟的「e:\book\網頁布局**\第2章」目錄下,那麼 「bg.jpg」這個的絕對路徑就是「e:\book\網頁布\**\第2章\bg.jpg"。那麼如果要使用絕對路徑指定網頁的背景就應該使用 以下語句:

2.使用絕對路徑的缺點

事實上,在網頁程式設計時,很少會使用絕對路徑,如果使用「e:\book\網頁布\**\第2章\bg.jpg」來指定背景的位置,在自己的計算機上 瀏覽可能會一切正常,但是上傳到web伺服器上瀏覽就很有可能不會顯示了。因為上傳到web伺服器上時,可能整個**並沒有放在web伺服器的e盤, 有可能是d盤或h盤。即使放在web伺服器的e盤裡,web伺服器的e盤裡也不一定會存在「e:\book\網頁布局\**\第2章」這個目錄,因此在瀏 覽網頁時是不會顯示的。

3.相對路徑

為了避免這種隋況發生,通常在網頁裡指定檔案時,都會選擇使用相對路徑。所謂相對路徑,就是相對於自己的目標檔案位置。例如上面的例子,「s1.htm」 檔案裡引用了「bg.jpg」,由於「bg.jpg」相對於「s1.htm」來說,是在同乙個目錄的,那麼要在「s1.htm」檔案裡使用以下代 碼後,只要這兩個檔案的相對位置沒有變(也就是說還是在同乙個目錄內),那麼無論上傳到web伺服器的哪個位置,在瀏覽器裡都能正確地顯示。

再 舉乙個例子,假設「s1.htm」檔案所在目錄為「e:\book\網頁布局\**\第2章」,而「bg.jpg」所在目錄為「e:\book\網頁 布局\**\第2章\img」,那麼「bg.jpg」相對於「s1.htm」檔案來說,是在其所在目錄的「img」子目錄裡,則引用的語句應該 為:

注意:相對路徑使用「/」字元作為目錄的分隔字元,而絕對路徑可以使用「\」或「/」字元作為目錄的分隔字元。由於「img」目錄是「第2章」目錄下的子目錄,因此在「img」前不用再加上「/」字元。

在 相對路徑裡常使用「../」來表示上一級目錄。如果有多個上一級目錄,可以使用多個「../」,例如「代表上上級目錄。假設 「s1.htm」檔案所在目錄為「e:\book\網頁布局\**\第2章」,而「bg.jpg」所在目錄為「e:\book\網頁布局\**」,那 麼「bg.jpg」相對於「s1.htm」檔案來說,是在其所在目錄的上級目錄裡,則引用的語句應該為:

再舉乙個例子,假設「s1.htm」檔案所在目錄為「e:\book\網頁布局\**\第2章」,而「bg.jpg」所在目錄為「e:\book\網 頁布局\**\img」,那麼「bg.jpg」相對於「s1.htm」檔案來說,是在其所在目錄的上級目錄裡的「img」子目錄裡,則引用的語句 應該為:

4.相對虛擬目錄

有關相對路徑還有乙個比較特殊的表示:「相對虛擬目錄」。請看下面的例子:

在這個例子裡,background屬性的值為「/img/bg.jpg」,注意在「img」前有乙個「/」字元。這個「/」代表的是虛擬目錄的根目錄. 假設把「e:\book\網頁布局\**」設為虛擬目錄,那麼「/img/bg.jpg」的真實路徑為「e:\book\網頁布局\**\img \bg.jpg」;如果把「e:\book\網頁布局\**\第2章」設為虛擬目錄,那麼「/img/bg.jpg」的真實路徑為「e:\book\網頁 布局\**\第2章\img\bg.jpg」

HTML相對路徑和絕對路徑

html初學者會經常遇到這樣乙個問題,如何正確引用乙個檔案。比如,怎樣在乙個html網頁中引用另外乙個html網頁作為超連結 hyperlink 怎樣在乙個網頁中插入一張?如果你在引用檔案時 如加入超連結,或者插入等 使用了錯誤的檔案路徑,就會導致引用失效 無法瀏覽鏈結檔案,或無法顯示插入的等 為了...

html相對路徑和絕對路徑

文章 html相對路徑與絕對路徑 在網頁製作的過程中,少不了跟路徑打交道,比如,包含乙個檔案,插入乙個等,與路徑都有關係,如果使用了錯誤的檔案路徑,就會導致引用失效 無法瀏覽鏈結檔案,或無法顯示插入的等 初學者可能會感到困惑,下面我就詳細的介紹一下相對路徑與絕對路徑。html有2種路徑的寫法 相對路...

HTML絕對路徑和相對路徑

要正確使用引用,有兩種路徑的書寫方式 相對路徑和絕對路徑。如果原始檔和引用檔案在同乙個目錄裡,直接寫引用檔名即可,這時引用檔案的方式就是使用相對路徑。我們現在建乙個原始檔info.html,在info.html裡要引用index.html檔案作為超連結。假設info.html路徑是 c inetpu...