干貨！規(guī)劃師也能夠?qū)W習(xí)的前端常識(shí)part1

作為規(guī)劃師的你們是否有過(guò)這樣的經(jīng)歷，當(dāng)你的規(guī)劃能夠做成網(wǎng)頁(yè)拜訪的時(shí)分，各種富麗的網(wǎng)頁(yè)特效/交互展現(xiàn)是不是太招引了，這個(gè)時(shí)分你會(huì)特別崇拜前端工程師，覺(jué)得他們就是大神一樣的存在。其實(shí)“前端”說(shuō)簡(jiǎn)單不簡(jiǎn)單，說(shuō)難也并沒(méi)有很難，有些前端常識(shí)，規(guī)劃師也能夠?qū)W習(xí)運(yùn)用，乃至可能使規(guī)劃能力有所提高。下面就規(guī)劃師也能夠?qū)W習(xí)的前端常識(shí)，浪訊科技先來(lái)給我們講榜首部分內(nèi)容：

一、途徑聯(lián)系
先來(lái)看一個(gè)常見(jiàn)調(diào)用圖片的方法：
background:url(imges/01.jpg);
圖片、鏈接地址、款式文件、js文件……等都是常常需求外界支撐的東西，閱讀器通過(guò)html標(biāo)簽內(nèi)的各式url地址去逐個(gè)找到然后出現(xiàn)出來(lái)，一旦地址過(guò)錯(cuò)，比方找不到款式文件或許圖片，那網(wǎng)頁(yè)所出現(xiàn)出來(lái)的就不知道神馬鬼了。所以，盡管大多數(shù)文件都能夠閱讀挑選并不需求手動(dòng)去敲，可是了解個(gè)中聯(lián)系，對(duì)處理問(wèn)題也是有必定好處的。
如下圖，一個(gè)相對(duì)較完好的文件夾是醬紫的，包括主頁(yè)index和所需的款式文件、images、js等，哪怕款式文件就一個(gè)都要獨(dú)自建立一個(gè)文件夾，html文件一般放在其他文件的上層，可是html文件很多，或許分模塊的情況下也是需求建文件夾噠�？磦�(gè)人喜好啦……
index.html中要是需求引證images下的圖片01，地址為：images/01.jpg。

正常情況下，當(dāng)然不是一切東西都在一個(gè)頁(yè)面上處理啦，不只款式要獨(dú)自放在一個(gè).css文件中，一切圖片也是要獨(dú)自放個(gè)文件夾的。
不同層級(jí)間要引證其他地方的文件時(shí)途徑該怎樣寫(xiě)呢？下面舉幾類的比如。
1）同級(jí)

以index.html為參考點(diǎn)，若再增加一張圖片（此處為舉例增加的02.jpg文件） ,要引證與自己同等級(jí)文件，不必寫(xiě)其他了，直接文件名就OK了。例：url（02.jpg）;
2）下級(jí)

相同，以index.html為參考點(diǎn)，它要引證比他低一級(jí)的01.jpg，首要，01往上找，是它所屬的images文件夾，這個(gè)文件夾剛好與參考點(diǎn)同一級(jí)，即與01之間只跨一級(jí)，則運(yùn)用一個(gè)斜杠“/”,（向下兩級(jí)則是兩個(gè)斜杠哦）index想要引證images下的文件，首要得經(jīng)過(guò)images的同意，所以途徑還要帶上它的“簽名”，最終得來(lái)途徑則是：url（images/01.jpg）；
3）上級(jí)

以index.css 為參考點(diǎn),想引證02.jpg ,首要仍是得往上看，參考點(diǎn)歸于css文件夾，而02.jpg跟他爹“同輩”，可是不能直呼其名啊，所以用兩點(diǎn)“..”來(lái)替代，其實(shí)這兩點(diǎn)也能夠是總文件夾的替代名，由于對(duì)index.css來(lái)說(shuō)并無(wú)多大含義。
好了，找到規(guī)則了沒(méi)？假如index.css要找index.js文件該怎樣找捏？這個(gè)，留給我們考慮一下，嘿嘿……