好了，現(xiàn)在我們算是初步的認(rèn)識(shí)了 Html 代碼，好像是叨叨了好多章，其實(shí)就是一個(gè)中心——標(biāo)記語(yǔ)言。記住了這一點(diǎn) Html 還是十分容易理解的，也因?yàn)樗苋菀?，我就不在這里過(guò)多的廢話了（雖然已經(jīng)被無(wú)數(shù)人指責(zé)廢話成災(zāi)了）。從下一章開始我們要學(xué)習(xí)神一樣的 CSS 了。
好了，先來(lái)學(xué)點(diǎn)基礎(chǔ)知識(shí)準(zhǔn)備后面充滿高能的戰(zhàn)斗，我們來(lái)研究一下文件地址。首先記住這章很有用，但是現(xiàn)在先看懂就好。
文件的地址分為兩種：絕對(duì)地址和相對(duì)地址，現(xiàn)在我們來(lái)打個(gè)比方，我最喜歡這個(gè)時(shí)間了。
北京東城區(qū)五星級(jí)別墅區(qū)里面 A 座是你家，家里三個(gè)房間，房間一里面有一張桌子，桌子上有個(gè)花瓶。
你站在房間一里，我問你，花瓶在哪？你回答我：“北京東城區(qū)五星級(jí)別墅區(qū) A 座房間一桌子上的那個(gè)花瓶”。這是絕對(duì)地址，這個(gè)地址你在哪里告訴對(duì)方，對(duì)方都可以憑這個(gè)地址找到這個(gè)花瓶，很完美，就是太羅嗦。
所以一般我們都會(huì)簡(jiǎn)單地說(shuō)：“我身邊桌子上的這個(gè)花瓶”。一樣很明確，但是有個(gè)前提，我得知道你在哪里，才能找到這個(gè)花瓶。因?yàn)檫@是以你為參照物的，找不到你，那么花瓶的位置也無(wú)從談起。然后你不能換位置，如果你跑到我家說(shuō)這句話，那指的就是我家的花瓶了。所以要想讓這個(gè)相對(duì)地址成立，你和花瓶的相對(duì)位置不能變化。
你說(shuō)這么看來(lái)相對(duì)地址除了簡(jiǎn)單也沒啥好處啊，不，當(dāng)你整體移動(dòng)一些相關(guān)聯(lián)的文件的時(shí)候他的作用就顯現(xiàn)出來(lái)了。比如還是剛才那個(gè)狀態(tài)，我把你家別墅（包括桌子花瓶還有房間里的你）整體打個(gè)包交給順豐寄到上海去了。到了上海打開一看，房間一里面一張桌子，桌子上是花瓶，你站在桌子旁邊，一切都沒變（也就是相對(duì)位置沒變哦），那么你現(xiàn)在說(shuō)：“我身邊桌子上的這個(gè)花瓶”，就還是這只花瓶沒錯(cuò)，但是你再說(shuō)：“北京東城區(qū)五星級(jí)別墅區(qū) A 座房間一桌子上的那個(gè)花瓶”，那就不好意思，在那個(gè)位置我找不到花瓶了，因?yàn)檫B房子我都給你搬到上海了。
現(xiàn)在理解了絕對(duì)地址和相對(duì)地址的一些特點(diǎn)，你就開始有些明白了，那么我們說(shuō)：“絕對(duì)地址是描述某個(gè)文件的位置，而相對(duì)地址是描述兩個(gè)文件間的位置關(guān)系”。當(dāng)我們移動(dòng)一個(gè)文件夾的時(shí)候，里面的每個(gè)文件的地址都發(fā)生了變化，但是他們之間的相互位置關(guān)系卻沒有變。
然后我們來(lái)做一個(gè)實(shí)例來(lái)講解一下哦，假設(shè)有如下目錄結(jié)構(gòu)：
http://coffee.zji.me/
那么簡(jiǎn)單解釋一下：
http://coffee.zji.me/這個(gè)網(wǎng)站下有兩個(gè)文件夾imgs和files；其中
imgs文件夾下只有一張shuaige.png的圖片；
files文件夾下有兩個(gè)文件index.html和photo.jpg，還有一個(gè)叫做miao的文件夾；
miao文件夾下有一張圖片huamao.jpg
好了，我們假設(shè)你讀得很認(rèn)真，你完全理解了我上邊所說(shuō)的這些亂七八糟的東西，那么下邊便是很輕松的學(xué)習(xí)關(guān)鍵技巧的時(shí)刻了。如果你看到這里發(fā)現(xiàn)上面的都沒看……那就記住下面的方法，用的多了自然也就明白了。
現(xiàn)在我們都以 index.html 為參照物（其實(shí)就是在哪個(gè)文件里寫就以哪個(gè)文件為參照物），我們?cè)? index.html 里面寫 photo.jpg 的相對(duì)地址?？次以趺醋觯?/p>
先寫下兩個(gè)文件的絕對(duì)地址：
然后去掉兩者前邊的相同部分，得到：
index.html
photo.jpg
現(xiàn)在我們的參照物（index.html）只剩下文件名了，那么下面的就是我們要的相對(duì)地址了—— photo.jpg
然后做個(gè)練習(xí)，寫 huamao,jpg 在 index.html 中的相對(duì)網(wǎng)址，一樣的辦法，先寫下他們的絕對(duì)網(wǎng)址：
然后去掉相同部分：
index.html
miao/huamao.jpg
index.html 的網(wǎng)址就剩下文件名了，那下面的就是我們要的相對(duì)地址了——miao/huamao.jpg
這個(gè)簡(jiǎn)單到混蛋的辦法是不是很好理解？我們來(lái)看點(diǎn)復(fù)雜 shuaige.png 在 index.html 里面的相對(duì)地址怎么寫？
按著上邊的辦法，列出絕對(duì)地址：
去掉相同部分：
files/index.html
imgs/shuaige.png
嘿，index.html 現(xiàn)在剩的可不只是文件名，還帶著一個(gè)文件夾呢，去重之后，如果參照文件剩下的不只是文件名，則在參照文件（index.html）上去掉一個(gè)文件夾，同時(shí)給目標(biāo)文件（shuaige.png）前面加上一個(gè) ../ 。如此重復(fù)操作，直到參照文件（index.html）只剩下文件名為止。
說(shuō)起來(lái)很復(fù)雜，做起來(lái)就簡(jiǎn)單了，簡(jiǎn)直是無(wú)腦的上面刪一個(gè)，下面加一個(gè)：
index.html
../imgs/shuaige.png
這樣就出來(lái)了?，F(xiàn)在解釋一下 ../ 代表向上一層文件夾，那么如果是 ../../ 就是向上兩層嘍～現(xiàn)在看看這兩種方法，想想上面的比喻，好好消化一下，可以不理解，但是要知道我都說(shuō)過(guò)些什么，等到后面用起來(lái)就理解了。
最后補(bǔ)充一句：你說(shuō)網(wǎng)址的我看明白了，但是在本地的時(shí)候怎么寫？一樣的 C:\windows\我是大帥哥.avi 這么寫文件絕對(duì)地址，其實(shí)你在文件上面右鍵屬性就可以找他的絕對(duì)地址了。然后按著上邊的方法做哦，唯一的問題是 \ 要換成 /。
本章學(xué)習(xí)卡片：卡片 12
本書是收費(fèi)的，不過(guò)交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多
