這個網(wǎng)址。一般來說，當(dāng)用戶輸入一個域名時，是在請求一個 HTML 資源。當(dāng)他完成域名解析之后，他的瀏覽器會向
有時候 Web 服務(wù)器直接就可以返回用戶的請求了；有時候 Web 服務(wù)器還需要向數(shù)據(jù)庫查詢一些數(shù)據(jù)，然后才能把處理結(jié)果返回給用戶。
當(dāng)用戶的瀏覽器拿到服務(wù)器返回的 HTML 資源之后，就開始解析并顯示 HTML 的內(nèi)容了。
一般來說，HTML 頁面需要 CSS 資源來描述頁面的樣式。比如瀏覽器在解析 HTML 時發(fā)現(xiàn)了一個 CSS 外鏈abc.com/a.css，它就會去請求這個資源。
HTML 頁面往往還需要加載外部的 JS 資源，比如abc.com/a.js，此時瀏覽器同樣會向服務(wù)器請求這個資源。
當(dāng)所需的資源都加載完成之后，這個頁面就可以提供完整的外觀和功能了。整個過程差不多就是這個樣子了。
我們會發(fā)現(xiàn)，這道線左側(cè)的事情發(fā)生在瀏覽器端，我們稱之為 “前端”；右側(cè)的事情發(fā)生在服務(wù)器端，稱為 “后端”。（“前端” 之所以叫 “前端”，是因為它離用戶更近一些。）
大家都學(xué)過后端開發(fā)的相關(guān)課程，對后端這一塊應(yīng)該都比較熟悉了。那問題來了：在上面這個過程中，后端有哪些局限？
這意味著，只有當(dāng)用戶下一次向服務(wù)器請求資源時，服務(wù)器才有機(jī)會再次決定用戶看到的內(nèi)容。那么，用戶什么時候再向后端請求資源呢？
第一種情況是 “導(dǎo)航動作”。比如用戶刷新頁面、點(diǎn)擊鏈接、點(diǎn)擊瀏覽器的前進(jìn)/后退等等。
第二種情況是用戶提交表單。表單是最傳統(tǒng)的頁面交互方式之一，提交表單時瀏覽器會向服務(wù)器發(fā)出新請求——這意味著瀏覽器會跳轉(zhuǎn)到一個新的地址，服務(wù)器會在新頁面中顯示表單的處理結(jié)果。
還有一種特殊情況，就是服務(wù)器在給瀏覽器返回 HTML 資源時，在頁面中插入一個特殊的標(biāo)記，瀏覽器看到這個標(biāo)記就會在一定的時間后自動刷新當(dāng)前頁面或跳轉(zhuǎn)到其它頁面，相當(dāng)于服務(wù)器強(qiáng)制用戶再次發(fā)出請求?？上攵?，這種非用戶意愿驅(qū)動的頁面跳轉(zhuǎn)行為并不討人喜歡，因此已經(jīng)不常用了。
在傳統(tǒng)網(wǎng)頁中，上述幾種用戶與服務(wù)器之間的交互方式也算夠用了。不過隨著網(wǎng)頁形態(tài)的不斷演進(jìn)，用戶對網(wǎng)頁體驗提出了更高的要求，很多時候網(wǎng)頁不僅僅是一篇靜止的文檔，而更像是一個應(yīng)用程序，用戶隨時可能與之互動。這個時候，前端的價值就體現(xiàn)出來了。
在前端與用戶的交互過程中，有些事情光靠前端就可以做出響應(yīng)。比如我們在網(wǎng)頁上做了一個計算器的功能，當(dāng)用戶輸入算式之后，JS 就可以直接計算出結(jié)果并顯示給用戶。整個過程不需要服務(wù)器的參與就可以完成。
但有些事情，光有前端是無法完成的。此時前端就需要交給后端來處理，拿到處理結(jié)果之后再交給用戶。在這個過程中，前端可以讓用戶一直停留在當(dāng)前頁面，交互過程具有良好的連續(xù)性。
那么，前端如何把任務(wù)交給后端并拿到后端處理的結(jié)果呢？主要有兩種方式：Ajax 和 Socket 連接。
Ajax 是最常見的前后端交互方式。它以 “請求→響應(yīng)” 的方式來完成前后端的信息傳遞。傳統(tǒng)的表單交互需求幾乎都可以由 Ajax 改造為 “原地提交并獲取反饋” 的交互方式，不需要跳轉(zhuǎn)頁面，從而有效提升用戶體驗。
而對于實時性比較高的場景，Socket 連接就是一個更好的選擇。它的工作方式是前后端建立一個持續(xù)的連接，信息可以隨時由前端發(fā)向后端，或由后端推送到前端。如果我們要建立一個實時對話的應(yīng)用，通常就會用到 Socket 連接了。
接下來，我們就會說到 “前端的分層架構(gòu)”。這個架構(gòu)的原則就是 “讓合適的技術(shù)去做合適的事情”。一個網(wǎng)頁從邏輯上可以視為這三層的有機(jī)結(jié)合體：
?。哼@一層的作用是表述一個頁面中有哪些信息，以及這些信息之間的關(guān)系是什么。這一層在技術(shù)上是由 HTML 來實現(xiàn)的。
?。哼@一層決定了頁面中的信息會以什么樣的外觀呈現(xiàn)出來。這一層由 CSS 來實現(xiàn)。
：這一層控制了頁面如何與用戶進(jìn)行交互。在傳統(tǒng)的展示型網(wǎng)頁中，可能只需要 “結(jié)構(gòu)層” 和 “表現(xiàn)層” 就足以提供完整的功能；而現(xiàn)代網(wǎng)頁承載了越來越多的交互，這就推動 “行為層” 的能力不斷增強(qiáng)。這一層由 JS 來實現(xiàn)。
比如我是一個百姓網(wǎng)的用戶，我打開了 “用戶中心” 中的 “我發(fā)布的信息” 這個頁面。
這個頁面的 HTML 描述了信息以及信息的結(jié)構(gòu)。即使沒有 CSS 和 JS 的輔助，這個頁面仍然可以呈現(xiàn)出可理解的內(nèi)容（參見上圖）。頁面頂部是一些導(dǎo)航元素，接下來的 “顯示中的信息” 是一個標(biāo)題，它又引出了一個列表。這個列表自然就是我在百姓網(wǎng)發(fā)布的所有信息了。（除了 “顯示中的信息” 以外，頁面后半段還有 “已刪除的信息”，這里不再贅述。）
接下來，我們會在表現(xiàn)層下功夫，通過 CSS 來為頁面中的各個元素設(shè)定外觀。經(jīng)過這一層的修飾之后，頁面中的內(nèi)容更加美觀了；更重要的是，各元素的功能職責(zé)也更加直觀易懂了（參見上圖）。
這已經(jīng)是一個挺不錯的網(wǎng)頁了，但接下來，我們還會通過 JS 來豐富它的功能，提升用戶的使用效率。
作為信息的發(fā)布者，我可能需要修改某條信息的內(nèi)容，或?qū)λM(jìn)行 “刷新” 之類的操作。在傳統(tǒng)的交互中，我需要在這個列表中點(diǎn)擊需要操作的信息，然后在信息的詳情頁選擇合適的操作。
我們可以把這個流程簡化一下：我們在這個列表中為每條信息添加一個操作按鈕，當(dāng)用戶點(diǎn)擊某條信息的操作按鈕時，我們就在頁面中彈出一個操作面板，用戶可以直接選擇想要的操作，減少了中間環(huán)節(jié)（參見上圖）。
由此可見，結(jié)構(gòu)層、表現(xiàn)層、行為層這三者各有所長，共同構(gòu)造了一個功能完備、體驗良好的網(wǎng)頁出來。
除了基本的 “三大塊” 之外，作為前端工程師，我們還需要掌握以下知識和技能：
?。河捎谇岸速Y源都是瀏覽器通過網(wǎng)絡(luò)下載的，因此我們有必要了解相關(guān)的網(wǎng)絡(luò)協(xié)議。
?。呵岸舜a運(yùn)行在瀏覽器中，我們需要了解瀏覽器的各種特性，以及瀏覽器向我們提供的各種接口。
?。鹤尵W(wǎng)頁更快，減少用戶的等待，這也是前端工程師面臨的重要課題。優(yōu)化網(wǎng)頁的前端性能，需要我們具備上面兩項知識，并且掌握性能優(yōu)化相關(guān)的工具和方法。
?。壕W(wǎng)頁信息不僅包含文字，還包含圖片、視頻等多媒體信息。圖片作為最常用媒體資源，需要我們掌握與其相關(guān)的技能。比如了解各種圖片格式適用的場景、基本的圖片處理方法等等。
?。ㄔ谥v座中設(shè)立了一個 demo 環(huán)節(jié)，我會現(xiàn)場演示如何從零開始創(chuàng)建一個簡單的網(wǎng)頁，并實踐 “前端的分層架構(gòu)” 這一指導(dǎo)思想。）
前面我們已經(jīng)介紹了前端技術(shù) “三大塊”，然而在如今，當(dāng)我們在編寫這三塊的代碼時，已經(jīng)不再 “裸寫” 了。這意味著我們在開發(fā)階段編寫的代碼與實際在瀏覽器環(huán)境中運(yùn)行的代碼已經(jīng)不一樣了，詳細(xì)來說：
采用了 Jade 和 Jedi 這兩種模板語言。在上圖的代碼中，我們僅僅使用了模板語言最基本的標(biāo)記語法，還沒有插入使用模板語言的任何邏輯能力。僅此一步，就可以看出模板語言帶來的好處。
原先我們在寫 HTML 代碼時，會花費(fèi)大量的精力在、/、這樣的語法噪音上；同時，識別標(biāo)簽的嵌套關(guān)系也很費(fèi)眼。幸運(yùn)的是，Jade 和 Jedi 這樣的現(xiàn)代模板語言把前端工程師解放了出來。它們通過縮進(jìn)來表達(dá)嵌套關(guān)系，層級關(guān)系一目了然；語法更精練，表現(xiàn)力更強(qiáng)。
在 CSS 方面，預(yù)處理器一方面通過更簡潔的語法減輕開發(fā)者的書寫負(fù)擔(dān)，另一方面通過內(nèi)置的邏輯能力增強(qiáng)了代碼的表現(xiàn)力。舉個例子，在使用原生 CSS 來寫代碼時，不同元素采用的相同顏色只能分散在代碼各處；而采用了 CSS 預(yù)處理器之后，我們可以把相同意義的顏色通過變量的形式抽象出來，然后在代碼各處調(diào)用即可。這樣不僅便于后期維護(hù)，在平時讀代碼時也更容易理解代碼意圖。
在 JS 方面，我們開始享受 ES6+ 帶來的新特征福利。ES（ECMAScript）是定義 JS 這門語言的標(biāo)準(zhǔn)規(guī)范，從第六版開始，ES 以每年一版的節(jié)奏持續(xù)快速地擴(kuò)展著 JS 語言的能力。
在以往，如果我們要實現(xiàn) “在數(shù)組中找出符合特定條件的成員” 的需求，往往需要借助 Underscore 這樣的工具庫，調(diào)用它的_.find()方法。而在 ES6 中，語言本身就擴(kuò)展了數(shù)組的能力，我們只需要直接調(diào)用Array#find()接口即可。另外，像箭頭函數(shù)這樣的新語法也可以令代碼進(jìn)一步簡化。
在 HTML、CSS、JS 這三大塊，我們放棄 “裸寫”，采用 “更高級” 語言的目的在于：
當(dāng)然，采用這些更高級的語言也不是完全沒有成本的。我們在開發(fā)階段所用的語言已經(jīng)不是純粹的 HTML、CSS、JS 了，瀏覽器無法直接識別和運(yùn)行。因此，當(dāng)我們放棄 “裸寫”，也就意味著：
?。耗K化是最常見的編程實踐之一，令我們的代碼組織更加清晰、易維護(hù)。ES6 為 JS 增加了完善的模塊化方案，我們的日常開發(fā)也已經(jīng)遷移到了 ES6 模塊規(guī)范之下。
?。喝绾螌㈤_源社區(qū)中的優(yōu)秀組件為我所用？這就不能不提 “npm” 這個最主流的 JS 包管理器。前端界優(yōu)秀的開源項目幾乎都發(fā)布到了 npm 的包倉庫，我們?nèi)粘ｉ_發(fā)中用到的第三方庫也都是由 npm 來管理的。
打包工具可以把我們寫的模塊化的源碼和第三方包整合到一起，形成頁面所需的完整 JS 資源。“包管理器”、“模塊化”、“打包工具” 的相互結(jié)合，基本上就是日常的 JS 代碼組織方式。
：在傳統(tǒng)的前端開發(fā)中，HTML、CSS、JS 這三塊的代碼有各自獨(dú)立的文件，這些文件往往也分散在不同的目錄結(jié)構(gòu)中。
如果頁面功能區(qū)塊的劃分足夠清晰，開發(fā)者就可以用 “組件” 的概念來把頁面拆分，整個頁面會被視為多個組件的嵌套和組合；同時，開發(fā)者也傾向于把每個組件相關(guān)的 HTML、CSS、JS 代碼整合到同一個目錄（或同一個文件）中，便于管理和維護(hù)。
這就是 “組件化” 的開發(fā)模式。要實現(xiàn)這樣的開發(fā)模式，通常需要前端框架和構(gòu)建工具的配合。
?。篐TML5 的 History API 為前端提供了控制瀏覽器導(dǎo)航行為的能力，配合 Ajax 無刷新更新頁面內(nèi)容的特性，我們可以在一個頁面內(nèi)實現(xiàn)應(yīng)用的多視圖切換，避免頁面的頻繁跳轉(zhuǎn)，提供類似桌面應(yīng)用的體驗。比如 Gmail 等產(chǎn)品就是典型的單頁應(yīng)用模式，百姓網(wǎng)的大多數(shù)后臺系統(tǒng)也都是單頁應(yīng)用。
修真院內(nèi)容部傾力打造，修真院技術(shù)總監(jiān)沁修主講，web工程師零基礎(chǔ)全能課第一講！初識前端1、前端開發(fā)是什么？2、前端開發(fā)有前途嗎？3、前端開發(fā)哪里學(xué)？4、前端發(fā)展5、對初學(xué)者的建議6、學(xué)習(xí)html入門7、學(xué)習(xí)css入門1.前端開發(fā)是什么？前端開發(fā)是從網(wǎng)頁制作演變而來。早期的網(wǎng)頁制作主要內(nèi)容都是靜態(tài)的，以文字圖片為主，用戶使用網(wǎng)站也以瀏覽為主。隨著互聯(lián)網(wǎng)的發(fā)展，現(xiàn)代網(wǎng)頁更佳美觀，交互效果顯著，功能更加強(qiáng)大。因此現(xiàn)在的前端開發(fā)的主要技術(shù)通常是指html、css、js技術(shù)和一些開發(fā)框架的使用。
2.前端開發(fā)有前途嗎？如果在8年10年以前這么問，或許很多人會思考一下，說：不知道，應(yīng)該沒后端編程有前途吧或者直接說：web前端有啥??？不就是個美工嗎不就是個頁面仔嗎？不就寫個網(wǎng)頁、js嗎？工資又低。。。。然而現(xiàn)在？隨著html5的崛起，css3的風(fēng)靡，隨著nodejs 的出現(xiàn)，JavaScript這個最容易被人誤解的語言，終于散發(fā)了它本該有的光芒。Javascript這個牛X的歷史產(chǎn)物，現(xiàn)在真的可以說是萬能的，至少在web層面是這樣，交互、效果、數(shù)據(jù)操作、娛樂游戲、操作文件io等等。而且由于現(xiàn)在是web應(yīng)用時代，各種尺寸的電子設(shè)備增長式的爆發(fā)，只要和屏幕有關(guān)的就是顏值，顏值代表了一切，可以說是前途一片光明；html5、網(wǎng)頁游戲風(fēng)靡全球，需要頁面展現(xiàn)的東西都是前端范疇，前途一片光明；目前世界上最多的可視化物質(zhì)是什么？是網(wǎng)頁，網(wǎng)頁 ，網(wǎng)頁，據(jù)統(tǒng)計現(xiàn)在全世界有億級別的網(wǎng)頁，這是什么概念，前途一片光明；最最直觀的：前端的工資從前幾年的平均幾K，到現(xiàn)在的10k、20k ，真的是前途一片光明！
3.前端開發(fā)哪里學(xué)？前端開發(fā)應(yīng)該在哪里學(xué)怎么學(xué)？通常有3種選擇：一是報班，效果好但價格貴對時間要求高，不是所有人都能拿得出那么多時間和金錢去學(xué)習(xí)的。二是自學(xué)，經(jīng)濟(jì)實惠但缺點(diǎn)是缺少指導(dǎo)缺少方向，如果沒有出眾的意志力規(guī)劃力是很難學(xué)下去的；三是報名線上課程，優(yōu)點(diǎn)是價格相對便宜，通常有一個集體可以探討問題，有老師指導(dǎo)方向，效果要比自學(xué)好很多但缺點(diǎn)就是可能沒有報班效果顯著，比自學(xué)要貴一點(diǎn)。因此到底該怎么去選擇還是要看個人具體的情況去對癥下藥了。還有許多人總是愛問，我現(xiàn)在多少歲什么學(xué)歷什么專業(yè)什么性別我適合學(xué)XXX嗎？這種問題其實沒太大意義，最重要的是知道一句話：種一棵樹最好的時間是在十年前，其次是現(xiàn)在。只要立即去學(xué)，比什么都強(qiáng)。
4.前端發(fā)展前端的發(fā)展是經(jīng)歷了一些階段性的發(fā)展的：在最開始那些年是一個前后端不分的蠻荒時代，那個時候前后端沒有分離，程序員是又當(dāng)?shù)之?dāng)媽，要做前端又要做后端。代碼各種耦合在一起，服務(wù)器壓力巨大，因為服務(wù)器會受到各種http的請求例如靜態(tài)的css，js，圖片等，一旦服務(wù)器出現(xiàn)問題，前后臺一起玩兒完，用戶體驗特別差。而且開發(fā)上也是，UI出好設(shè)計圖之后，必須先切html頁面，再來套jsp等數(shù)據(jù)化的內(nèi)容。開發(fā)時間變長，出錯率也非常高如果html發(fā)生變更，就更慘了，可以說是開發(fā)效率奇低。后來隨著開發(fā)和應(yīng)用的需求變化，逐漸進(jìn)入到了前后端分離的文明時代。在文明時代的第一階段，js通常使用原生js，但這樣做的缺點(diǎn)也很明顯：首先是js語言設(shè)計比較草率，一些原生的api并不好用，因此需要更多代碼來解決瀏覽器的兼容問題，需要大量的時間精力，對開發(fā)人員要求也比較高。因此在第二階段，為了解決原生js晦澀難懂還不好用的問題，出現(xiàn)了jquery等框架解救了萬千開發(fā)人員。和js相比，這些庫的語法更簡單，可以很容易地瀏覽文檔，選擇元素，處理事件等，也降低了開發(fā)人員的門檻。到了第三階段，因為隨著互聯(lián)網(wǎng)的發(fā)展，項目越來越大，前后端分離后的開發(fā)工作量越來越多的轉(zhuǎn)移到前端上來。一個簡單的jquery庫或者是underscore庫等等已經(jīng)難以管理控制整個項目了，代碼變得越來越復(fù)雜難以修改。這個時候就迫切的需要將代碼更合理的劃分以便于開發(fā)和管理，因此誕生了MVC這種取自于后端的概念沿用到前端來。M是模型model用于數(shù)據(jù)保存V是視圖view用于用戶界面繪制C是控制器controller用于業(yè)務(wù)邏輯這就將代碼分層，成為了我們基本的MVC框架。當(dāng)然還有一些框架提出了MVVM模式，其實就是用View Model代替了Controller，成為了簡化的Controller這樣做唯一的作用就是為view提供處理好的數(shù)據(jù)，不含其它任何邏輯，實現(xiàn)視圖與數(shù)據(jù)模型的強(qiáng)耦合，數(shù)據(jù)的變化會實時反映在view上，不再需要手動處理。
5.對初學(xué)者的建議第一，梳理信心，堅定目標(biāo)。只要相信自己可以就一定可以。第二，多練習(xí)多寫，好的代碼是寫出來不是看出來的。第三，不要停止學(xué)習(xí)，互聯(lián)網(wǎng)的發(fā)展特別快，可能快過其他任何領(lǐng)域，因此不要有一次學(xué)習(xí)就可以工作終身的想法。第四，開放的心態(tài)，去擁抱變化，不斷嘗新，并且停止?fàn)幷撜Z言和工具，把精力投放在更合適的領(lǐng)域。
6.學(xué)習(xí)html入門學(xué)習(xí)html首先認(rèn)識一下運(yùn)行于瀏覽器上幾門語言：html，css和javascript。html是一門標(biāo)記性語言，負(fù)責(zé)描述網(wǎng)頁的骨架，簡單來說就是把網(wǎng)頁分割成一個個的矩形，然后把這些矩形嵌套起來，形成層級關(guān)系。CSS是一門裝飾性的語言，負(fù)責(zé)描述這里面矩形的大小位置背景等外觀。javascript則是一門腳本語言。負(fù)責(zé)定義網(wǎng)頁的行為，定義了哪個矩形在什么時候做什么事情。值得開心的是js是一門非常容易入門的弱類型語言，但值得引起警惕的是，js也屬于一門復(fù)雜的語言它的復(fù)雜度即使是放在非腳本語言中來衡量，也是不容小覷的。因此學(xué)習(xí)它的過程中千萬不能掉以輕心。首先來看一下html元素的語法：pthis is content/p元素通常是由開始標(biāo)簽加閉合標(biāo)簽加上內(nèi)容組成，標(biāo)簽由英文尖括號括起來比如htmlp這些就是標(biāo)簽，結(jié)束標(biāo)簽要比開始標(biāo)簽多一個斜杠。另外元素可以防止于其他元素之中，無限極的嵌套。接下來看一個最簡單的網(wǎng)頁代碼：!DOCTYPE htmlhtml lang=“en”headmeta charset=UTF-8titleDocument/title/headbodyh1this is a head title/h1h6this is a head title too/h6pthis is a param/pullithis is a list/lilithis is a list.../li/ul/body/html首先是doctype文檔類型。在html剛剛出現(xiàn)的時期，文檔類型是用來連接一些應(yīng)該遵守的規(guī)則，有點(diǎn)像是自動校正等。然而現(xiàn)在大家都不用管文件類型，只是因為歷史原因還必須包含在代碼中。html，這個元素包含了整個頁面的內(nèi)容，有時也被稱為根元素。head，這個元素可以包含想添加的任意內(nèi)容，但是不會被用戶所看到。通常包括想讓搜索引擎搜索到的關(guān)鍵字、頁面描述、css樣式表和字符編碼聲明等等。body，這個元素包含了想被用戶看到的內(nèi)容，不管是文本，圖片還是多媒體等等。meta charset=“UTF-8”，這個元素指定了字符編碼，可以避免出現(xiàn)亂碼等問題。title，這個元素設(shè)置了頁面的標(biāo)題，顯示在瀏覽器標(biāo)簽頁上。h1-h6，標(biāo)題元素，指定文章的標(biāo)題和子標(biāo)題，它包括6個級別從1到6.p，這個元素用來指定段落內(nèi)容的。ul/ol，列表元素其中ul是無序列表，其中的順序并不重要比如購物清單，這種就放在ul中；ol是有序列表，每一項li都會默認(rèn)自帶數(shù)字。元素還分為塊級元素和內(nèi)聯(lián)元素。塊級元素在頁面中以塊的形式展現(xiàn)，一個塊級元素會新開始一行并且盡可能撐滿容器。比如div p h1-h6 header footer section等。一個以block形式展現(xiàn)的塊級元素不會被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級元素中。內(nèi)聯(lián)元素也叫行內(nèi)元素，通常出現(xiàn)在塊級元素中并包裹文檔內(nèi)容的一小部分，而不是一整個段落或者一組內(nèi)容。內(nèi)聯(lián)元素不會導(dǎo)致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素a或span包裹一些文字，或者強(qiáng)調(diào)元素em和 strong。
7.學(xué)習(xí)css入門在css中，選擇器是一種模式，用于選擇需要添加樣式的元素。最常見的選擇有：選擇器說明例子*選擇所有元素*id選擇id為intro的元素#introclass選擇class名為navs的元素.navselement選擇所有p元素p結(jié)構(gòu)選擇所有的div和p元素選擇div內(nèi)部的所有p元素選擇父元素為div元素的所有p元素選擇緊鄰在div元素之后的所有p元素div, pdiv pdiv pdiv + p學(xué)習(xí)css首先要學(xué)習(xí)的概念是盒子模型
盒子模型有5種主要屬性：寬和高讓盒子有基本的形狀大??；border是盒子的邊框，可以設(shè)置厚度和基本形態(tài)以及顏色；padding是沿著border在內(nèi)部產(chǎn)生的一個邊距，讓盒子內(nèi)部的內(nèi)容和邊框產(chǎn)生距離；margin則是沿著border在外部產(chǎn)生的一個邊距，讓盒子之間產(chǎn)生距離。其次是知道浮動的概念，浮動在文檔布局中是一個非常重要的概念。通常塊級元素在頁面中獨(dú)占一行，自上而下成為流。元素浮動之后，會被移出正常的文檔里，根據(jù)設(shè)置向左或者向右平移，直到碰到了所處容器的邊框，或者是另外一個浮動的元素。當(dāng)一個元素浮動之后，不會影響到塊級元素的布局只會影響到內(nèi)聯(lián)元素比如文本的排列。浮動有3個屬性值，left，right以及none，分別表示向左向右浮動和不浮動。元素浮動之后通常會產(chǎn)生一個高度塌陷的問題，因為浮動的元素已經(jīng)脫離文檔流，無法撐開父級元素的高度，因此出現(xiàn)高度塌陷。也就是說浮動元素的父級元素不會自動伸縮來閉合浮動元素。為了解決這個問題就需要清除浮動：.container::after {content: “;display: block;clear: both;}這樣來讓元素盒子的邊不能和前面的浮動元素相鄰?；蛘呤怯胦verflow的方式：.content {overflow: hidden;height: auto;}這樣做的原理是觸發(fā)BFC。BFC的意思是block format content，塊級格式化上下文，也就是產(chǎn)生一塊獨(dú)立的不受外界影響的盒子區(qū)域。其觸發(fā)如下：該元素為根元素，即HTML元素該元素float的值不為none該元素overflow的值不為visible該元素display的值為inline-block、table-cell、table-caption該元素position的值為absolute或fixed運(yùn)用舉例：
以上就是【前端初識】課程的內(nèi)容解析啦想進(jìn)一步深入的同學(xué)歡迎加入我們的IT交流群557222766共同討論學(xué)習(xí)~
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，學(xué)習(xí)的路上不再迷茫。這里是技能樹.IT修真院，初學(xué)者轉(zhuǎn)行到互聯(lián)網(wǎng)行業(yè)的聚集地。
我認(rèn)識一個男生，學(xué)的應(yīng)用物理專業(yè)，兩年前他畢業(yè)的時候，本來在家人的勸說下想考公務(wù)員了，但是經(jīng)常家里來人都躲在自己房間里，平時說句話也“字字斟酌”，也不太適合做公務(wù)員。
一次他找到我，問我“前端是什么”他能不能做。其實不是程序員就是性格內(nèi)向的人做，是這個崗位不論資排輩，不管你什么經(jīng)歷，什么出身，只要技術(shù)夠牛，你就是牛！后面發(fā)展也不受限制，性格開朗的人可以做管理，內(nèi)向不愛說話可以做資深技術(shù)。
這里補(bǔ)充一句，做任何行業(yè)都需要與人溝通，只不過程序員對這方面的要求沒那么高。
前端即網(wǎng)站前臺部分，運(yùn)行在PC端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。說直白點(diǎn)就是我們上網(wǎng)看到的界面，都是前端工程師來完成的。
學(xué)習(xí)前端，三大核心必須知道，并且決不能馬虎，一定要把基本的內(nèi)容學(xué)精，學(xué)扎實，這樣萬變不離其宗，不論后面技術(shù)怎么革新，底層的原理不變，接受起來，也容易很多。
是超文本標(biāo)記語言，是用于描述網(wǎng)頁文檔的一種標(biāo)記語言。我們上網(wǎng)所看到網(wǎng)頁，多數(shù)都是由html寫成的。瀏覽器通過解碼html，就可以把網(wǎng)頁內(nèi)容顯示出來，它也構(gòu)成了互聯(lián)網(wǎng)興起的基礎(chǔ)。
是級聯(lián)樣式表，又叫風(fēng)格樣式表，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計的。css不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭討B(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。
至于框架現(xiàn)在流行的框架是vue和react。想進(jìn)大廠的伙伴react是必須要學(xué)的，現(xiàn)在很多大廠都用react。其實框架就是用來提高工作效率的，隨著互聯(lián)網(wǎng)的發(fā)展，各式各樣的框架相繼而出，大家根據(jù)公司需求選擇就是了。
我是學(xué)姐，一個正在創(chuàng)業(yè)的前端工程師，如果你同樣迷茫不知道前端該如何學(xué)習(xí)，可以加入我的自學(xué)團(tuán)，會有知識分享，匹配學(xué)習(xí)伙伴，還可以參加我組織的上線項目及活動。
端：代表輸出終端，例如pc瀏覽器，手機(jī)瀏覽器，甚至有些app，有些應(yīng)用程序
合起來的意思也就是這些瀏覽器，app，應(yīng)用程序的界面展現(xiàn)以及用戶交互就是前端
前端工程師主要利用HMTL與CSS建構(gòu)頁面，用JavaScript完善交互以及用戶體驗
