好了，現(xiàn)在我們算是初步的認識了 Html 代碼，好像是叨叨了好多章，其實就是一個中心——標記語言。記住了這一點 Html 還是十分容易理解的，也因為它很容易，我就不在這里過多的廢話了（雖然已經(jīng)被無數(shù)人指責廢話成災了）。從下一章開始我們要學習神一樣的 CSS 了。

好了，先來學點基礎(chǔ)知識準備后面充滿高能的戰(zhàn)斗，我們來研究一下文件地址。首先記住這章很有用，但是現(xiàn)在先看懂就好。

文件的地址分為兩種：絕對地址和相對地址，現(xiàn)在我們來打個比方，我最喜歡這個時間了。

北京東城區(qū)五星級別墅區(qū)里面 A 座是你家，家里三個房間，房間一里面有一張桌子，桌子上有個花瓶。

你站在房間一里，我問你，花瓶在哪？你回答我：“北京東城區(qū)五星級別墅區(qū) A 座房間一桌子上的那個花瓶”。這是絕對地址，這個地址你在哪里告訴對方，對方都可以憑這個地址找到這個花瓶，很完美，就是太羅嗦。

所以一般我們都會簡單地說：“我身邊桌子上的這個花瓶”。一樣很明確，但是有個前提，我得知道你在哪里，才能找到這個花瓶。因為這是以你為參照物的，找不到你，那么花瓶的位置也無從談起。然后你不能換位置，如果你跑到我家說這句話，那指的就是我家的花瓶了。所以要想讓這個相對地址成立，你和花瓶的相對位置不能變化。

你說這么看來相對地址除了簡單也沒啥好處啊，不，當你整體移動一些相關(guān)聯(lián)的文件的時候他的作用就顯現(xiàn)出來了。比如還是剛才那個狀態(tài)，我把你家別墅（包括桌子花瓶還有房間里的你）整體打個包交給順豐寄到上海去了。到了上海打開一看，房間一里面一張桌子，桌子上是花瓶，你站在桌子旁邊，一切都沒變（也就是相對位置沒變哦），那么你現(xiàn)在說：“我身邊桌子上的這個花瓶”，就還是這只花瓶沒錯，但是你再說：“北京東城區(qū)五星級別墅區(qū) A 座房間一桌子上的那個花瓶”，那就不好意思，在那個位置我找不到花瓶了，因為連房子我都給你搬到上海了。

現(xiàn)在理解了絕對地址和相對地址的一些特點，你就開始有些明白了，那么我們說：“絕對地址是描述某個文件的位置，而相對地址是描述兩個文件間的位置關(guān)系”。當我們移動一個文件夾的時候，里面的每個文件的地址都發(fā)生了變化，但是他們之間的相互位置關(guān)系卻沒有變。

然后我們來做一個實例來講解一下哦，假設(shè)有如下目錄結(jié)構(gòu)：

http://coffee.zji.me/

• |_ imgs
  • |_ shuaige.png
• |_ files
  • |_ miao
    • |_ huamao.jpg
  • |_ index.html
  • |_ photo.jpg

那么簡單解釋一下：

http://coffee.zji.me/這個網(wǎng)站下有兩個文件夾 imgs 和 files；

其中 imgs 文件夾下只有一張 shuaige.png 的圖片；

files 文件夾下有兩個文件 index.html 和 photo.jpg ，還有一個叫做 miao 的文件夾；

miao 文件夾下有一張圖片 huamao.jpg

好了，我們假設(shè)你讀得很認真，你完全理解了我上邊所說的這些亂七八糟的東西，那么下邊便是很輕松的學習關(guān)鍵技巧的時刻了。如果你看到這里發(fā)現(xiàn)上面的都沒看……那就記住下面的方法，用的多了自然也就明白了。

現(xiàn)在我們都以 index.html 為參照物（其實就是在哪個文件里寫就以哪個文件為參照物），我們在 index.html 里面寫 photo.jpg 的相對地址?？次以趺醋觯?/p>

先寫下兩個文件的絕對地址：

http://coffee.zji.me/files/index.html

http://coffee.zji.me/files/photo.jpg

然后去掉兩者前邊的相同部分，得到：

index.html

photo.jpg

現(xiàn)在我們的參照物（index.html）只剩下文件名了，那么下面的就是我們要的相對地址了—— photo.jpg

然后做個練習，寫 huamao,jpg 在 index.html 中的相對網(wǎng)址，一樣的辦法，先寫下他們的絕對網(wǎng)址：

http://coffee.zji.me/files/index.html

http://coffee.zji.me/files/miao/huamao.jpg

然后去掉相同部分：

index.html

miao/huamao.jpg

index.html 的網(wǎng)址就剩下文件名了，那下面的就是我們要的相對地址了——miao/huamao.jpg

這個簡單到混蛋的辦法是不是很好理解？我們來看點復雜 shuaige.png 在 index.html 里面的相對地址怎么寫？

按著上邊的辦法，列出絕對地址：

http://coffee.zji.me/files/index.html

http://coffee.zji.me/imgs/shuaige.png

去掉相同部分：

files/index.html

imgs/shuaige.png

嘿，index.html 現(xiàn)在剩的可不只是文件名，還帶著一個文件夾呢，去重之后，如果參照文件剩下的不只是文件名，則在參照文件（index.html）上去掉一個文件夾，同時給目標文件（shuaige.png）前面加上一個 ../ 。如此重復操作，直到參照文件（index.html）只剩下文件名為止。

說起來很復雜，做起來就簡單了，簡直是無腦的上面刪一個，下面加一個：

index.html

../imgs/shuaige.png

這樣就出來了?，F(xiàn)在解釋一下 ../ 代表向上一層文件夾，那么如果是 ../../ 就是向上兩層嘍～現(xiàn)在看看這兩種方法，想想上面的比喻，好好消化一下，可以不理解，但是要知道我都說過些什么，等到后面用起來就理解了。

最后補充一句：你說網(wǎng)址的我看明白了，但是在本地的時候怎么寫？一樣的 C:\windows\我是大帥哥.avi 這么寫文件絕對地址，其實你在文件上面右鍵屬性就可以找他的絕對地址了。然后按著上邊的方法做哦，唯一的問題是 \ 要換成 /。

本章學習卡片：卡片 12

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me