A. 0基礎學習前端，需要掌握什麼
如今學習Web前端的人越來越多，作為一個初入行的新手，一定要想清楚為什麼要學習Web前端，出於一種什麼樣的心態去學習，然後給自己做好定位。
零基礎新手在學習Web前端時應該掌握哪些知識點。我給你總結幾點：
1、HTML學習
超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染後呈現給用戶。因此，我們必須掌握HTML的基本結構和常用標記及屬性。
2、CSS學習
CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。
3、JavaScript學習
JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內置函數、對象和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那麼呆板。
4、jQuery學習
jQuery 是一個免費、開源的輕量級的JavaScript庫，並且兼容各種瀏覽器(jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支持)，同時現在有很多基於jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其 write less,do more的核心宗旨
5、bootstrap
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包，是一個CSS/HTML框架，並且支持響應式布局。一經推出後頗受歡迎，一直是GitHub上的熱門開源項目。
6、實戰
人生學習的態度是：不急不躁，不快不慢。持之以恆，相信自己。不求能改變世界，但求能改變自己的生活。我們學習Web前端最終的目的是為了找到一份滿意的高薪工作，那麼實戰經驗對於我們就至關重要，所以，在學習的過程中除了學習各種基礎知識，我們還應該積累自己的實戰項目經驗。
基本是一個搞web前端開發工程師需要掌握的技術，然後我也盡量的把自己的一點點經驗告訴了大家，但是大家不要以為上面6點就只有我說的那麼容易,不,他們之所以被人使用，之所以這么火，就是因為強大！
B. 前端主要都需要學什麼
Web前端開發工程師主要進行網站開發，優化，完善的工作。需要掌握以下技能：
必須掌握基本的Web前端開發技術，其中包括：CSS、HTML、SEO、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。在一名合格的前端工程師的知識結構中，網站性能優化、SEO和伺服器端的基礎知識也是必須掌握的。
必須學會運用各種工具進行輔助開發。除了要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持，等等。可見，看似簡單的網頁製作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對於老手來說，也時常不知道下一步該學什麼。
代碼質量是前端開發中應該重點考慮的問題之一。例如，實現一個網站界面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案則更易於維護，而且性能也比較好。這里的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的，對代碼質量的要求也不同，但它們之間又有著千絲萬縷的聯系。
C. web前端開發需要學習什麼知識
這里根據行業最新變化和企業要求整理了一份web前端學習路線，需要學習以下知識，希望可以幫到你。
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分之結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
D. 前端開發必學的技術有哪些
這里給大家整理了一份系統全面的前端學習路線，主要掌握以下技術：
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分之結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
E. web前端開發需要學習什麼知識
第一階段：
HTML+CSS:
HTML進階、CSS進階、div+css布局、HTML+css整站開發、
JavaScript基礎：
Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。
JS基本特效：
常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。
JS高級特徵：
正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、
JQuery：基礎使用
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。
第二階段：
HTML5和移動Web開發
HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.
CSS3:
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。
Bootstrap:
響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。
移動Web開發：
跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。
第三階段：
HTTP服務和AJAX編程
WEB伺服器基礎：
伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。
PHP基礎：
PHP基礎語法、使用PHP處理簡單的GET或者POST請求、
AJAX上篇：
Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。
AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。
第四階段：
面向對象進階
面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。
面向對象三大特徵：
繼承性、多態性、封裝性、介面。
設計模式：
面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段：
封裝一個屬於自己的框架
框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
框架封裝高級和補充：
JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。
第六階段：
模塊化組件開發
面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。
面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段：
主流的流行框架
Web開發工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
常用庫：
React.js、Vue.js、Zepto.js。
第八階段：
HTML5原生移動應用開發
Cordova：
WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。
Ionic：
Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。
ReactNative：
ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。
HTML5+：
HTML5+中國產業聯盟、HTML5PlusRuntime環境、HBuilder開發工具、MUI框架、H5+開發和部署。
第九階段：
Node.js全棧開發：
快速入門：
Node.js發展、生態圈、Io.js、Linux/Windows/OSX環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。
核心模塊和對象：
全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端。
Web開發基礎：
HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。
快速開發框架：
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。
希望會給大家帶來幫助！
F. Web前端初學者一定要會的知識點-HTML部分
今天小編要跟大家分享的文章是關於Web前端初學者一定要會的知識點-
HTML部分。正在從事web前端工作的小夥伴們都知道，作為web前端的初學者，想要學習web前端，首先要學HTML。
關於HTML基礎知識，首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結了一下有以下這些：
html：頁面的根元素。
head：頁面的頭部標簽，是所有頭部元素的容器。body：頁面的主體標簽，頁面展現的內容就放置在這裡面。
title：頁面的標題。
meta：位於文檔的頭部，提供頁面的元信息，包括關鍵字、描述等等。
link：定義文檔與外部資源的關系，最常用的用途就是引入樣式表。
script：腳本標簽，可以把js腳本代碼放置在這個標簽內，也可以使用這個標簽的src屬性引入一個外部標簽。
style：樣式標簽，可以把css代碼寫在這個標簽中。a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。img：圖像標簽，src屬性表示圖片的位置。form：表單元素，它內部的input、select、textarea等標簽都是比較重要的。div：定義文檔中的分區或節，可以使用div來進行頁面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。
除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：
·audio、video標簽。
·Canvas：定義圖形，比如圖表和其他圖像。
·input標簽的accept屬性，email、phone、url等類型。
·getElementByClassName根據class名來獲取一個元素結點。
·Multiplefileselection多文件選擇屬性。
·html的import、template
·process標簽，webGL等內容。
還有一些要知道的知識點：
1.doctype的作用。
2.unicode、utf8等編碼的原理和區別。
3.如何進行頁面性能優化。
4.png、jpg、webp、gif等圖片格式的不同的優勢。
5.HTML行內元素與塊級元素的區別。
6.移動web端開發常用head標簽。
7.web語義化。
8.瀏覽器中的緩存原理
以上就是小編今天為大家分享的關於Web前端初學者一定要會的知識點-
HTML部分的文章希望本篇文章能夠對正在學習web前端的初學者們有所幫助。想要了解跟多web相關學習知識記得關注北大青鳥web培訓官網！
G. Web前端工程師需要掌握的知識點有哪些
今天小編要跟大家分享的文章是關於Web前端工程師需要掌握的知識點有哪些?想要成為一名優秀的web前端工程師掌握必要的技能是必不可少的。為了幫助大家更好的成為web前端工程師，小編為大家整理了一些前端工程師需要掌握的知識點，下面我們一起來看一看吧！
1、HTML部分
首先是要掌握一些常用標簽的使用和他們的各個屬性，這些常用的標簽我總結了一下有以下這些：
§html：頁面的根元素。
§head：頁面的頭部標簽，是所有頭部元素的容器。
§body：頁面的主體標簽，頁面展現的內容就放置在這裡面。
§title：頁面的標題。
§meta：位於文檔的頭部，提供頁面的元信息，包括關鍵字、描述等等。
§link：定義文檔與外部資源的關系，最常用的用途就是引入樣式表。
§script：腳本標簽，可以把js腳本代碼放置在這個標簽內，也可以使用這個標簽的src屬性引入一個外部標簽。
§style：樣式標簽，可以把css代碼寫在這個標簽中。
§a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開方式。
§img：圖像標簽，src屬性表示圖片的位置。
§form：表單元素，它內部的input、select、textarea等標簽都是比較重要的。
§div：定義文檔中的分區或節，可以使用div來進行頁面的布局等操作。
§
另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語義化標簽也需要了解一下。
除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：
·audio、video標簽。
·Canvas：定義圖形，比如圖表和其他圖像。
·input標簽的accept屬性，email、phone、url等類型。
·getElementByClassName根據class名來獲取一個元素結點。
·Multiplefileselection多文件選擇屬性。
·html的import、template
·process標簽，webGL等內容。
還有一些要知道的知識點：
1.doctype的作用。2.unicode、utf8等編碼的原理和區別。3.如何進行頁面性能優化。4.png、jpg、webp、gif等圖片格式的不同的優勢。5.HTML行內元素與塊級元素的區別。6.移動web端開發常用head標簽。7.web語義化。8.瀏覽器中的緩存原理
2、CSS部分
關於css這一塊，我的看法就是網上下載一個chm格式的css的參考手冊，然後根據手冊裡面寫的一個個的都敲一下。
css大體分為下面這幾塊知識點：
①定位布局
1.position屬性的7個值(static|relative|absolute|fixed|center|page|
sticky)分別有什麼作用和不同?
2.實現品字形布局或者是三欄布局(左右寬度固定，中間適應屏幕)。
3.浮動與清除浮動的方法，flex布局，grid布局。
②盒子模型
1.margin、padding、border這三個屬性。
2.伸縮盒相關內容。
3.Multi-columnLayoutMole多列布局模型。
③文本字體
1.強制換行與不換行，清除空白。
2.文本對齊、大小(如何設置chrome小於12px的字體)、縮進、轉換。
3.單位(em、rem、px等)，顏色(rgb、rgba，hls)。
④變換、過渡和動畫
1.transform的各種取值的作用與兼容性。
2.transition過渡的動畫類型，貝塞爾曲線的原理。
3.animation動畫的各種設置，@keyframes規則。
4.瀏覽器的重繪與重排。
⑤選擇器
1.選擇器的分類，權值和優先順序。
2.有哪些屬性可以被繼承，哪些屬性沒法繼承。
3.偽類和偽元素分別是什麼，有什麼作用。
上面這些都是基礎的東西，除了這些基礎的內容之外需要了解Less、Sass、stylus等css預處理器，這將會大幅度提升你的css開發效率，也需要了解一下Autoprefixer、PostCSS等css後處理器。
3、JavaScript部分
在這里就不說js的基礎知識了，我把js按照語法的層次和使用的層次分為了兩大塊。
按照語法的層次來說：
首先是javascript的面向對象方面的內容：在javascript中實現封裝、繼承和多態。
①封裝：在js中可以通過閉包、作用域和作用域鏈來實現封裝，ES6的const、let的作用。
②
繼承：基於原型鏈的繼承、基於構造函數的繼承、組合式繼承、寄生式繼承等，外加ES6的class關鍵字，prototype和__proto__。
③
多態：在javascript中多態是使用arguments來實現的，關於arguments會引申出來很多內容：1.arguments的caller、callee等方法的作用。2.方法的apply和call的作用和不同。3.使用Array.prototype.slice.call來把一個數組對象轉化為數組。4.array的各種方法，如shift、splice、push、filter、map、rece、forEach等等。
然後是Js的設計模式，比如說那三種工廠模式啊，建造者模式啊等等。
最後是在不同情況下的this分別都代表什麼。
按照使用的層次來說：
首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、伺服器代理等等。
然後是tcp協議、udt協議以及http協議的協議頭、狀態碼等內容。瀏覽器的緩存，客戶端存儲方面的內容：localstorage、sessionstorage、indexDB、cookie等等。
最後是一些新的js的API，例如文件讀取(fileReader)、fetch、Promise、Web
Sockets等等內容，可以去caniuse上面看一下有哪些新的東西。
上面我所說的這些只是一些比較籠統的概念，把前端html、css和javascript所需要掌握的部分內容列舉了一下，在前端領域還有很多需要我們知道的知識，這需要大家在學習工作的過程中去自己總結。
以上就是小編今天為大家分享的關於Web前端工程師需要掌握的知識點有哪些的文章，希望本篇文章能夠對正在學習web前端知識的小夥伴們有所幫。想要了解更多web前端相關知識的小夥伴們記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利!
H. 零基礎學Web前端需要學習哪些知識
今天小編要跟大家分享的文章是關於零基礎學web前端需要學習哪些知識?前端開發是一個相對比較新的行業。但在這幾年期間，隨著W3C標準的不斷更新以及node.js的興起,基於node.js一系列的工具和諸多前端框架都參差不齊的浮出水面。
大多數人選擇轉行前端開發的原因大抵有如下幾點：
第一前端開發入門門檻極低。第二是對前端的理解過於簡單，普遍停留在毫無計算含量的網頁布局以及和美工一樣的樣式設計(這也就是幾年前所謂的網頁設計水平，隨著web開發技術的革新，以及對網頁美觀友好性的提高，web前端開發工程師才逐漸替代了網頁設計這一稱呼)。
計算機專業的人選擇前端,是因為他們對前端發展的前景比較看好，無論是前端行業的發展還是個人的職業發展都有著拒絕不了的理由。非計算機專業的人選擇前端，他們看到了IT互聯網行業的前景,以及前端開發相比於軟體開發等IT技術崗位的入門門檻低.。無論是哪一種既然選擇的走前端開發路線，那麼掌握了前端開發技術才是硬道理。
1、掌握基本的Web前端開發技術。也就是最為基礎的HTML，div+css布局以及JavaScript語言，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。
2、掌握優化技術。在一名合格的前端工程師的知識結構中，在除過前端開發技術之外也需要會分析用戶需求，以及前端界面的友好性，畢竟開發出來的前端界面還是需要用戶來體驗使用的。
3、掌握理論知識。除了要掌握技術層面的知識,還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持,等等.
4、掌握thinkphp與zend框架、html5與sencha、node.js,掌握javaScript、jquery、extjs等頁面效果框架。在除過前端開發技術之外掌握一二種後端編程語言,能讀懂後端源碼，並且理解web系統的整個開發過程和組成，前端開發只是web開發的一個分支，所以站在整個web開發的基礎上看前端開發，對自己的前端開發會有更更好的提升。
最後就是,使用者對前端界面的要求越來越高，這也就預示著前端的開發技術在不斷的提升，所以前端開發工程師還需要不斷的學習充電自己的技術儲備。前端入門很簡單，但是想要走前端開發這條路還是需要付出很多的努力的。
以上就是小編今天為大家分享的關於零基礎學web前端需要學習哪些知識的文章，希望本篇文章能夠對大家有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師！
I. Web前端知識體系簡介
今天小編要跟大家分享的文章是關於Web前端知識體系簡介。Web前端技術由html、css和javascript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低於任何一門後端語言。而我們在學習它的時候往往是先從某一個點切入，然後不斷地接觸和學習新的知識點，因此對於初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。下面來和小編一起看一看吧！
一、JAVASCRIPT篇
0、基礎語法
Javascript基礎語法包括：變數定義、數據類型、循環、選擇、內置對象等。
數據類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎類型,null和undefined是JS中的兩個特殊類型,object是引用類型。
Javascript可以通過typeof來判斷基礎數據類型，但不能夠准確判斷引用類型,
因此需要用到另外一個方法，那就是Object的toString,關於數據類型及其判斷可以參考以下博客：數據類型詳解和判斷JS數據類型的四種方法
JS常用的內置對象有Date、Array、RegExp等。一般來講，Date和Array用的最頻繁，正則表達式RegExp是處理字元串的利器。
關於數據和正則表達式的用法可以參考博客：ES5對數組增強的9個API和JS正則表達式精簡
1、函數原型鏈
Javascript雖然沒有繼承概念，但Javascript在函數Function對象中建立了原型對象prototype，並以Function對象為主線，從上至下，在內部構建了一條原型鏈。
簡單來說就是建立了變數查找機制，當訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。因此我們經常會利用函數的原型機制來實現JS繼承。關於函數原型鏈可參考博客：JS原型對象和原型鏈
2、函數作用域
函數作用域就是變數在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級作用域，只有函數作用域，因此JS中還存在著另外一種怪異現象，那就是變數提升。關於作用域的介紹請參考博客：函數的作用域和作用域鏈
3、函數指針this
this存在於函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。
Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執行函數，bind一般在事件回調中使用，而call和apply的區別只是參數的傳遞方式不同。關於call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind
4、構造函數new
JS中的函數即可以是構造函數又可以當作普通函數來調用，當使用new來創建對象時，對應的函數就是構造函數，通過對象來調用時就是普通函數。
普通函數的創建有：顯式聲明、匿名定義、newFunction()等三種方式。
當通過new來創建一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，於是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。new的詳細介紹請參考博客：理解JS中的new運算符
5、閉包
閉包其實是一個主動執行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變數，但又不污染全局變數，可以形成一個獨立的執行過程，因此我們經常用閉包來定義組件。
關於閉包的介紹請參考：干貨分享：讓你分分鍾學會JS閉包
6、單線程和非同步隊列
setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背後的原理卻不簡單。
我們知道，JS是單線程語言，在瀏覽器中，當JS代碼被載入時，瀏覽器會為其分配一個主線程來執行任務(函數)，主線程會形成一個全局執行環境，執行環境採用棧的方式將待執行任務按順序依次來執行。
但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回調等，為了保證其他任務的執行效率不被影響，JS在執行環境中維護了一個非同步隊列(也叫工作線程)，並將這些任務放入隊列中進行等待，這些任務的執行時機並不確定，只有當主線程的任務執行完成以後，才會去檢查非同步隊列中的任務是否需要開始執行。
這就是為什麼setTimeout(fn,0)始終要等到最後執行的原因。關於單線程和非同步隊列問題請參考：setTimeout(0)
7、非同步通訊Ajax技術
Ajax是瀏覽器專門用來和伺服器進行交互的非同步通訊技術，其核心對象是XMLHttpRequest,通過該對象可以創建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求伺服器,就是只能訪問當前域名下的url。
當然，如果確信你的站點不存在跨域的風險，可以在服務端主動開啟跨域請求，也可以通過CORS或JSONP來實現。
JSONP是利用腳本(script)跨域能力來模擬Ajax請求。
CORS是一個W3C標准，全稱是"跨域資源共享"(Cross-originresource
sharing)。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。關於CORS的介紹請參考：跨域資源共享
CORS詳解
8、DOM對象document
document對象里保存著整個Web頁面dom結構，在頁面上所有的元素最終都會映射為一個dom對象。
document也提供了很多api來查找特定的dom對象，比如getElementById,querySelector等等。
9、事件系統Event
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的滑鼠事件(mouse)發展到移動端的觸摸事件(touch)
和手勢事件(guesture)
由於DOM結構可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，後者最常用。利用事件冒泡機制可以實現很多功能，比如頁面點擊統計。關於兩種事件流的介紹請參考：事件冒泡和捕獲
除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進行綁定。
10、全局對象window
在JS中，當一段JS代碼在瀏覽器中被載入執行，JS引擎會在內容中構建一個全局執行環境，執行環境的作用是保證所有的函數能按照正確的順序被執行，而window對象則是這個執行環境中的一個全局對象，window對象中內置了很多操作api和對象，document對象就是其中一個。關於JS執行環境的介紹請參考博客：深入理解JS執行細節
二、CSS篇
css是用來對html進行修飾的一門語言。
1、選擇器
css的選擇器有很多種，常用的有類選擇器、標簽選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。
2、定位
定位一般有相對定位(relative)、絕對定位(absolute)、固定定位(fixed),
relative和absolute在移動端用的最多，fixed在移動端的兼容性有問題，因此不推薦使用，在移動端替代fixed的方案是
absolute+內部滾動。
3、浮動
設置float為left或right，就能使該元素脫離文檔流，向左或向右浮動。一般在做宮格模式布局時會用到，如果子元素全部設置為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設置clear:both,
更高級一點的就給父容器設置before/after來模擬一個空元素，還可以直接設置overflow:auto/hidden。除過浮動可以實現宮格模式，行內盒子(inline-block)和table也可以。
4、盒子模型
盒子模型是css最重要的一個概念，也是css布局的基石。
常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，盒子最關鍵的幾個屬性包括margin、border、padding和content,這幾個元素可以設置盒子和盒子之間的關系以及盒子和內容之間的關系。還有一個問題是計算盒子的大小，需要注意的是，box-sizing屬性的設置會影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會發生外邊距合並。行內框、浮動框或絕對定位之間的外邊距不會合並。
5、Flex布局
Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態設置自身大小;然後當Flex容器被應用一個大小時(width和height)，將會自動調整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向(橫向和縱向)和是否支持元素的自動換行。有了這個神器，做頁面布局的可以方便很多了。注意，設為Flex布局以後，子元素的float、clear和vertical-align屬性將失效。
6、transition(過渡)和transform(旋轉)
應用transform可以對元素進行平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時間內平滑的過渡。使用transition和transform就可以實現頁面的滑動切換效果。
7、動畫Animation
Animation首先需要設置一個動畫函數，然後以這個動畫的方式來改變元素的css屬性之的變化，動畫可以被設置為永久循環演示。
和transition相比，animation設置動畫效果更靈活更豐富，二者還有一個區別是：transition只能通過主動改變元素的css值才能觸發動畫效果，而animation一旦被應用，就開始執行動畫。
8、Sprite圖
對於大型站點，為了減少http請求的次數，一般會將常用的小圖標排到一個大圖中，頁面載入時只需請求一次網路，然後在css中通過設置background-position來控制顯示所需要的小圖標。
9、字體圖標iconfont
所謂字體圖標就是將常用的圖標轉化為字體資源存在文件中，通過在CSS中引用該字體文件，然後可以直接通過控制字體的css屬性來設置圖標的樣式。
三、HTML篇
1、Web語義化和SEO
html
常規標簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i
等等，另外html5還新增了很多語義化的標簽，比如header,acticle,aside,section,footer,audio,radio
等等。
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。
搜索引擎通過爬蟲技術獲取的頁面就是由一堆html標簽組成的代碼,，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，並予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
2、本地存儲
本地存儲最原始的方式就是cookie,cookie是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。但是cookie
不適合大量數據的存儲，因為每次請求一次頁面，cookie都會發送給伺服器，這使得cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
·Firefox和Safari允許cookie多達4097個位元組，包括名(name)、值(value)和等號。
·Opera允許cookie多達4096個位元組，包括：名(name)、值(value)和等號。
·InternetExplorer允許cookie多達4095個位元組，包括：名(name)、值(value)和等號。
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。
html5提供了兩種在客戶端存儲數據的新方法：localStorage和sessionStorage,它們都是以key/value
的形式來存儲數據，前者是永久存儲，後者的存儲期限僅限於瀏覽器會話(session),即當瀏覽器窗口關閉後，sessionStorage中的數據被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當於一個5M大小的前端頁面的資料庫，相比於cookie可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage的存儲空間後會拋出異常。
此外，H5還提供了逆天的Websql和indexedDB,允許前端以關系型資料庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。
3、瀏覽器緩存機制
瀏覽器緩存機制是指通過HTTP協議頭里的Cache-Control(或Expires)和Last-Modified(或
Etag)等欄位來控制文件緩存的機制。
Cache-Control用於控制文件在本地緩存有效時長。最常見的，比如伺服器回包：Cache-Control:max-age=600
表示文件在本地應該緩存，且有效時長是600秒(從發出請求算起)。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出HTTP
請求，而是直接使用本地緩存的文件。
Last-Modified是標識文件在伺服器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過If-Modified-Since
欄位帶上這個時間，發送給伺服器，由伺服器比較時間戳來判斷文件是否有修改。如果沒有修改，伺服器返回304告訴瀏覽器繼續使用緩存;如果有修改，則返回200，同時返回最新的文件。
Cache-Control通常與Last-Modified一起使用。一個用於控制緩存有效時間，一個在緩存失效後，向服務查詢是否有更新。
Cache-Control還有一個同功能的欄位：Expires。Expires的值一個絕對的時間點，如：Expires:Thu,10Nov
201508:45:11GMT，表示在這個時間點之前，緩存都是有效的。
Expires是HTTP1.0標准中的欄位，Cache-Control是HTTP1.1
標准中新加的欄位，功能一樣，都是控制緩存的有效時間。當這兩個欄位同時出現時，Cache-Control是高優化級的。
Etag也是和Last-Modified一樣，對文件進行標識的欄位。不同的是，Etag
的取值是一個對文件進行標識的特徵字串。在向伺服器查詢文件是否有更新時，瀏覽器通過If-None-Match
欄位把特徵字串發送給伺服器，由伺服器和文件最新特徵字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag和
Last-Modified可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
·
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有文件是否有更新。
·
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上欄位：Cache-Control:no-cache(或
Pragma:no-cache)，發包向服務重新拉取文件。
4、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件(manifest
file)，列出要下載和緩存的資源。
manifest文件是簡單的文本文件，它告知瀏覽器被緩存的內容(以及不緩存的內容)。manifest文件可分為三個部分：
-CACHEMANIFEST-在此標題下列出的文件將在首次下載後進行緩存
-NETWORK-在此標題下列出的文件需要與伺服器的連接，且不會被緩存
-FALLBACK-在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如404頁面)
離線緩存為應用帶來三個優勢：
·離線瀏覽-用戶可在應用離線時使用它們
·速度-已緩存資源載入得更快
·減少伺服器負載-瀏覽器將只從伺服器下載更新過或更改過的資源。
5、Canvas和SVG
Canvas通過Javascript來繪制2D圖形。Canvas是逐像素進行渲染的。在Canvas
中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
SVG是一種使用XML描述2D圖形的語言。SVG基於XML，這意味著SVGDOM中的每個元素都是可用的。你可以為某個元素附加
JavaScript事件處理器。在SVG中，每個被繪制的圖形均被視為對象。如果SVG對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas和SVG相比，canvas更依賴於解析度，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對象會被頻繁繪制，而svg則比較適用於類似谷歌地圖帶有大型渲染區域的應用程序。
以上就是小編今天為大家分享的Web前端知識體系簡介的文章，希望本篇文章能夠對正在從事Web工作和學習Web前端知識的小夥伴們有所幫助。想要了解更多Web前端知識記得關注北大青鳥Web培訓官網。最後祝願小夥伴們工作順利！
原文地址：#/onepixel/p/7021506.html
J. 參加Web前端面試必備的CSS知識點
今天小編要跟大家分享的文章是關於參加web前端面試必備的CSS知識點。css基本內容包括，類選擇符，id選擇符，偽類，偽元素，結構，繼承，特殊性，層疊，元素分類，顏色，長度，url，文本，字體，邊框，塊級元素，浮動元素，內聯元素，定位。下面來和小編一起看一看吧！
鏈接：
link標簽：
樣式：
h1{color:red;};
@import指示引入多個外部樣式表的鏈接
@importurl(styles.css);
p{color:red};
css註解
/*dashucoding*/
內聯樣式：
規范：
選擇符+聲明
p{color:red;}//選擇符屬性值
p{font-weight:bold;}
偽類和偽元素
屬性說明
:link超鏈接是一個未訪問過的地址
:visited訪問過的網頁
:active處於活躍的狀態
a{color:red;};a:visited{color:red;};
偽元素：
:first-letter和:first-line首字母和首行
p:first-letter{color:red;}
css有個特點是繼承，可以依賴於祖先-後代關系。
!important有這個標記，表示這條規則優先
p{color:red!important;}
元素分類：
三種類型：塊級元素，內聯元素，列表項元素
塊級元素有段落，標題，列表，表格，div，body等。內聯元素有a，em，span等。列表項元素有li元素。
dispaly:block|inline|list-item|none
顏色：
rgb(100%,100%,100%)紅藍綠，白色
單位：
em給字體的font-size值
文本：
文本縮進
text-indent<長度>|<百分比>
p{text-indent:-4em;}
text-align屬性
用於元素中文本行的對齊方式
text-align:left|center|right|justify
white-space空白
white-spacepre|nowrap|normal
p{white-space:normal;}將如何空白壓縮成單個空白符
white-space屬性值為pre，可以將元素內的空白忽略。
p{white-space:pre;}
行高：
line-height文本行的基線間的距離。
縱向對齊，vertical-align
vertical-align:baseline使元素的基線同父元素的基線對齊。
vertical-align:sub;vertical-align:super;
低端對齊：vertical-align
頂端對齊：vertical-align
vertical-align:top;vertical-align:text-top;
中間對齊：
vertical-align:middle;
文字間隔：
word-spacing長度|normal
word-spacing:0.3em;
字母間隔：
letter-spacing:長度|normal
文本轉換：
text-transformuppercase|lowercase|capitalize|none
文本修飾：
text-decoration:none|overline|line-through
框：
width長度|百分比|auto
height長度|auto
margin長度|百分比|auto
margin:toprightbottomleft
margin-top
margin-right
margin-bottom
margin-left
border-width//thinmediumthick
border-style:none;
padding
浮動與清除
float:left|right|none
float:none用於防止元素浮動
清除浮動元素
clearleft|right|both|none
clear原理是增加元素的上邊界，使它在低於浮動元素的位置結束，清除元素的上邊界寬度當有效地忽略。
list-style-typedisc
disc|circle|square|decimal|upper-alpha|lower-alpha|upper-roman
|lower-roman|none
list-style-type
disc為實心圓
circle為空心圓
square實心或空心方塊
列表項圖像
list-style-image
列表項位置：list-style-position
list-style-position:inside|outside
定位：
position:static|relative|absolute|fixed|inherit
溢出：
overflow:visible|hidden|scroll|auto|inherit
溢出剪切：
overflow-clip:rect|auto|inherit
元素剪切：
cliprect|auto|inherit
元素可見性：
visibility:visible|hidden|collapse|inherit
相對定位：
position:relative;
絕對定位：
position:relative;
固定定位：
position:fixed;
層疊定位：
z-index:integer|auto
輪廓：
outline,outline-color,outline-style,outline-width
邊框：
border-top-color,border-right-color,border-bottom-color
border-left-color,border-top-style
border-right-style,border-left-style
實例：
以上就是小編今天為大家分享的關於參加web前端面試必備的CSS知識點的文章，希望本篇文章能夠對准備參加web前端面試的小夥伴沒呢有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
文章來源：原創Jeskson達達前端