1. web前端需要掌握的哪些知識
一個合格的web前端需要掌握哪些技術?
最基礎的自然是JavaScript,HTML和css這三種語言。
首先了解下它們到底是什麼。
HTML是用戶看到的網頁的骨架,比如你會發現當前頁面分為左中右三個部分,其中還填充了不同的文字和圖片;每個子部分還會繼續細分,比如當前頁面的中間部分下方有輸入框等等。
CSS是網頁展示的細節控制,比如你會發現有的文字是紅底白色,有的子部分佔了頁面的二分之一寬,有的只佔六分之一,有些部分需要用戶進行某些操作(如點擊,滑動)才會出現等等,這些就是有CSS來控制。
JavaScript是負責捕捉用戶在瀏覽器上的操作,並與後端伺服器進行數據交換的腳本語言。當用戶在前端進行點擊,輸入等操作的時候,會觸動綁定了該動作的JavaScript腳本,然後JavaScript收集數據,調用後端的api介面,再將後端返回的數據交給HTML和CSS渲染出來。
一個網頁的HTML代碼和CSS代碼是可以直接在瀏覽器中查看的,你可以直接按F12,就能看到下圖右側的模塊,左右側紅框就是代碼與實際頁面的對應關系。因此如果你看到某個網站的布局很不錯,不妨點擊F12,進行學習。
前端框架
然而,實際應用中,已經很少有正規的項目組直接用上述三種語言進行web 前端開發了,而是使用很多封裝了這三種語言的框架,比如
Vue.js
,angular,react native等等。它們是來自谷歌和Facebook的大神項目組,基於自己的經驗,封裝了原生前端語言,實現了更多更復雜更酷炫的功能。因此,可以說,學會使用這些框架,能達到事半功倍的效果。
比如用了vue,它是自底向上增量開發的設計,其核心只關心圖層,而且還可以與其他庫或已存項目融合,學習門檻極其友好;另一方面,vue可以驅動單文件組件和vue生態系統支持的庫開發的復雜單頁應用。有了這個生態系統,可以說,vue是處在一個不斷壯大,不斷完善的欣欣向榮的狀態。
網路通信協議
由於前後端分離的趨勢,前端還需要了解很多網路通信協議的知識,這里不局限於http協議,因為據我的經驗,有時候我們還會用到websocket等協議。因此,前端需要簡單了解不同協議的特點以及使用方式,但是好消息是不用像學習計算機網路課程一樣對每種協議的原理都了解的特別透徹,只要學會如何用前端語言發送這種協議的請求就夠了。
2. web前端工程師入門需要學什麼
前端入門學習:
一、Web網頁基礎
學習路線:HTML入門基本內容,CSS+DIV的基礎知識,選擇器,盒子模型,網頁布局,Photoshop
二、Web編程基礎
學習路線:JavaScript基礎,BOM和DOM模型,事件處理,jQuery,交互及動畫,jQuery優質插件,文檔處理,數組和對象操作
三、Web編程高級及全棧開發
學習路線:JavaScript高級編程,jQuery插件開發,模塊化組件開,AJAX,Express(Node.js),MongoDB,ElementUIl
四、響應式網站與項目自動化開發
學習路線:HTML5,CSS3,響應式原理及布局,Bootstrap,前端依賴管理,CSS預處理語言(Less+Sass),Grunt/Gulp自動化構建工具
五、框架與項目管理
學習路線:MVC、MVVM架構模式,VUE2,Webpack模塊載入器&打包工具,React,Angular4
六、混合式移動及微信開發
學習路線:React Native,微信小程序
3. 網頁美工需要學什麼
課程介紹:
第一部分:web前端HTML5+CSS3
1. HTML5語法結構、文本、圖像、鏈接、表格、列表、表單、框架;熟練掌握各種 HTML 標簽,能夠手動快速完成各種頁面的編寫;
2.CSS3 基礎語法、各種選擇器(通用選擇器、元素選擇器、id和 class選擇器、後代選擇器、偽類選擇器等)、框模型與背景、文本 格式化、表格、顯示與定位、CSS 復雜選擇器(兄弟選擇器、屬性選擇器、偽類和偽元素選擇器等),理解 CSS Hack和 CSS 優化,能夠手動完成各種頁面樣式的定義和編寫,保證瀏覽器兼容性
3.JS基礎應用及實戰項目:JavaScript基礎語法,常用界面特效、交互設計代碼分析
4.可選講解項目:小米首頁項目、淘寶網首面項目、奇虎360專題項目、非凡官網項目
第二部分:web前端JavaScript
1.JavaScrip基礎語法、數組 Object、Function、String 和 正則表達式、常用 內置對象、JSON數據、錯誤處理、面向對象編程、閉包
2.核心框架與編程技術:DOM編程:ocument對象、節點樹、節點操作、元素樣式編輯、Window對象、定時器、BOM模型、事件、location 、history、screen對象、HTML DOM編程;Jquery核心技術
3.移動端頁面開發(HTML5):Canvas標簽基礎知識、繪制矩形、繪制圓形、使用路徑、圖像裁剪、保存為文件、創建動畫
4.Svg體系的基礎知識、和canvas標簽的功能對比、和canvas的區別、繪制動畫"
5.移動端技術與伺服器交互:SERVER和 HTTP協議:PHP伺服器端技術簡介及 Apache 伺服器、PHP訪問資料庫、伺服器端組件 原理、HTTP請求、HTTP響應、HTTP優化;Ajax:XML、JSON、Ajax 原理、JQuery Ajax、Ajax 經典案例;Bootstrap:BS基礎、BS Grid、BS Forms、BS Input,理解 Bootstrap的原理,熟練掌握Bootstrap的核心API,能夠實 現響應式布局以及功能交互
6.實戰項目:可選講解項目:小米登錄、小米注冊、淘寶登錄、淘寶注冊、京東產品詳情頁的頁面動效以及交互實現、非凡官網項目的典型效果實現、唯品會訂單頁面設計開發
7.階段考核個人網站開發:教師指導你完成階段作品,以備應聘時使用;從前期設計好的網站頁面,綜合利用所學技術,獨立完成個人網站代碼開發等
8需要有靜態網頁設計(ps,dw,)的基礎
9.保證學會:出勤率達90%以上,可享受一年內免費重新學習