573
技術社區[雲棲]
web前端學習——零基礎web前端學習路線
買了一些前端入門書籍，好像也看不太明白？看了好多視頻教程似乎也是似懂非懂？如果你現在是初學前端，入門的話，可以看看下麵內容……或者有一點幫助學習前端，前端就好比如蓋房子~html就充當了房子結構這部分，也是房子的基礎。css呢，就好比咱們房子的裝修，牆麵什麼顏色，什麼風格，什麼地板…這些給房子改變風格，樣式的就是cssjavascript呢，就好比這個房子的功能，房子需要製冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當於是javascript例子可能不是很恰當，隻是幫助大家有個初步的認識~
1.前端工具（dreamwear/sublime/editplus/SVN）
2.零基礎入門（html css）
前端開發概況、代碼入門
頁麵基本結構、文檔聲明、編碼聲明、css語法、style屬性、link和style標簽、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設置…常用標簽集合header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對路徑、相對路徑、標簽語義化、標簽嵌套規範、SEO…
常用選擇器&標簽類型劃分
d、class、類型選擇、包含選擇、群組選擇、通配符、選擇器優先級、標簽樣式初始化訂製方案、超鏈接及偽類劃分、標簽類型劃分及特性、inline、inline-block、block..
浮動進階
浮動的作用、浮動的特性、文檔流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件…
定位
relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、默認值、zIndex層級問題、margin負值、透明度…
表格和表單
表格標簽、表格樣式重置、單元格合並、表單元素、表單相關的屬性操作、表單默認樣式初始…
兼容性問題處理
兼容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標簽的支持、CssHack、條件注釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式…
整站進階
樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高布局、三列布局、未知寬高圖片在容器內水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…
css3入門
transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級、H5表單新增屬性、E:not(s)、E:target、E::selection、background-clip…
移動端布局
測試環境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移動端布局相關問題、window.deviceorientationevent、橫豎屏判斷…
Animation和Transform
瀏覽器前綴、keyFrames、Animation調用、播放次數設置、動畫偶數次調用順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執行順序問題…
Bootstrap前端開發框架
Html語法規範、CSS語法規範、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格係統、排版、代碼、響應式工具…
3.項目實戰
PC端的企業網站布局（例：sony官網）PC端的電商類網站布局（例：京東商城）移動端常見頁麵布局（例：微信活動頁/商城）
個人認為學習前端可能又分為下麵幾個階段
第一階段——HTML標簽的學習
超文本標記語言(HyperText Mark-up Language 簡稱HTML)，“超文本”就是指頁麵內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁麵的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後麵的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標簽，屬性。有了一個好的開始，距離成功已經一小半啦
關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？
“我去！這麼多標簽！怎麼記得玩？”
（web前端學習交流群：291851189禁止閑聊，非喜勿進！）
個人感覺有兩點可以嚐試：
- 語義化的去記憶。比如ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標簽。
- 試著寫一個一個小的demo，也許就隻是一個列表，一個表格，或者一個按鈕。也許寫著寫著你就懂了呢？
學習HTML就是要自己不斷的去寫，去嚐試。看著自己的代碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這裏麵有在線的代碼編輯器。可以邊寫邊看到效果~
ok~學習完成html後，我們來到第二階段——css
去給我們的房子裝修一番吧~
第二階段——CSS的學習
CSS，層疊樣式表——（Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控製，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。
CSS看似比較繁雜，其實隻要掌握了CSS中的盒子模型、定位、以及頁麵布局，就基本上掌握了大半啦
這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！
關於CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~
完全就是我們需要什麼，隻要憑著需求去尋找。
說完裝修，我們終於要給房子打造一些功能啦~follow me~
第三階段——JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
簡單來說，javascript是一個可以運行在瀏覽器上麵的語言（當然現在基於一些庫/框架已經遠不隻是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML,CSS.
嚴格來說、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的腳本型語言，既然是語言，那就會有字符串，數組，對象等等。而我們的javascript可以處理這些與數據有關的工作，比如給數組排個序，去個重等等。而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的注冊功能，提交我們的留言，刷新獲取新聞等等。
當然，我們強大的javascript遠不止此啦,以後再為大家深入介紹~
然而因為曆史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準兼容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決兼容。。。
所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！
如果你想學習前端可以來這個群，首先是291，中間是851，最後是189，裏麵可以學習和交流，也有資料可以下載。
第四個階段——jQuery
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們隻需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。比如會不會吵到鄰居？怎麼協調物業？幹活總得有人手的，對吧…
jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！
web前端的一些小建議
這裏跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對~
在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鍾，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的項目，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。
這裏給大家分享一些css小技巧：
- 使用reset.css火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）
- CSS縮寫CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。
不是像這樣創建CSS
css 代碼效果預覽
1
2
3
4
5
6
7
.header {
}而是像這樣創建CSS
css 代碼效果預覽
1
2
3
.header {
}- 理解class和id這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。
- 實用的
- 也叫鏈接列表，在與或正確搭配的時候非常好用，尤其是用在導航菜單樣式上。
- 少用多用
CSS最大的優勢之一是使用達到樣式上的靈活多變。不同於，裏的內容不會 被鎖在單元格中。可以說幾乎所有的表格布局都可以在和樣式的正確使用下完成。當然，有大量表格內容時，還是用 吧。
- CSS調試工具在設計CSS時，能夠得到頁麵布局的預覽對於優化CSS樣式和糾錯是很有幫助的。這裏有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等
- !Important所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也隻會采用被標記的那條。
css 代碼效果預覽
1
2
3
4
.page {
}比如上麵的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也隻采用被標記的那條。!important 用來強製使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支持。牢記以上小技巧，也許你的css技能突然就起飛了呢？關於javascript的一些小技巧，下次我再整理給大家。一次性看太多，大家是不是也有點暈？
學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？~希望大家可以成為一個優秀的前端er！
最後更新：2017-10-16 10:03:21