Web前端基礎怎麼學？ JavaScript、html、css知識架構圖

之前開發者只要掌握 HTML、CSS、JavaScript 三駕馬車就能勝任一份前端的工做了。而如今除了普通的編碼之外，還要考慮如何性能優化，如何跨端、跨平臺實現功能，尤爲是 AI、5G 技術的來臨，都在加快前端技術的更新，也在逼促開發者要不停的學習，不能的接受新的技術標準。

「學什麼」「怎麼學」實際上是咱們要着重解決的問題。因此，今天給你梳理一下前端知識框架，幫你把知識點從新作個遍歷，查缺補漏的學習更輕鬆。

咱們先來看什麼叫作知識架構？

咱們能夠把它理解爲知識的「目錄」或者索引，它可以幫助咱們把零散的知識組織起來，也可以幫助咱們發現一些知識上的盲區。

本文包含了JavaScript、CSS和HTML以及瀏覽器的實現原理和API，這三個模塊涵蓋了一個前端工程師所須要掌握的所有知識。

JavaScript知識構架圖

在JavaScript的模塊中，首先咱們能夠把語言按照文法、語義和運行時來拆分，這符合編程語言的通常規律：用必定的詞法和語法，表達必定語義，從而操做運行時。

運行時能夠分爲數據結構和算法部分——數據結構包含類型和實例（內置對象），算法是執行過程。執行過程應按照從最頂層的事件循環和微任務，到函數、再到語句級的執行。

語法和語義基本是一一對應關係，在JavaScript標準中有一份語法定義表，建議隨時拿出來看一看

HTNL和CSS知識構架圖

在HTML的部分，咱們按照功能和語言來劃分它的知識，HTML的功能主要由標籤來承擔，因此首先要把標籤作一些分類。圖中元素後面的分類，即是咱們按照承擔的不一樣功能，把標籤分紅的幾個類別。

除了標籤以外，你還應該把HTML看成一門語言來了解下。較基礎的HTML的語法和幾個重要的語言機制：實體、命名空間，你必定要掌握。

CSS部分，能夠按照語言和功能劃分。

語言部分，@rule、選擇器、單位是三個要關注的部分。

功能部分，能夠重點關注佈局（正常流和彈性佈局）、繪製（圖形和文字）以及交互類。

瀏覽器的實現原理和API

瀏覽器的實現原理，是咱們深刻理解的APL的基礎

從通常的瀏覽器設計出發，按照解析、構建DOM樹、計算CSS、渲染、合成和繪製的流程來學習瀏覽器的工做原理。

在API部分，能夠從W3C零散的標準中挑選幾個大塊的API來詳細講解，主要有：事件、DOM、CSSOM幾個部分，他們分別覆蓋了交互、語義和可見效果，這是咱們工做中用到的主要內容。

一我的學習會有迷茫，動力不足。這裏推薦一下個人前端學習交流qun：四八四，七五七，七六零，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。