1-前端內(nèi)容介紹-Http協(xié)議

時間：2023-07-05 02:27:01 | 來源：網(wǎng)站運營

時間：2023-07-05 02:27:01 來源：網(wǎng)站運營

1-前端內(nèi)容介紹-Http協(xié)議：

1、web1.0時代的網(wǎng)頁制作

? 網(wǎng)頁制作是web1.0時代的產(chǎn)物，那個時候的網(wǎng)頁主要是靜態(tài)網(wǎng)頁，所謂的靜態(tài)網(wǎng)頁就是沒有與用戶進(jìn)行交互而僅僅供讀者瀏覽的網(wǎng)頁，我們當(dāng)時稱為“牛皮癬”網(wǎng)頁。

? 例如一篇QQ日志、一篇博文等展示性文章。在web1.0時代，用戶能做的唯一事情就是瀏覽這個網(wǎng)站的文字圖片內(nèi)容，這時用戶也不能像現(xiàn)在在大多數(shù)網(wǎng)站都可以評論交流（缺乏交互性）。

? 相信可能大多數(shù)人都聽過“網(wǎng)頁三劍客 Dreamweaver+Fireworks+Flash”吧，這個組合就是web1.0時代額產(chǎn)物

2、web2.0時代的前端開發(fā)

【前端開發(fā)】是從【網(wǎng)頁制作】演變而來的。

? 從2005年開始，互聯(lián)網(wǎng)進(jìn)入web 2.0時代，由單一的文字和圖片組成的靜態(tài)網(wǎng)頁已經(jīng)不能滿足用戶的需求，用戶需要更好的體驗。在web 2.0時代，網(wǎng)頁有靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

? 所謂動態(tài)網(wǎng)頁，就是用戶不僅僅可以瀏覽網(wǎng)頁，還可以與服務(wù)器進(jìn)行交互。舉個例子，你登陸新浪微博，要輸入賬號密碼，這個時候就需要服務(wù)器對你的賬號和密碼進(jìn)行驗證通過才行。

? web2.0時代的網(wǎng)頁不僅包含炫麗的動畫、音頻和視頻，還可以讓用戶在網(wǎng)頁中進(jìn)行評論交流、上傳和下載文件等（交互性）。這個時代的網(wǎng)頁，如果是用“網(wǎng)頁三劍客Dreamweaver+Fireworks+Flash”制作的，那是遠(yuǎn)遠(yuǎn)不能滿足需求。

? 現(xiàn)在網(wǎng)站開發(fā)無論是開發(fā)難度，還是開發(fā)方式上，都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫“網(wǎng)頁制作”，而是叫“web前端開發(fā)”。

? 所以，處于web2.0時代的你，如果要學(xué)習(xí)網(wǎng)站開發(fā)技術(shù)，就不要再相信所謂的“網(wǎng)頁三劍客Dreamweaver+Fireworks+Flash”，因為這個組合已經(jīng)是上個互聯(lián)網(wǎng)時代的產(chǎn)物。而且這個組合開發(fā)出來的網(wǎng)站問題也非常多，例如代碼冗余、網(wǎng)站維護(hù)困難（學(xué)習(xí)到后期，你會知道為什么不用這個組合了

3、前端能做什么？

? 公司官網(wǎng)（在PC通過瀏覽器來訪問公司網(wǎng)站）移動端網(wǎng)頁（在手機(jī)上來瀏覽公司信息、小游戲等）移動端APP（例如：淘寶、去哪兒旅游、攜程等）微信小程序（微信最新推出的功能，隨用隨裝，不占用手機(jī)空間）。前端開發(fā)所學(xué)技術(shù)由簡單到難，所以在很多網(wǎng)站上你會看到“七天入門前端”的視頻博客等等，也就是說一星期就學(xué)會了HTML+CSS。最基本的頁面你就可以書寫了。

4、前端開發(fā)都有哪些內(nèi)容

我們知道，用所謂的網(wǎng)頁三劍客已經(jīng)不能滿足需求了，那前端開發(fā)究竟要學(xué)習(xí)什么技術(shù)呢？網(wǎng)頁最主要由3部分組成：結(jié)構(gòu)、表現(xiàn)和行為。網(wǎng)頁現(xiàn)在新的標(biāo)準(zhǔn)是W3C，目前模式是HTML、CSS和JavaScript。

（1）HTML是什么

HTML，全稱“Hyper Text Markup Language（超文本標(biāo)記語言）”，簡單來說，網(wǎng)頁就是用HTML語言制作的。HTML是一門描述性語言，是一門非常容易入門的語言。（2）CSS

CSS，全稱“（層疊樣式表）”。以后我們在別的地方看到“層疊樣式表”、“CSS樣式”，指的就是CSS。（3）JavaScript

JavaScript是一門腳本語言HTML是網(wǎng)頁的結(jié)構(gòu)，CSS是網(wǎng)頁的外觀，而JavaScript是頁面的行為

如果我們把前端開發(fā)的過程比喻'建房子'，做一個網(wǎng)頁就像蓋（1）先把房子結(jié)構(gòu)建好(HTML)（2）建好房子后給房子裝修(CSS)，例如往窗戶上安上窗簾、往地板鋪上漂亮的瓷磚（3）裝修完成后，當(dāng)夜幕降臨的時候，我們要開燈(JavaScript)，這樣才能看得見里面

5、開發(fā)環(huán)境

1、瀏覽器

瀏覽器在本地也能打開html文件，瀏覽器就跟解釋器一樣，從上倒下，從左到右

全球共有五大瀏覽器廠商，我們主要以chrome為主

iechromefirfoxsafripresto#瀏覽器內(nèi)核不同，瀏覽器渲染引擎不同（后期考慮兼容性問題），其他瀏覽器都是使用這5款瀏覽器內(nèi)核2、瀏覽器歷史：

世界最早瀏覽器，網(wǎng)景瀏覽器（Netscape ）后來它想做操作系統(tǒng)，動了微軟的奶酪，微軟就想弄死他，微軟做的也特別的絕情，微軟利用windows操作系統(tǒng)的市場占有率，提供了免費瀏覽器ie,而且windows操作系統(tǒng)里還必須有. 中國最早瀏覽器ie6，國企內(nèi)就用ie6，瀏覽器不同，解析的標(biāo)簽標(biāo)準(zhǔn)不同，微軟太霸道，就不改標(biāo)準(zhǔn)，堅持不更新，后來谷歌和火狐搶占了市場，IE就傻逼了，目前也只有傻逼才用IE。。。市場越發(fā)地混亂，于是w3c（萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，W3C））成立，用來制定大家的統(tǒng)一標(biāo)準(zhǔn)#須知：學(xué)前端一半工作在考慮兼容性，目前html5在兼容性方面解決的比較好3、文件后綴名規(guī)范

#.htm和.html擴(kuò)展名的區(qū)別（1）DOS系統(tǒng)（win95或win98）下只能支持長度為3的后綴名，所以老版本的系統(tǒng)一直在用.htm后綴（2）但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的（3）如果文件后綴是.htm，毫無疑問，瀏覽器也可以兼容，但推薦使用.html

6、瀏覽器窗口輸入網(wǎng)址回車發(fā)生幾件事

1、瀏覽器朝服務(wù)端發(fā)送請求2、服務(wù)器接收請求（eg:請求百度首頁）3、服務(wù)器返回相應(yīng)的首頁（eg:返回一個百度首頁）4、瀏覽器接收相應(yīng) 根據(jù)特定的規(guī)則渲染頁面展示給用戶看#瀏覽器可以充當(dāng)很多服務(wù)器的客戶端 百度 騰訊視屏 優(yōu)酷視屏如何做到瀏覽器能夠跟很多不同的客戶端之間進(jìn)行數(shù)據(jù)交換 1.瀏覽器很牛逼 能夠自動識別不同服務(wù)端做不同處理 2.制定一個統(tǒng)一的標(biāo)準(zhǔn) 如果你想要讓你寫的服務(wù)端能夠跟客戶端之間做正常的數(shù)據(jù)交互 #那么你就必須要遵循一些規(guī)則

HTTP協(xié)議

超文本傳輸協(xié)議 用來規(guī)定服務(wù)端和瀏覽器之間的數(shù)據(jù)交互的格式...

1、該協(xié)議你可以不遵循 但是你寫的服務(wù)端就不能被瀏覽器正常訪問 你就自己跟自己玩2、你就自己寫客戶端 用戶想要使用 就下載你專門的app即可四大特性

1、基于請求響應(yīng)2、基于TCP/IP作用于應(yīng)用層之上的協(xié)議3、無狀態(tài) （1）不保存用戶的信息 eg:一個人來了一千次你都記不住 每次都當(dāng)他如初見 #由于HTTP協(xié)議是無狀態(tài)的，所以、后續(xù)出現(xiàn)了一些專門用來記錄用戶狀態(tài)的技術(shù) cookie、session、token...4、無/短鏈接 請求來一次我響應(yīng)一次 之后我們兩個就沒有任何鏈接和關(guān)系了 長鏈接:雙方建立連接之后默認(rèn)不斷開 websocket(后面講項目的時候會講)#請求數(shù)據(jù)格式 請求首行(標(biāo)識HTTP協(xié)議版本，當(dāng)前請求方式) 請求頭(一大堆k,v鍵值對) /r/n 響應(yīng)體#響應(yīng)狀態(tài)碼用一串簡單的數(shù)字來表示一些復(fù)雜的狀態(tài)或者描述性信息 1xx:服務(wù)器已經(jīng)成功接收了你的數(shù)據(jù)正在處理， 2xx:服務(wù)器成功響應(yīng)了你想要的數(shù)據(jù)(200 ok請求成功) 3xx:重定向 4xx:請求錯誤 404:請求資源不存在 403:當(dāng)請求不合法或者不符合訪問資源的條件 5xx:服務(wù)器內(nèi)部錯誤(500)#請求方式 1、get請求（朝服務(wù)器要數(shù)據(jù)） eg:輸入網(wǎng)址獲取對應(yīng)的內(nèi)容 2、post請求（朝服務(wù)器提交數(shù)據(jù)） eg:用戶登錄 輸入用戶名和密碼之后 提交到服務(wù)端后端做身份效驗#url:同一資源定位符（網(wǎng)址）