一: 前端是什么
- 前端是什么:
前端通常是指，網(wǎng)站的前臺(tái)部分。包括網(wǎng)站的結(jié)構(gòu)層和表現(xiàn)層。
前端技術(shù)一般分為前端設(shè)計(jì)和前端開(kāi)發(fā)，前端設(shè)計(jì)可以理解為網(wǎng)站的視覺(jué)設(shè)計(jì)，由設(shè)計(jì)人員進(jìn)行效果圖的制作。前端開(kāi)發(fā)則是寫(xiě)出網(wǎng)站的前臺(tái)代碼，由前端工程師進(jìn)行實(shí)現(xiàn)，技術(shù)包含最基本的HTML+CSS+JavaScript，以及現(xiàn)在大火的HTML5、CSS3技術(shù)等。
前端頁(yè)面包含: PC端頁(yè)面以及移動(dòng)端頁(yè)面。
- 前端工程師在公司里是充當(dāng)著一個(gè)怎樣的角色:
1.前端工程師將設(shè)計(jì)人員所提供的效果圖使用代碼形式去生成網(wǎng)頁(yè)，利用HTML+CSS+JS等技術(shù)。
2.和設(shè)計(jì)人員不斷優(yōu)化用戶(hù)體驗(yàn)以及和后端人員溝通銜接不斷解決產(chǎn)品問(wèn)題以及后期維護(hù)工作。
3.如今的前端工程師已經(jīng)成熟到完全可以稱(chēng)之為:"一個(gè)偉大的工程師角色"，并且在一個(gè)項(xiàng)目中絕對(duì)占據(jù)著一個(gè)舉足輕重的地位！
- Web標(biāo)準(zhǔn):
1.是由W3C萬(wàn)維網(wǎng)聯(lián)盟組織來(lái)制定的Web標(biāo)準(zhǔn)。
2.Web標(biāo)準(zhǔn)是程序員制作網(wǎng)頁(yè)時(shí)要遵循的規(guī)范。
3.Web標(biāo)準(zhǔn)規(guī)范的分類(lèi)為:
結(jié)構(gòu)標(biāo)準(zhǔn)(HTML): 相當(dāng)于一個(gè)人的身體結(jié)構(gòu)。
表現(xiàn)標(biāo)準(zhǔn)(CSS): 相當(dāng)于給一個(gè)人進(jìn)行化妝, 讓她變得更漂亮。
行為標(biāo)準(zhǔn)(Javascript): 相當(dāng)于一個(gè)人的動(dòng)作, 比如她會(huì)唱歌, 會(huì)跳舞。
二: 訪問(wèn)互聯(lián)網(wǎng)的原理
- 我們每天進(jìn)行的上網(wǎng), 其實(shí)就是請(qǐng)求數(shù)據(jù):
網(wǎng)頁(yè)上的內(nèi)容，怎么就被我們看見(jiàn)了？什么是上網(wǎng)？
我們先不直接解決這個(gè)問(wèn)題，我們先做一個(gè)小實(shí)驗(yàn)。
在我們每個(gè)人的電腦里面，都有一個(gè)神秘的文件夾：
C:\Users\LZH\AppData\Local\Microsoft\Windows\Temporary Internet Files
注:LZH是我個(gè)人電腦的用戶(hù)名稱(chēng)，每個(gè)人是不一樣的。
這個(gè)文件夾叫做臨時(shí)文件夾（文件夾知道存在就可以了，不必自己試著去找）。
我們清空這個(gè)文件夾中的全部?jī)?nèi)容后，此時(shí)此文件夾為空。
這時(shí)我們打開(kāi)IE瀏覽器，看幾個(gè)網(wǎng)頁(yè)。結(jié)果，這個(gè)臨時(shí)文件夾中就多了很多的內(nèi)容。
仔細(xì)一看內(nèi)容都是一些圖片文件以及.html+.css+.xml等文件。也就是剛剛我們打開(kāi)網(wǎng)頁(yè)時(shí)顯示的圖片，網(wǎng)頁(yè)文件等，都存放在了這個(gè)臨時(shí)文件夾中。
通過(guò)這個(gè)實(shí)驗(yàn)，我們可以得出結(jié)論：上網(wǎng)的時(shí)候，是有真實(shí)的、物理的文件傳輸?shù)模?br> 所以我們經(jīng)常感覺(jué)第二次打開(kāi)網(wǎng)頁(yè)，比第一次快，這是因?yàn)榈谝淮未蜷_(kāi)網(wǎng)頁(yè)的時(shí)候，網(wǎng)頁(yè)中所有的圖片和其它文件等都已經(jīng)存到我們電腦硬盤(pán)的這個(gè)臨時(shí)文件夾里了。
所以這也能夠解釋?zhuān)瑸槭裁疵看味加?60清理時(shí)能清理一堆垃圾，可釋放很多硬盤(pán)空間。
我們發(fā)現(xiàn)，僅瀏覽了一個(gè)新聞首頁(yè)后，這個(gè)臨時(shí)文件夾就會(huì)出來(lái)那么多各種后綴名不同類(lèi)型的文件，所以現(xiàn)在我們的心中，就要有一個(gè)初步的認(rèn)識(shí)：請(qǐng)求網(wǎng)頁(yè)數(shù)據(jù)時(shí)，網(wǎng)頁(yè)并不是指的一個(gè)文件，而是指一堆文件。
現(xiàn)在我們可以回答剛才的問(wèn)題了，“上網(wǎng)” 究竟是什么？
答案：上網(wǎng)就是請(qǐng)求數(shù)據(jù)，也就是文件傳輸。
而服務(wù)器上存放著網(wǎng)頁(yè)的相關(guān)文件，包括html文件、css文件、js文件、圖片文件等。
當(dāng)我們打開(kāi)瀏覽器，瀏覽網(wǎng)頁(yè)，我們的計(jì)算機(jī)就會(huì)對(duì)這些網(wǎng)頁(yè)的相關(guān)文件發(fā)出HTTP請(qǐng)求。
當(dāng)服務(wù)器接收到請(qǐng)求之后，會(huì)把這些文件通過(guò)HTTP協(xié)議，傳輸?shù)轿覀兊挠?jì)算機(jī)當(dāng)中（也就是保存到了剛才那個(gè)臨時(shí)文件夾中）。
于是這些文件，將在我們計(jì)算機(jī)本地的瀏覽器中，進(jìn)行渲染、呈遞。
于是第二次你再打開(kāi)剛剛訪問(wèn)的網(wǎng)頁(yè)后，會(huì)發(fā)現(xiàn)打開(kāi)的更快些，這是因?yàn)槲覀冎霸L問(wèn)時(shí)已經(jīng)將當(dāng)前訪問(wèn)的網(wǎng)頁(yè)它的相關(guān)文件全部緩存到了我們的電腦硬盤(pán)里。
也就是說(shuō)，本來(lái)人家文件好好的在服務(wù)器上睡大覺(jué)，你一瀏覽網(wǎng)址，就把這些文件傳輸?shù)奖镜赜?jì)算機(jī)硬盤(pán)里了。
三: HTTP協(xié)議
- 什么是HTTP協(xié)議:
即超文本傳輸協(xié)議：Hypertext Transfer Protocol
這是一個(gè)文件的傳輸協(xié)議，我們?cè)谏暇W(wǎng)的時(shí)候，所有的文件都是通過(guò)這個(gè)HTTP協(xié)議，從服務(wù)器上傳輸文件到我們的電腦里面的。
現(xiàn)在我們必須要樹(shù)立一個(gè)思想，就是每一個(gè)網(wǎng)址，都對(duì)應(yīng)著服務(wù)器上的文件。
如: http://www.liuzihao.com/person.html (虛擬網(wǎng)址,不存在)
而服務(wù)器上面肯定存放著名稱(chēng)為person.html文件。
如: http://www.liuzihao.com/ (虛擬網(wǎng)址,不存在)
雖看似沒(méi)有精確到某一個(gè)文件，但是有一個(gè)規(guī)定，就是index.html是默認(rèn)的首頁(yè)文件。這樣訪問(wèn)的結(jié)果便是打開(kāi)了默認(rèn)的首頁(yè)文件。
注: index就是英語(yǔ)“目錄”的意思。
如: http://www.liuzihao.com/fruits/orange.html (虛擬網(wǎng)址,不存在)
意為服務(wù)器上面會(huì)有一個(gè)fruits文件夾，而這個(gè)文件夾里面有一個(gè)orange.html文件。
簡(jiǎn)單概括:
網(wǎng)頁(yè)是真實(shí)物理的文件。并且一個(gè)網(wǎng)頁(yè)是很多的物理文件組成的：如圖片文件、html文件、css文件、js等文件。這些文件要通過(guò)專(zhuān)用軟件上傳到服務(wù)器上。然后用戶(hù)再通過(guò)瀏覽器訪問(wèn)網(wǎng)址發(fā)送了HTTP請(qǐng)求，此時(shí)服務(wù)器上面的文件就會(huì)通過(guò)HTTP協(xié)議再傳輸?shù)接脩?hù)電腦中的臨時(shí)文件夾中，進(jìn)而在用戶(hù)電腦中執(zhí)行、渲染、以及呈遞。
- 服務(wù)器:
說(shuō)了這么多服務(wù)器，那么服務(wù)器又到底是什么呢?
1.服務(wù)器就是計(jì)算機(jī)，只不過(guò)它比咱們平時(shí)用的計(jì)算機(jī)配置牛逼了很多，并且它24小時(shí)不斷電，不關(guān)機(jī)。
2.服務(wù)器上存儲(chǔ)著用戶(hù)訪問(wèn)網(wǎng)頁(yè)時(shí)的相關(guān)文件。一旦有訪問(wèn)者瀏覽網(wǎng)站時(shí)，服務(wù)器就將屬于這個(gè)網(wǎng)站的相關(guān)文件發(fā)送給訪問(wèn)者，此時(shí)訪問(wèn)者的瀏覽器就能顯示這個(gè)網(wǎng)站的相關(guān)內(nèi)容了。
3.服務(wù)器一旦關(guān)機(jī)，網(wǎng)站就無(wú)法訪問(wèn)了。服務(wù)器必須正常開(kāi)啟，網(wǎng)站才可正常訪問(wèn)。
服務(wù)器
