简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

HTML中相對路徑和絕對路徑的區別

小云云
發布： 2018-05-18 14:20:20
原創
7755 人瀏覽過

在實際網頁開發中，插入圖片、包含CSS文件等都需要有路徑，如果文件路徑的新增錯誤，就會導致引用失效(無法瀏覽連結文件，或無法顯示插入的圖片等)。很多初學者感到困惑，以下我就詳細的介紹相對路徑與絕對路徑。

HTML相對路徑

指由這個檔案所在的路徑所引起的跟其它檔案(或資料夾)的路徑關係。

例如：

檔案1.htm的絕對路徑是：d:/www/html/1.htm

檔案2.htm的絕對路徑是：d: /www/html/2.htm

那麼：1.htm相對於2.htm的路徑就是：1.htm

相對連結的使用方法：

如果連結到同一目錄下，則只需輸入要連結文件的名稱,例如:

<a href =”1 htm”>网页链接 </a>
<img src=”bg.jpg” />
登入後複製

如果連結到下一層目錄，則需要先輸入目錄名，然後加上“ / ”，再輸入文件名,例如：

<a href =”html/ next.htm”>
<img src=”images/bg.jpg” />
登入後複製

如果連接到上一層目錄，則需要先輸入“.．/”，然後再輸入目錄名、檔名，例如：

<a href = “．．/ www/index.htm”>
登入後複製

實例總結

現在有4個html檔案分別是aaa.html bbb.html ccc.html index.html

  • #aaa.html的路徑為：D:/www/adminwang/ html/aaa.html

  • bbb.html的路徑為：D:/www/adminwang/ bbb.html

  • ccc.html的路徑為：D:/www/ ccc.html

  • index.html的路徑為D:/www/ index.html

##連結同一目錄下的檔案

例如ccc.html檔案連結index.html的程式碼如下：

1

連結index網頁

##連結上一目錄的檔案


例如bbb.html連結ccc.html的程式碼如下：

#1


連結上2層目錄的檔案

例如aaa.html連結ccc.html的程式碼如下：

# #連結ccc網頁

1

連結ccc網頁


連結下級目錄的檔案

例如ccc.html連結bbb.html的程式碼如下：

1

連結bbb網頁


連結下2層目錄的檔案

例如ccc.html連結aa​​a.html的程式碼如下：

HTML绝对路径

为文件提供的完全路径，包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。例如：

http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
登入後複製

绝对路径没有什么好说的，相对路径掌握了，绝对路径就很简单了。

相关推荐：
HTMLa标签的href属性指定相对路径与绝对路径使用方法

html的绝对路径和相对路径怎么使用

php算法实现相对路径的案例

以上是HTML中相對路徑和絕對路徑的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html 相對 絕對
來源：php.cn
上一篇：HTML選擇圖片並直接預覽實作程式碼 下一篇：HTML和JS實作簡單的計算器
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...
來自於 2024-04-16 09:34:16
0
0
4687
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...
來自於 2024-04-06 20:02:10
0
2
543
用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...
來自於 2024-04-06 17:40:41
0
2
410
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！
##1

連結aaa網頁