前端是一個泛指，範疇更廣泛，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前端入門）
以上是web前端與前端有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
