寫這篇文章的目的就是對自己半年來的學習成功進行以下梳理，文采有限。爭取做到結構明朗，語言合理吧。本篇主要以梳理為主，具體知識點後續會寫。

web前端的整體概念

HTML：搭建結構
CSS：美化頁面（佈局）
JavaScript：實現動態的效果

第一階段
HTML CSS 的學習
HTML
HTML看似簡單，其實很重要。因為HTML的結構關係著後期JS如何操作，好的結構會節省很多時間和程式碼。學習HTML建議多看主流網站的HTML結構，會學到很多東西。
標籤

常用html標籤

佈局標籤（div span）
標題標籤
列表標籤
文字相關標籤
表格標籤
表單標籤

標籤按自身屬性的分類

塊級標籤（特點/包含哪些標籤）
行內標籤（特點/包含哪些標籤）
行內塊級元素（特點/包含哪些標籤）

一定要深入的理解行內元素和塊級元素，關係到用CSS佈局時，我們如何合理有效的根據心中所想，元素就往哪去的目的。

標籤語義化

好處與作用

**歡迎加入我們**為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：864305860 歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。

HTML5新增標籤

CSS
層疊樣式表：主要用來美化頁面，調整頁面的結構
CSS的引入方式

行內式
內嵌式
外鏈式
匯入式（@import,一般情況不適用該引入方式）

CSS的引入方式的優先順序

行內式優先順序最高
其他引入方式誰寫在後面，就用誰的樣式，後面會覆蓋掉前面的樣式

CSS選擇器
基本選擇器

標籤選擇器
類選擇器
id選擇器
萬用字元選擇器（選擇全部的樣式）

其他CSS選擇器

後代選擇器
子代選擇器
交集選擇器
並集選擇器
型別選擇器（主要用在input標籤）

input[type=text]

這種型別選擇器有很多種選擇方式，可以具體搜一下

相鄰兄弟選擇器

h2+p{margin:50px;}

偽類選擇器

:hover{};//滑鼠經過時的樣式
:active{};//滑鼠點選時的效果，多用在a標籤上
:focus{};//獲得焦點時的樣式，多用在表單元素
:checked{};//選中時的樣式，用在radio和checkbox

CSS3新增選擇器

選擇器的權重
這個也要好好理解，網上找文章多看看。因為關係著我們寫的樣式能否應用到元素上。

標籤選擇器 1
類選擇器 10
ID選擇器 100
萬用字元選擇器最低

CSS的書寫規範

1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
歡迎加入我們

CSS盒子模型
很重要

內容（content）
內邊距（padding）
邊框（border）
外邊距

這裡只是梳理，相關知識點，網上很多了，可以找來細看。

頁面中的三種基本佈局

自然佈局（也就是根據標籤特性來佈局block inline inline-block）
浮動佈局（給元素設定浮動 float）

理解浮動元素的特點

層佈局（定位 position）

理解定位元素的特點

HTML+CSS學習情況
我是通過模擬主流網站來練習html+css的，這個東西說難不難，主要就是多練習，並沒有多少邏輯，看的再多不如拿起電腦一行行的去敲出來。我自己也還是在學習階段，CSS的路還很長，也只是知道了基礎，熟練應用都算不上。每敲一次就有一次新的收穫，堅持！！！
JavaScript
我認為這是整個web技術棧中最重要的！！！；這是基礎中的基礎，只有紮實的基礎才能讓我們在這條路上走的更遠。對於流行的框架都是基於JS的，所以一定不要捨本求末。把基礎打牢對於我們學習框架會有很大的幫助，更能理解框架的實現機制。
JavaScript基礎知識

歷史
JavaScript的組成

ECMAScript:主要規定了Js的組成、引入方式、命名規範、輸出方式、變數、資料型別、基本語法、操作語句
DOM:文件物件原型
BOM:瀏覽器物件模型

JS的命名規範
JS中的資料型別

基本資料型別
引用資料型別
他倆的區別
資料型別之間的比較（只有一個數值的情況、==比較的情況、===比較的情況）

歡迎加入我們
JS的變數
JS中的表示式和語句
JS中的函式
JS中的運算子

基礎知識中有兩點很重要：函式和各資料型別的方法（Array的方法，Number的方法，RegExp的方法，String的方法，Bullean的方法），這裡不展開寫了，梳理為主_

DOM
就是描述整個html頁面關係節點的圖譜

獲取頁面中元素的方法
DOM的（動態操作）增刪改
節點型別以及節點的關係
元素屬性的設定和獲取
DOM的盒子模型（主要應用在事件中）

client系列
offset系列
scroll系列

BOM

瀏覽器相關資訊
url資訊
全域性物件

alert
open
setTimeout
setInterval
在控制檯列印資訊
歡迎加入我們

JS進階知識點

預解釋（不重要了）
作用域鏈（理解全域性作用域和私有作用域）
閉包（很重要，我也只是理解一些。）
this的指向問題
記憶體（棧記憶體和堆記憶體）
回撥函式（callback）（薄弱點）
call/apply/bing（應用還是不夠熟練，意思理解）
JS中的事件機制（事件型別、事件物件、事件流、事件委託）
JS中的運動
JS中的非同步和同步

我知道的非同步：元素繫結的事件、回撥函式、ajax、定時器

JS的面向物件思想（我的薄弱點，理解不是很透徹，但這些知識非常重要，加強學習）

首先要理解JS中函式的三種角色

普通函式
“類”，在es5中沒有類的概念，建構函式
普通物件

網上相關文章很多，很重要的知識點，我也要好好學習

JS封裝的幾種模式
原型以及原型鏈
函式中的繼承
歡迎加入我們
JS的學習情況
處在夯實基礎基礎的階段，好多東西不能理解透徹，但知道這些知識點的重要性，所以一定要堅持下去。我自己的學習經驗，當然我也只是剛剛入門。還是同樣的態度，不要一直停留在怎樣去學，如何去學的思想糾結中。開啟電腦，按著網上給的技術技能樹，多看看，多思考，多練習。我相信只要有足夠的毅力，終究能學會。不過要保證在你確實要在這行幹下去，否則就不要浪費時間了。學習從沒有捷徑可走，少些糾結，多些行動比什麼都好。
ajax
處在對原理理解不夠的階段中，不過可以使用ajax來請求資料和傳送資料，以及一些相容問題，主要也是從網上找文章學習這方面知識。
jsonp
處在可以使用跨域來拿資料，瞭解一些基本原理，繼續學習。
一些框架、庫和css預編譯器

jQuery（會用，不能說熟練，主要是對一些api不夠熟悉。多練習吧）
less（css預編譯器）
bootstrap
zepto
swiper

學習情況
這些框架、庫、和預編譯器正在學習階段，能簡單的使用其中的功能（根據api）。還是在平常中多練習吧，要學的東西太多不能放棄；
想學的前端技能

react
vue

主要還是根據市場來決定，代表前端的發展方向，基於框架來實現各種邏輯應用。不過也知道貪多咬不爛，所以要立足自己的技術能力，選擇來學習。

結語

**歡迎加入我們**為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：864305860 歡迎大家進群交流討論，學習交流，共同進步。