前端是一個泛指，范疇更廣泛，web前端屬于web開發的前端，是一個明確的范圍，方向更明確；前端開發包括了移動前端開發和web前端開發，即包括了PC端開發和移動端領域的開發，而web前端開發主要指傳統的PC端網頁開發，這是它們之間最大的區別。

本教程操作環境：windows7系統、Dell G3電腦。

前端是一個泛指，范疇更廣泛，web前端屬于web開發的前端，是一個明確的范圍，方向更明確。前端根據產品設計/UI，進行用戶側應用編碼落地的工作均屬于前端開發的范疇（包含web、app、小程序類、桌面類等等不同的應用形態）；就是直面用戶的界面，通常來講，前端就包含了Web前端了。

簡單來說，前端開發包括了移動前端開發和web前端開發，即包括了PC端開發和移動端領域的開發，而web前端開發主要指傳統的PC端網頁開發，這是它們之間最大的區別。

移動前端開發和web前端開發都屬于前端開發，具體有以下區別。

1、業務的應用場景

web前端開發主要指傳統的PC端網頁開發，頁面主要是運行在PC端瀏覽器中，移動前端開發出來的頁面主要是運行在手機上。

直觀上會感覺，PC端頁面大一些，移動端頁面小一些，但是根據開發經驗，頁面大可并不代表書寫的代碼復雜，頁面小也并不意味著開發簡單，難與易主要還是取決于具體的業務需求。

2、新技術的使用

由于在移動端主要以webkit內核為主，對于HTML5等新技術支持的更好，所以可以更大范圍的使用新技術，而PC端開發由于很多場景下要求兼容IE等老版本瀏覽器，出于瀏覽器兼容性的考慮，有些情況下限制了新技術的使用。

3、頁面的適配性

傳統PC端的頁面開發一般都會選擇給頁面設定一個固定寬度，兩側有留白，但是移動端的頁面由于其載體手機屏幕比PC要小很多，一般都會選擇盡可能多的在手機屏幕上顯示內容，這就要求移動端頁面要能夠充分適應各種屏幕尺寸的手機并進行最大程度的利用。

從這一點上來說移動端頁面的適配難度更高一些。

4、頁面的性能

PC端的網絡情況一般比較穩定，都是通過網線或者Wi-Fi連接網絡，但是移動端就比較復雜，除了Wi-Fi，還有2G、3G、4G甚至是在幾種不同的網絡連接中交替切換也經常發生。

不穩定的網絡連接對頁面性能帶來的挑戰是移動端的頁面資源不能太大，否則在惡劣網絡情況下時，頁面將會無法訪問 ，嚴重影響用戶體驗。

5、框架選型

由于移動端網絡情況的不穩定，導致我們在移動端頁面框架選型時，一般只考慮小而美的框架，例如像zepto.js這樣的壓縮之后只有9.6K，就能滿足一般業務的需要，如果是想要構建更復雜的單頁面應用，可以選擇像vue.js這樣的框架，功能強大，但體積壓縮后卻只有20多K。

而web端相對選擇的范圍就比較大，一些比較重型的框架也可以根據項目需求加以考慮，例如古老但龐大的ext.js，依然憑借著眾多UI組件活躍在一些企業的后臺管理系統項目中。

擴展資料

Web前端開發需要掌握的技術：

1、熟練掌握前端開發技術(HTML5、JS、JSON、XHTML、CSS3)，了解各項技術的相關標準。

2、掌握Ajax異步編程，能夠寫出高性能、可復用的前端組件。

3、對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握一個前端框架（常用前端框架 Vuejs，AngularJS，React，Bootstrap，QUICK UI，移動端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，選擇兩三個主流的框架，熟練，深度了解才可以）。

4、善于Web性能優化，可訪問性、對SEO等有良好的體驗；理解表現層與數據層分離的概念、 Web語義化（這些也是在找工作中，很有用的加分項）。

5、了解前端安全機制，熟悉HTTP協議以及瀏覽器緩存策略。

6、熟悉常見JS開發框架源碼實現，（如：prototype、jQuery、Mootools，Ext， Dojo，underscore、YUI、Kissy），至少熟練一種（當然也不要去選一些用的人很少的框架，要明白大項目都是團隊做，不能自己搞一套）。

7、擁有良好的代碼編寫，設計文檔撰寫的經驗，熟練使用Git等版本控制工具。

8、對常見的瀏覽器兼容問題有清晰的理解，并有可靠的解決方案，如IE6/7/8/9、 Firefox、Safari、Chrome。

9、具有較高的審美（這個很重要，多去見識一些模板，高端的項目，就能感覺到有多大的差距）。

（學習視頻分享：web前端入門）