著5G技術(shù)的發(fā)展，未來大量的應(yīng)用場景都需要Web前端進(jìn)行呈現(xiàn)，Web前端人才將會成為5G時(shí)代不可缺少的人才。對于想要進(jìn)入Web前端行業(yè)的人來說，參加培訓(xùn)班無疑是最好的選擇。想要在武漢Web前端培訓(xùn)學(xué)校高效的學(xué)習(xí)，千鋒武漢Web前端培訓(xùn)小編建議大家從以下幾個(gè)方面入手。

第一：理清Web前端的知識結(jié)構(gòu)

要想高效學(xué)習(xí)Web前端知識，首先應(yīng)該搞清楚Web前端都包括哪些技術(shù)結(jié)構(gòu)。Web前端開發(fā)雖然技術(shù)難度并不高，但是技術(shù)細(xì)節(jié)卻比較多，內(nèi)容也比較雜。Web前端的基礎(chǔ)包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學(xué)習(xí)的重點(diǎn)，也是難點(diǎn)。另外，vue等框架也是需要熟練掌握的。

第二：緊跟技術(shù)發(fā)展趨勢

目前Web前端的技術(shù)發(fā)展趨勢有三個(gè)，其一是Web前端開發(fā)數(shù)據(jù)化；其二是Web前端開發(fā)高效化；其三是Web前端開發(fā)全棧化。Web前端開發(fā)數(shù)據(jù)化主要是大數(shù)據(jù)發(fā)展的影響，在大數(shù)據(jù)的推動下，Web前端逐漸涉及到了大量的數(shù)據(jù)展示任務(wù)。Web前端開發(fā)高效化主要體現(xiàn)在Web前端正在進(jìn)行獨(dú)立部署，前端與后端的溝通主要通過資源接口的方式來進(jìn)行。Web前端開發(fā)全棧化也是一個(gè)比較明顯的趨勢，比如Nodejs的應(yīng)用。

第三：注重動手實(shí)踐能力的培養(yǎng)

學(xué)習(xí)Web前端開發(fā)一定要注重動手實(shí)踐能力的培養(yǎng)，因?yàn)閃eb前端開發(fā)的細(xì)節(jié)比較多，所以只有多操作才能逐漸熟悉。

前端開發(fā)目前被稱為“大前端”，整個(gè)前端開發(fā)也被賦予了更多的含義，包括Web前端開發(fā)、移動端開發(fā)、大數(shù)據(jù)呈現(xiàn)端開發(fā)以及部分后端開發(fā)任務(wù)等等。所以，想要在前端行業(yè)中走的更遠(yuǎn)，一定要注重知識結(jié)構(gòu)的豐富性。

如果你也想要學(xué)習(xí)Web前端技術(shù)成為一名優(yōu)秀的Web前端工程師，歡迎來千鋒武漢Web前端培訓(xùn)，兩周免費(fèi)試聽，親身實(shí)地檢驗(yàn)講師教學(xué)水平。千鋒武漢Web前端培訓(xùn)課程結(jié)合時(shí)下流行技術(shù)，加入大數(shù)據(jù)可視化內(nèi)容，同時(shí)深化了PHP+MySQL開發(fā)內(nèi)容，精準(zhǔn)匹配企業(yè)線下及未來需求，學(xué)員可接觸HTML5開發(fā)、微信開發(fā)、微信支付、小程序開發(fā)、Web網(wǎng)站開發(fā)、Web管理系統(tǒng)開發(fā)等項(xiàng)目，能夠積累更多開發(fā)經(jīng)驗(yàn)。千鋒著力培養(yǎng)學(xué)員的大前端視角與全棧思維，讓學(xué)員所學(xué)即所需，畢業(yè)后在職場中更具優(yōu)勢。更多Web前端行業(yè)動態(tài)和學(xué)習(xí)資料，可以關(guān)注“武漢千鋒”微信公眾號。

學(xué)校時(shí)我們總盼著快快長大，想要沖破牢籠，去廣闊的天地中施展自己的抱負(fù)。當(dāng)走上社會，邁入職場，每天和流水線工人一樣，掙著微薄的工資，重復(fù)著單調(diào)無趣的生活，才發(fā)現(xiàn)自己只是一個(gè)什么都不會的菜鳥。想要逃離這樣的生活，卻又拔劍四顧心茫然，不知道辭職以后干點(diǎn)什么。后來學(xué)長和我說，在這個(gè)迅速變化的時(shí)代，最好有一門技術(shù)傍身，了解過許多，最終決選擇留在千鋒學(xué)習(xí)HTML5。

在試聽的前兩周，就發(fā)現(xiàn)老師講課的水平很高，把很多專業(yè)的知識解釋的淺顯易懂，讓我這個(gè)零基礎(chǔ)的學(xué)員都可聽得很明白。當(dāng)然在之前通過千鋒老師給我的HTML5視頻課程，我也自學(xué)了HTML5的框架，標(biāo)簽，元素等基礎(chǔ)內(nèi)容，讓自己對這門課程有了一個(gè)大概的了解。

但我還是把HTML5技術(shù)想象的太容易了，正式進(jìn)入HTML5學(xué)習(xí)后，就發(fā)現(xiàn)CSS這部分自己學(xué)的不是很扎實(shí)，經(jīng)常會犯一些小的錯(cuò)誤。經(jīng)過老師指導(dǎo)我才發(fā)現(xiàn)，構(gòu)建頁面也需要熟能生巧，可能是我練習(xí)的太少，還無法達(dá)到好的效果。

在之后的HTML5學(xué)習(xí)中自己要勤學(xué)苦練，爭取趕上進(jìn)度。學(xué)習(xí)的過程中，要多動腦總結(jié)思考，把問題列出來一一解決，一步步踏實(shí)的解決。課后完成作業(yè)后要預(yù)習(xí)新的知識點(diǎn)，這樣在老師上課的時(shí)候，能夠更好的熟悉新知識，避免有些知識點(diǎn)聽不懂。

在千鋒學(xué)習(xí)HTML5 雖然會很辛苦，但是我感到很充實(shí)，與之前工作時(shí)消極怠慢的人生態(tài)度完全相反。在這里給我自己的職業(yè)生涯開拓了新的方向，讓我發(fā)現(xiàn)生活新的可能。

在之后的學(xué)習(xí)階段我會更加努力，把知識點(diǎn)進(jìn)一步的落實(shí)，希望能在下一階段的學(xué)習(xí)中做的更好。

/面包理想

一轉(zhuǎn)眼已經(jīng)2018年，前端行業(yè)也風(fēng)風(fēng)雨雨地走過了10多年，網(wǎng)頁布局也從最原始的文檔變成了精彩紛呈的交互。當(dāng)我看到第四代CSS布局技術(shù)的時(shí)候，在驚嘆互聯(lián)網(wǎng)發(fā)展如此突飛猛進(jìn)的同時(shí)，不禁會有一個(gè)疑問：CSS經(jīng)歷1.0到3.0的版本變遷，最終又將走向哪里？

今天我們就回顧一下CSS簡史和四次布局技術(shù)的躍遷。

1.CSS簡史

為什么我們需要回顧一下CSS簡史呢？

1.了解過去能夠更好地預(yù)測未來，畢竟太陽底下沒有什么新鮮事。

2.相比預(yù)測未來，通過了解CSS發(fā)展演變趨勢，能夠科學(xué)合理地評判CSS的發(fā)展，指導(dǎo)我們學(xué)習(xí)CSS的核心技術(shù)，讓我們在有限的精力和時(shí)間內(nèi)學(xué)對知識，學(xué)好知識。

那是1989年的第一場雪，比1988年來的更早一些，伯納斯·李（Tim Berners-Lee）以超人的智慧和消耗了前額無數(shù)濃密的頭發(fā)為代價(jià)發(fā)明了World Wide Web，沒有他就沒有我們今天互聯(lián)網(wǎng)相關(guān)的工作，也就沒有了這個(gè)專欄教程，請?jiān)试S我代表廣大前端致以崇高的敬意。我們先一睹大神的風(fēng)采。

對互聯(lián)網(wǎng)之父，我只想對他說一句話，有一款洗發(fā)水增發(fā)效果挺好的，我一直用，你要不要試試？

互聯(lián)網(wǎng)誕生了以后，最初的網(wǎng)頁僅僅是純文本，但是隨著互聯(lián)網(wǎng)的發(fā)展，大家意識到web的原始版本根本就沒有提供一種裝飾網(wǎng)頁的方法。這就好比一個(gè)嬰兒不會穿著衣服出生一樣，孩子大了，總不能裸奔吧？這個(gè)時(shí)候兩個(gè)大神提供了解決方案Pei Yaun Wei和Andreesen。

Pei Yaun Wei說，這個(gè)好辦，我們可以給孩子穿上紙尿褲。

Pei-Yuan Wei在1991年創(chuàng)建圖形瀏覽器 ViolaWWW ，他整合了自己提出的樣式語言到自己開發(fā)的瀏覽器中，還期望自己的樣式語法最終能成為web關(guān)于樣式的官方標(biāo)準(zhǔn)。雖然這個(gè)目標(biāo)并未達(dá)到，但是他提出的樣式語法確實(shí)為其它的一些樣式語法提供了一些靈感。

Andreesen說，那玩意得換多麻煩，我給孩子畫一身衣服吧，當(dāng)然你懂的，最后Pei Yaun Wei的方案被采用了，但是我們還是看看Andreessen畫出來的情況有多亂。

與此同時(shí)，Andreessen 在他開發(fā)的網(wǎng)景瀏覽器中進(jìn)行了不同的嘗試。他并沒有創(chuàng)建一種分離式的標(biāo)記語言，而是采取拓展HTML標(biāo)簽的方法來包含非標(biāo)準(zhǔn)化的HTML標(biāo)簽已達(dá)到裝飾網(wǎng)頁的目的。不幸的是，沒過多久，網(wǎng)頁就失去了所有的語義化并看起來像下面這樣混亂：

<MULTICOL COLS="3" GUTTER="25">
 <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>

最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表，簡稱CSS，但是直到1996年的時(shí)候，CSS才演變成我們熟悉的樣子。

html { margin-left: 2cm; font-family: "Times", serif;
}h1 { font-size: 24px;
}

然后在1998年5月W3C發(fā)表了CSS2，緊接著一個(gè)讓我們深惡痛覺的瀏覽器誕生了！對沒錯(cuò)，就是你深惡痛絕的那個(gè)萬能的IE6，2001年微軟發(fā)布了IE6，不過搞笑的是，IE6最初的出現(xiàn)確實(shí)很大程度推動了CSS發(fā)展。那時(shí)候的網(wǎng)頁已經(jīng)變成跟現(xiàn)在很接近了。

按照常理你肯定會想，后面我就知道了，你不用說了，然后就是CSS3.0了。好吧，如果是我，我也這樣想，但是國際友人的腦回路可能跟我們不一樣，事實(shí)上，CSS3早于1999年已經(jīng)開始制訂，直到2011年6月7日，CSS 3 Color Module終于發(fā)布為W3C Recommendation。這個(gè)故事告訴我們兩件事：

1.w3c這個(gè)組織活的真夠長，甚至比很多讀者年齡都大。

2.不是CSS正式版發(fā)布了你才放心使用，如果等到那個(gè)時(shí)候使用，你的項(xiàng)目可能未曾綻放就枯萎了。

細(xì)心的讀者可能會問了，CSS3正式版什么時(shí)候發(fā)布啊？另外CSS4.0什么時(shí)候發(fā)布？

好吧，我只能告訴你隨緣吧……而且沒有CSS4.0了，也不會有CSS5.0了。

來我們再看看國際友人的腦回路：

簡單地說，就是從CSS3開始，CSS規(guī)范就被拆成眾多模塊（module）單獨(dú)進(jìn)行升級，或者將新需求作為一個(gè)新模塊來立項(xiàng)并進(jìn)行標(biāo)準(zhǔn)化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更，有的只是CSS某個(gè)模塊級別的躍遷。

按照CSS工作組的說法，CSS歷史上并沒有版本的概念，有的只是“級別”（level）的概念。比如，CSS3其實(shí)是CSS Level 3，CSS2是CSS Level 2，而CSS Level 1當(dāng)然就是CSS1。每個(gè)級別都以上一個(gè)級別為基礎(chǔ)。

大家可能說這個(gè)命名好亂啊，這事兒我只想跟你說，你就把CSS工作組當(dāng)成你女朋友就好了，她開心就好，她說的都是對的，她說啥就是啥……

至于我們，會用就好了。

CSS出現(xiàn)的好處就是讓結(jié)構(gòu)和表現(xiàn)分離，可以更靈活的修飾網(wǎng)頁,學(xué)習(xí)也很簡單。這里我更想說說它的不足。

1.CSS只有一個(gè)全局的命名空間，所以是無法避免出現(xiàn)選擇器沖突的。

2.模塊化做的不夠好，所以造成嵌套和覆蓋混亂，容易產(chǎn)生一大堆亂糟糟的樣式。

所以現(xiàn)在CSS也在向“模塊化、JS化發(fā)展”

不過客觀地說，CSS的出現(xiàn)確實(shí)是互聯(lián)網(wǎng)里程碑式的進(jìn)步。

CSS其實(shí)就做了兩件事：

1.如何布局

2.元素怎么表現(xiàn)

說直白一點(diǎn)就是兩件事，一個(gè)房子是蓋成兩室一廳還是三室兩廳，另一件事是精裝修。

這里大家就會看到如果一個(gè)房子180平米隔成1個(gè)10平米的主臥170平米的廁所，你再怎么精裝修也不會是一個(gè)宜居的房間。所以布局在CSS中是極其重要的。與CSS發(fā)展簡史類似，CSS布局也經(jīng)歷了一代又一代的迭代，才成為當(dāng)前的樣子。

接下來我們就說說CSS布局簡史。

2.CSS布局簡史

初代table布局

在1997年的時(shí)候，David Siegel 改變了web，他自己研究出了一項(xiàng)網(wǎng)頁布局技術(shù)，利用html中的table元素和gif圖片縫合在一起，創(chuàng)造了表格布局技術(shù)，之后他就猶如一頭猛獸泛濫起來。

優(yōu)點(diǎn)：布局容易、快捷、兼容性好

缺點(diǎn)：改動不便，需要重新調(diào)整，工作量大

由于互聯(lián)網(wǎng)網(wǎng)站越來越復(fù)雜，內(nèi)容和業(yè)務(wù)更新頻繁，所以table布局是完全不能勝任的，以至于table布局的發(fā)明人都說：

“我把炸醬和面倒在了一起，并且沒法分開它。”

不過這個(gè)真不是我杜撰出來的，原文：

David Siegel：“有人說我毀掉了Web，我回答他們，的確如此。我毀掉了Web是因?yàn)槲野亚煽肆突ㄉu混合在一起卻再也不能把它們分開。我犯下了把結(jié)構(gòu)跟表現(xiàn)混合在一起的錯(cuò)誤。”

然后第二代布局技術(shù)登場了，

CSS+div布局

CSS+div布局總結(jié)起來有三大優(yōu)點(diǎn)，

1.省時(shí)，學(xué)習(xí)容易，寫代碼也很容易，很快，效率高

2.省事，如果業(yè)務(wù)邏輯變了，改起來特別方便快捷

3.省錢，代碼量少，省帶寬，適合seo

基于這三年不難看出CSS+div布局人畜無害，人見人愛，也就不難解釋為什么被廣泛地使用成為目前主流的布局技術(shù)了。當(dāng)然了他也有缺點(diǎn)：

1.需要考慮平臺兼容性，對制作人員的技能要求較高。

2.在移動端布局顯得有些力不從心，如未知寬高float內(nèi)部元素居中、垂直水平布局、響應(yīng)式布局等方面略顯繁瑣。

基于此，第三代布局技術(shù)應(yīng)運(yùn)而生。

Flex布局

優(yōu)點(diǎn)：

1.CSS3的布局方式，可以在不使用其他框架的情況下，簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局 2.移動端布局簡直太友好

缺點(diǎn)：

兼容性較差，IE瀏覽器版本在9.0以上，基本要10.0 對于其他瀏覽器，要求兼容性寫法

Flex布局日漸成為移動端主流布局技術(shù)，但是它是單一維度的布局，這個(gè)我會在專欄后面講到，有時(shí)候也會捉襟見肘，所以目前出現(xiàn)了第四代的布局技術(shù)：

grid布局

因?yàn)槟壳按蟛糠譃g覽器并不支持這種技術(shù)，但是它代表了網(wǎng)絡(luò)發(fā)展，這里大家保持關(guān)注就好，這里我重點(diǎn)說下它為什么可以稱為第四代網(wǎng)絡(luò)布局技術(shù)。首先一個(gè)觀點(diǎn)大家先記住：

它并不會取代第三代的布局技術(shù)，而是顛覆和突破。就好像Flex遠(yuǎn)比div+CSS布局更方便，但是div+CSS依然有用武之地。

我們說下它的突破之處：

1.flex對標(biāo)的是float，本質(zhì)上還是一維布局，這就跟別人開著夏利，你開奔馳都是地面上跑沒啥本質(zhì)區(qū)別一樣。但是grid升維了，grid是飛機(jī)，在地面馬路這條線一維之上讓人能夠思考高度這個(gè)維度，以前是汽車一維交通工具（你只能在水平方向一個(gè)方向開），飛機(jī)是二維（能俯沖了（橫向、縱向同時(shí)）），所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現(xiàn)。到時(shí)候CSS不僅僅能控制橫向布局，縱向布局，還可以深度布局（這個(gè)要依賴于三維展示的出現(xiàn)，如VR，AR三維立體的展示設(shè)備出現(xiàn)）。

2.grid布局里面采用了“可視化布局（template部分，所見即所得）”，這個(gè)是顛覆了傳統(tǒng)的，寫一句代碼刷一下瀏覽器這樣的開發(fā)方式，不排除以后會出現(xiàn)代碼即效果的開發(fā)模式。比如你在一個(gè)設(shè)備上畫一個(gè)區(qū)域，然后畫輪播圖。

這種方式類似于vc++控件方式，但是更智能，也更友好。誰說不可能呢？大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最后html5的canvas火了，連CSS3網(wǎng)格布局也是由微軟創(chuàng)建的一個(gè)模塊 ，最后火起來居然沒人認(rèn)識它。心疼微軟一秒鐘。

說到這里大家對CSS簡史和布局也有所了解了，我們總結(jié)下，通過本文你應(yīng)該學(xué)到：

（1）CSS的發(fā)展歷史。

（2）熟知布局的發(fā)展歷史，以便對未來布局技術(shù)的發(fā)展有一個(gè)客觀的判斷，來選擇是否學(xué)習(xí)。

通過本文的學(xué)習(xí)大家已經(jīng)對CSS相關(guān)基礎(chǔ)知識有所了解，接下來我們就開始真正的進(jìn)入技術(shù)的學(xué)習(xí)，大家是不是迫不及待了呢？