做軟件開發(fā)就是從事編程開發(fā)工作。必須先從語法基礎(chǔ)學(xué)習(xí)，通過語法形成產(chǎn)品效果。

前端開發(fā)的基本語法由HTML+CSS+組成小程序開發(fā)，是前端開發(fā)最基本的三種語言。

網(wǎng)頁布局基礎(chǔ)：HTML+CSS

HTML 是超文本標(biāo)記語言，是編寫 Web 內(nèi)容的最基本語言。可以直接說它是網(wǎng)頁的骨架，網(wǎng)頁的圖片、文字、視頻、音頻、程序都需要引入到網(wǎng)頁中來體現(xiàn)。

當(dāng)然，僅制作帶有內(nèi)容的 HTML 頁面是不夠的。因?yàn)樗皇荋TML，所以只能用于布局來制作有形狀的網(wǎng)頁。但是從Web2.0時(shí)代開始，就一直是盒模型布局方式，即使用DIV+CSS來實(shí)現(xiàn)布局。

CSS 是級(jí)聯(lián)樣式表。標(biāo)簽的布局規(guī)范是通過屬性進(jìn)行的。當(dāng)不再使用布局時(shí)，只要CSS樣式實(shí)現(xiàn)網(wǎng)頁標(biāo)簽的相應(yīng)布局，就是正確的開發(fā)方式。

HTML (div) + CSS 布局是入門的基本步驟。在這個(gè)階段，你需要學(xué)習(xí)的內(nèi)容，包括：

1.標(biāo)簽語義，SEO

2.頁面加載的流程和原理

3.網(wǎng)頁結(jié)構(gòu)

4. 盒子模型（W3C 盒子模型和 IE 盒子模型）

5.CSS 選擇器

6.CSS 布局浮動(dòng)，定位

開始階段大家學(xué)習(xí)的布局方式基本都是px中的靜態(tài)布局方式。熟悉布局方法，先給自己一個(gè)小目標(biāo)，做一個(gè)簡單的電商網(wǎng)頁基本結(jié)構(gòu)，沒有特效網(wǎng)站開發(fā)，沒有交互。

瀏覽器腳本語言：

是我們學(xué)習(xí)前端開發(fā)非常重要的內(nèi)容，也是大家經(jīng)常陷入的難點(diǎn)。現(xiàn)在可以說是互聯(lián)網(wǎng)時(shí)代使用最多的腳本語言了。在網(wǎng)頁中，所有的數(shù)據(jù)渲染和特效交互都需要用來影響瀏覽器的顯示。

不僅是開發(fā)網(wǎng)頁特效和渲染數(shù)據(jù)的重要內(nèi)容，在學(xué)習(xí)前端開發(fā)的后期，在使用很多算法和框架的時(shí)候，也有很多基礎(chǔ)測(cè)試。

在基礎(chǔ)階段，我們需要注意：

1.基本關(guān)鍵字指令

2.基本數(shù)據(jù)類型、數(shù)組

3.函數(shù)

4.面向?qū)ο缶幊?/p>

5.原型鏈，閉包

6.JSON

7.阿賈克斯

8.DOM（文檔對(duì)象模型原生 DOM 操作）

9.事件捕獲、冒泡、代理

10.常用函數(shù)方法

11.ES5、6、7

部分學(xué)習(xí)，主要是理解交互原理，把原理分析清楚，真正理解語法，然后寫出邏輯有多復(fù)雜。

經(jīng)典類庫

說到學(xué)習(xí)，很多小白同學(xué)肯定會(huì)對(duì)他的母語寫作感到頭疼。每一個(gè)邏輯業(yè)務(wù)都需要手動(dòng)編寫，即每使用一次就造一個(gè)輪子。覺得很麻煩。如果它可以更簡單。

因?yàn)榭梢苑庋b的特性，后面也有很多使用封裝的類庫和插件。比如最經(jīng)典的類庫就是。

類庫在類庫中封裝了很多事件方法。通過封裝，緩解了很多問題，如遍歷、對(duì)象選擇等。它通過調(diào)用方法簡化了網(wǎng)頁效果的實(shí)現(xiàn)。

在學(xué)習(xí)時(shí)，您需要專注于：

1.語法和原生語法的區(qū)別

2.Dom對(duì)象和對(duì)象

3.的入口函數(shù)和3.的入口函數(shù)的區(qū)別

4.事件的執(zhí)行邏輯。

學(xué)習(xí)，最需要的效果就是快速完成網(wǎng)頁的特效，比如輪播、手風(fēng)琴菜單、輪播、放大鏡等等。能夠完成一個(gè)電商網(wǎng)站的排版+特效開發(fā)是最基本的要求。

這些是零基礎(chǔ)學(xué)習(xí)所必需的一些基本內(nèi)容。入門級(jí)前端開發(fā)需要掌握的最基本的東西網(wǎng)站開發(fā)，基本的了解可以為后續(xù)的學(xué)習(xí)做更多的準(zhǔn)備。

多端進(jìn)階學(xué)習(xí)

除了基本的PC端，移動(dòng)端可以說是目前非常流行的。

不同于PC端的單一網(wǎng)頁，移動(dòng)端的技術(shù)可以應(yīng)用于WEB-APP、小程序、-App等。

網(wǎng)絡(luò)應(yīng)用

也就是我們常用的瀏覽器（以及微信等內(nèi)置瀏覽器）打開的大型移動(dòng)網(wǎng)頁。比如我們常見的電商網(wǎng)站、功能網(wǎng)站、管理網(wǎng)站，在布局和功能上都有APP的效果。

做好Web-APP開發(fā)，大部分人肯定會(huì)說響應(yīng)式布局，但是前端開發(fā)有5種布局方式，除了大名鼎鼎的響應(yīng)式布局，還有最重要的彈性布局方式移動(dòng)端，也就是很多人頭疼的rem布局。

除了布局方式，H5 中的新功能和觸屏事件以及設(shè)備兼容性問題也需要觸手可及。

小程序

不用說，現(xiàn)在可以說是很火了。各大平臺(tái)都在做自己的小程序，各種討價(jià)還價(jià)、搶票、電商、游戲都在用。以微信小程序?yàn)槔?，這主要是微信團(tuán)隊(duì)基于前端基礎(chǔ)做的封裝語法，主要是ES語法。目前很多騰云網(wǎng)絡(luò)都在為小程序招聘前端開發(fā)人員，并沒有獨(dú)立的小程序開發(fā)工程師，所以小程序可以說是前端工程師高薪聘用的加分技能，換句話說，它是成熟發(fā)展所必需的。

-應(yīng)用程序

又稱混合型APP，可能很少有人聽說過，但2018年開發(fā)的人越來越多。這種APP可以直接制作下載到終端?？梢哉f在體驗(yàn)上有著傳統(tǒng)的體驗(yàn)。APP的大部分功能都沒有了。這種開發(fā)門檻低，即可以完成前端開發(fā)。大部分都是大包平臺(tái)可以做的，后面可以了解。

前端主流技術(shù)框架

前面的都是基本的東西?，F(xiàn)在，當(dāng)你去前端開發(fā)就業(yè)時(shí)，你不能僅僅依靠基本的東西。通過構(gòu)建移動(dòng)頁面小程序開發(fā)，您可以被認(rèn)為是成熟的。三個(gè)前端框架，VUE，和，現(xiàn)在可以說是非?；鹆恕?/p>

前端基本語法都可以寫，為什么需要框架？

很多新手朋友不明白什么是框架。他們只聽說過這些東西，并認(rèn)為它們是框架。或者認(rèn)為框架是為了加快開發(fā)，而這些庫和插件可以完成框架的工作。

事實(shí)上，框架的出現(xiàn)是前端地位改變的重要標(biāo)志。最重要的性能是前后端分離。在前后端分離之前，很多后端開發(fā)者既是父親又是母親。效果不好，效率也不高。我出生在后端，知道痛苦。

今天的前端項(xiàng)目比以前更加復(fù)雜和多樣化。項(xiàng)目復(fù)雜，問題多。

框架解決了什么問題？

解決重復(fù)引用外部JS的問題，以開發(fā)為例，單個(gè)項(xiàng)目往往無法完成，需要引用很多第三方插件和庫，導(dǎo)致引入很多外部JS文件進(jìn)入一個(gè)項(xiàng)目。

這不僅使代碼混亂，而且影響打開速度。但是有了框架，以VUE為例，通常是結(jié)合構(gòu)建工具，然后就可以完成一個(gè)入口文件，并且在運(yùn)行時(shí)入口處引入一次，一勞永逸。

使用基于組件的開發(fā)，組件是前端框架中最強(qiáng)大的功能之一。它們可以擴(kuò)展您的 HTML 并封裝可重用的代碼塊，例如您的輪播、選項(xiàng)卡切換、頁面標(biāo)題、頁面底部等。

這個(gè)獨(dú)立的組件擁有完整的結(jié)構(gòu)（html）、表現(xiàn)（css）和行為（js）功能，大大節(jié)省了代碼量，提高了代碼的復(fù)用性。尤其是在團(tuán)隊(duì)合作的時(shí)候，可以提高使用效率。

縮短開發(fā)周期。如果您認(rèn)為可以縮短開發(fā)周期，那么框架實(shí)際上可以比庫更快。比如在使用開發(fā)的時(shí)候，經(jīng)常需要頻繁的對(duì)DOM進(jìn)行操作，而且每次效果都要搜索DOM，非常繁瑣。使用框架時(shí)，封裝了很多功能。例如，許多指令具有數(shù)據(jù)綁定和數(shù)據(jù)格式化功能。這樣，更多的時(shí)候，我們?cè)陂_發(fā)的時(shí)候只需要關(guān)注數(shù)據(jù)的邏輯。

最后

這些是我們學(xué)習(xí)網(wǎng)頁制作、開發(fā)、學(xué)習(xí)前端開發(fā)的一些必備知識(shí)點(diǎn)。給大家分享一下學(xué)習(xí)路線。