路徑.jpg
基礎(chǔ)
路徑是計算機(jī)中非常重要的一個概念。路徑是做什么用的呢？下面的一句歌詞是非常形象的。
我所有的一切都只為找到它赴蝇，哪怕付出憂傷代價。--《快樂老家》
我們的"它"是我們HTML需要引用的文件巢掺，路徑就是用來找到文件的句伶。HTML中有很多地方用到了路徑(參見附錄)，路徑錯誤也是前端工程師經(jīng)常遇到的錯誤陆淀，不免“付出憂傷代價”考余。不過，按照下面的方法使用完全秒殺所有的路徑問題倔约。（Linux與Windows有少許區(qū)別秃殉，下文中的路徑?jīng)]有特殊說明是指Windows路徑）
| 概念 | 例子 |
|---|---|
| 路徑 | C:\中國\陜西\西安\高新區(qū)\西部國際廣場.jpg |
| 盤符 | C: |
| 目錄(文件夾) |
中國 陜西 西安 高新區(qū)
|
| 文件 | 西部國際廣場.jpg |
| 分隔符 | \ |
說明/是一個比較通用的分隔符，而\是windows特有的并且默認(rèn)的分割符。
- 絕對路徑(Absolute Path)
從最頂層盤符開始的路徑钾军。絕對路徑開頭一定是盤符(Linux是根目錄)鳄袍。 - 相對路徑(Relative Path)
從當(dāng)前文件開始到目標(biāo)文件的路徑。相對路徑使用.\表示當(dāng)前目錄吏恭，..\表示上一層路徑拗小。
實踐
- 如何獲得絕對路徑
獲取文件的絕對路徑非常簡單，有如下兩種簡單方式- 方法一
打開文件所在的文件夾樱哼，把地址欄上的目錄和文件名用分隔符
\接到一起就OK了哀九。例如上圖中的絕對路徑就是C:\中國\陜西\西安\高新區(qū)\西部國際廣場.jpg
- 方法二
打開文件屬性，把【位置】與文件名用分隔符\接到一起就OK了搅幅。例如上圖中的絕對路徑就是C:\中國\陜西\西安\雁塔區(qū)\大雁塔.jpg
最佳實踐
如果當(dāng)前文件與目標(biāo)文件在不同磁盤上(盤符都不一致)阅束，當(dāng)前文件只能使用目標(biāo)文件的絕對路徑。
- 如何獲得相對路徑
- 情況一
當(dāng)公共目錄正好是當(dāng)前文件的目錄時茄唐，用.\代替目標(biāo)文件公共目錄息裸，就是它的相對路徑。例如：
公共目錄是C:\中國\陜西\西安\高新區(qū)\\沪编，正好是當(dāng)前文件的目錄呼盆，所以，把目標(biāo)文件中的C:\中國\陜西\西安\高新區(qū)\\蚁廓，換成.\访圃，就是目標(biāo)文件的相對路徑。
同樣相嵌，即使目標(biāo)文件目錄比本地文件深腿时，滿足這個條件(公共目錄=當(dāng)前文件的目錄)，也是一樣的饭宾，只需要把目標(biāo)文件絕對路徑中的公共目錄換成.\就好圈匆。
-
情況二
如果當(dāng)公共目錄不是本地文件的目錄時，只需要三步就能把目標(biāo)文件絕對路徑轉(zhuǎn)換成相對路徑捏雌。
-
把兩個絕對路徑中的公共目錄去掉。
- 把當(dāng)前文件路徑中的文件夾笆搓，都替換成
..
-
把當(dāng)前文件前面的替換后目錄性湿，接到目標(biāo)路徑上。得到目標(biāo)文件相對于當(dāng)前文件的相對路徑满败。
再復(fù)雜的路徑肤频，上面三步也可以完成轉(zhuǎn)化。
-
最佳實踐
- 在HTML中引用路徑要使用相對路徑算墨。
- 路徑中的分割符使用斜線
/宵荒。
附錄
在如下中會遇到路徑問題
- HTML標(biāo)簽
img[src]a[href]bgsound[src]form[action]frame[src][background]- CSS
link[href]{background-image:url( )}
- Javascript
script[src]- HTML5
video[src]audio[src]
練習(xí)
| No. | 當(dāng)前文件路徑 | 目標(biāo)文件路徑 | 相對當(dāng)前文件的相對路徑 |
|---|---|---|---|
| 1 | C:\1\2\3\index.html |
C:\1\2\3\image.png |
|
| 2 | C:\1\2\3\index.html |
C:\1\2\3\4\image.png |
|
| 3 | C:\1\2\3\index.html |
C:\1\2\3\4\5\6\image.png |
|
| 4 | C:\1\2\3\index.html |
C:\1\2\image.png |
|
| 5 | C:\1\2\3\index.html |
C:\1\image.png |
|
| 6 | C:\1\2\3\index.html |
C:\1\other\3\4\image.png |
|
| 7 | C:\1\2\3\index.html |
E:\1\2\3\4\5\image.png |
有興趣的童鞋可以試著做一下這個練習(xí)，把答案寫在評論中。
