淺談網(wǎng)頁中的相對(duì)路徑和絕對(duì)路徑
更新時(shí)間:2007年02月09日 00:00:00 作者:
經(jīng)常聽到網(wǎng)友苦述自己的網(wǎng)頁中有許多圖片不能正常顯示,究竟為什么不能正常顯示呢?總結(jié)其原因絕大部分都是因?yàn)槭褂昧隋e(cuò)誤路徑所致。網(wǎng)頁中的圖像、動(dòng)畫等素材都有自己固定的存放位置,網(wǎng)頁只是通過路徑使用HTML語言來調(diào)用它們,然后把它們顯示在網(wǎng)頁中。在網(wǎng)頁中的路徑大體可分為相對(duì)路徑和絕對(duì)路徑,大家(尤其是初學(xué)網(wǎng)頁設(shè)計(jì)的朋友)往往對(duì)它們不夠認(rèn)識(shí),在應(yīng)該使用相對(duì)路徑的地方使用了絕對(duì)路徑,從而導(dǎo)致瀏覽器無法在指定的位置打開指定的文件,使素材不能正常顯示。
那什么是相對(duì)路徑?什么是絕對(duì)路徑呢?為什么使用了絕對(duì)路徑有時(shí)就不能顯示呢?讓我們一起來認(rèn)識(shí)一下它們吧。
比如C盤的My Pictures目錄下有一個(gè)tp.jpg圖像,那么它的路徑就是c:My pictures p.jpg,其實(shí)這種完整地描述文件位置的路徑就是絕對(duì)路徑。如網(wǎng)頁index.htm中有一張圖片tp.jpg,它們的絕對(duì)路徑是:
c:My picturesindex.htm
c:My pictures p.jpg
如果你使用了絕對(duì)路徑c:My pictures p.jpg進(jìn)行圖片鏈接,那么在本地電腦中將一切正常,因?yàn)樵赾:My pictures下的確存在tp.jpg這個(gè)圖片。但你將它們上傳到網(wǎng)站服務(wù)器上后,就不會(huì)正常了,因?yàn)榉?wù)器給你劃分的存放空間可能在C盤其他目錄中,也可能在D盤其他目錄中,總之不會(huì)那么巧的就是c:My pictures。那么圖片路徑應(yīng)該如何設(shè)置呢?這里就必須使用相對(duì)路徑了,所謂相對(duì)路徑,顧名思義就是自己相對(duì)與目標(biāo)位置。在上例中index.htm中連接的tp.jpg就可以使用My pictures p.jpg來定位文件,這樣不論將這些文件放到哪里,只要它們的相對(duì)關(guān)系沒有變,就不會(huì)出錯(cuò)。具體的鏈接方式是這樣的:“..My picturesimg.jpg”,其中使用“..”來表示上一級(jí)目錄,“....”表示上上級(jí)的目錄,以此類推。
我們一起來看看初學(xué)的朋友可能犯的幾個(gè)路徑錯(cuò)誤:
例1
c:mywedwedindex.htm
c:mywedimg p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,因?yàn)閮蓚€(gè)文件同在Mywed目錄下,所以初學(xué)者可能把圖片鏈接寫為img p.jpg,那么這樣實(shí)際的鏈接就變?yōu)榱薈:mywedwedimg p.jpg,顯然這是不正確的。正確的路徑應(yīng)該是相對(duì)路徑..img p.jpg。
例2
c:mywedwedwed1index.htm
c:mywedimgimg1 p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,初學(xué)者可能錯(cuò)誤的把圖片鏈接寫為..imgimg1 p.jpg,那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:mywedwedimgimg1
tp.jpg了,因?yàn)樵谠撃夸浵虏]有此文件,所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是....imgimg1 p.jpg。
例3
c:mywedwedwedindex.htm
c:mywedwedimg p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,初學(xué)者可能錯(cuò)誤地把圖片鏈接寫為....img p.jpg,那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:mywedimg p.jpg了,因?yàn)樵谠撃夸浵虏]有此文件,所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是..img p.jpg。
通過上面三個(gè)例子,我們可以看到網(wǎng)頁與圖片所在目錄相同的部分都可以使用“..”進(jìn)行代替。
有的讀者可能會(huì)有這樣的疑惑:一個(gè)網(wǎng)站有許多的鏈接,我怎么能保證它們的連接都正確,如果我調(diào)整了一下圖片或網(wǎng)頁的存儲(chǔ)路徑,那不是全亂了么?為了提高工作效率,我們推薦大家使用Dreamweaver進(jìn)行網(wǎng)站編輯,因?yàn)樗袀€(gè)站點(diǎn)管理功能,使用該功能絕對(duì)路徑可以自動(dòng)地轉(zhuǎn)化為相對(duì)路徑,并且當(dāng)你在站點(diǎn)中改動(dòng)文件路徑時(shí),與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改,實(shí)在是方便極了!
那什么是相對(duì)路徑?什么是絕對(duì)路徑呢?為什么使用了絕對(duì)路徑有時(shí)就不能顯示呢?讓我們一起來認(rèn)識(shí)一下它們吧。
比如C盤的My Pictures目錄下有一個(gè)tp.jpg圖像,那么它的路徑就是c:My pictures p.jpg,其實(shí)這種完整地描述文件位置的路徑就是絕對(duì)路徑。如網(wǎng)頁index.htm中有一張圖片tp.jpg,它們的絕對(duì)路徑是:
c:My picturesindex.htm
c:My pictures p.jpg
如果你使用了絕對(duì)路徑c:My pictures p.jpg進(jìn)行圖片鏈接,那么在本地電腦中將一切正常,因?yàn)樵赾:My pictures下的確存在tp.jpg這個(gè)圖片。但你將它們上傳到網(wǎng)站服務(wù)器上后,就不會(huì)正常了,因?yàn)榉?wù)器給你劃分的存放空間可能在C盤其他目錄中,也可能在D盤其他目錄中,總之不會(huì)那么巧的就是c:My pictures。那么圖片路徑應(yīng)該如何設(shè)置呢?這里就必須使用相對(duì)路徑了,所謂相對(duì)路徑,顧名思義就是自己相對(duì)與目標(biāo)位置。在上例中index.htm中連接的tp.jpg就可以使用My pictures p.jpg來定位文件,這樣不論將這些文件放到哪里,只要它們的相對(duì)關(guān)系沒有變,就不會(huì)出錯(cuò)。具體的鏈接方式是這樣的:“..My picturesimg.jpg”,其中使用“..”來表示上一級(jí)目錄,“....”表示上上級(jí)的目錄,以此類推。
我們一起來看看初學(xué)的朋友可能犯的幾個(gè)路徑錯(cuò)誤:
例1
c:mywedwedindex.htm
c:mywedimg p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,因?yàn)閮蓚€(gè)文件同在Mywed目錄下,所以初學(xué)者可能把圖片鏈接寫為img p.jpg,那么這樣實(shí)際的鏈接就變?yōu)榱薈:mywedwedimg p.jpg,顯然這是不正確的。正確的路徑應(yīng)該是相對(duì)路徑..img p.jpg。
例2
c:mywedwedwed1index.htm
c:mywedimgimg1 p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,初學(xué)者可能錯(cuò)誤的把圖片鏈接寫為..imgimg1 p.jpg,那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:mywedwedimgimg1
tp.jpg了,因?yàn)樵谠撃夸浵虏]有此文件,所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是....imgimg1 p.jpg。
例3
c:mywedwedwedindex.htm
c:mywedwedimg p.jpg
在此例中,index.htm網(wǎng)頁中有tp.jpg這個(gè)圖片,初學(xué)者可能錯(cuò)誤地把圖片鏈接寫為....img p.jpg,那么這樣轉(zhuǎn)為絕對(duì)路徑就是C:mywedimg p.jpg了,因?yàn)樵谠撃夸浵虏]有此文件,所以顯然這種鏈接是錯(cuò)誤的。正確的應(yīng)該是..img p.jpg。
通過上面三個(gè)例子,我們可以看到網(wǎng)頁與圖片所在目錄相同的部分都可以使用“..”進(jìn)行代替。
有的讀者可能會(huì)有這樣的疑惑:一個(gè)網(wǎng)站有許多的鏈接,我怎么能保證它們的連接都正確,如果我調(diào)整了一下圖片或網(wǎng)頁的存儲(chǔ)路徑,那不是全亂了么?為了提高工作效率,我們推薦大家使用Dreamweaver進(jìn)行網(wǎng)站編輯,因?yàn)樗袀€(gè)站點(diǎn)管理功能,使用該功能絕對(duì)路徑可以自動(dòng)地轉(zhuǎn)化為相對(duì)路徑,并且當(dāng)你在站點(diǎn)中改動(dòng)文件路徑時(shí),與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改,實(shí)在是方便極了!
您可能感興趣的文章:
- 談?wù)凱HP中相對(duì)路徑的問題與絕對(duì)路徑的使用
- java區(qū)分絕對(duì)路徑和相對(duì)路徑的方法
- PowerShell中把相對(duì)路徑轉(zhuǎn)換為絕對(duì)路徑的2個(gè)方法
- javascript將相對(duì)路徑轉(zhuǎn)絕對(duì)路徑示例
- C#絕對(duì)路徑拼接相對(duì)路徑的實(shí)例代碼
- asp中將相對(duì)路徑轉(zhuǎn)換為絕對(duì)路徑的函數(shù)代碼
- php絕對(duì)路徑與相對(duì)路徑之間關(guān)系的的分析
- 相對(duì)路徑轉(zhuǎn)化成絕對(duì)路徑
- 相對(duì)路徑與絕對(duì)路徑的區(qū)別
- 相對(duì)路徑和絕對(duì)路徑的寫法總結(jié)
相關(guān)文章
以獨(dú)占方式的鎖定數(shù)據(jù)表的解決方法參考
以獨(dú)占方式的鎖定數(shù)據(jù)表的解決方法參考...2007-02-02淺談網(wǎng)頁中的相對(duì)路徑和絕對(duì)路徑
淺談網(wǎng)頁中的相對(duì)路徑和絕對(duì)路徑...2007-02-02快速發(fā)現(xiàn)并改正網(wǎng)站中的無效鏈接
快速發(fā)現(xiàn)并改正網(wǎng)站中的無效鏈接...2007-02-02dreamweaver cs4 改進(jìn)了flash的鏈接代碼
好消息dreamweaver cs4之flash鏈接實(shí)現(xiàn)代碼2008-08-08Dreamweaver基礎(chǔ)教程 (一)之新功能簡(jiǎn)介
Dreamweaver基礎(chǔ)教程 (一)之新功能簡(jiǎn)介...2007-03-03