一，前端開發的概念
Web前端開發是從網頁制作演變而來（以前稱為網頁制作），名稱上有很明顯的時代特征。在網際網路的演化程序中，網頁制作是Web1.0時代的産物，早期網站主要内容都是靜态，以圖檔和文字為主，使用者使用網站的行為也以浏覽為主。随着網際網路技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，互動效果顯著，功能更加強大。
1.1 web1.0時代的網頁制作
web1.0時代是一個群雄并起，逐鹿網絡的時代，雖然各個網站采用的手段和方法不同，但第一代網際網路有諸多共同的特征，表現在技術創新主導模式、基于點選流量的盈利共通點、門戶合流、明晰的主營兼營産業結構、動态網站。在WEB1.0上做出巨大貢獻的公司有Netscape，Yahoo和Google。 Netscape研發出第一個大規模商用的浏覽器，Yahoo的楊緻遠提出了網際網路黃頁， 而Google後來居上，推出了大受歡迎的搜尋服務。
網頁制作是web1.0時代的産物，那個時候的網頁主要是靜态網頁，所謂的靜态網頁就是沒有與使用者進行互動而僅僅供讀者浏覽的網頁，我們當時稱為“牛皮癬”網頁。例如一篇QQ日志、一篇博文等展示性文章。在web1.0時代，使用者能做的唯一事情就是浏覽這個網站的文字圖檔内容，這時使用者也不能像現在在大多數網站都可以評論交流（缺乏互動性）。相信可能大多數人都聽過“網頁三劍客 Dreamweaver+Fireworks+Flash”吧，這個組合就是web1.0時代額産物
1.2 web2.0時代的網頁制作
“前端開發”是從“網頁制作”演變而來的。
從2005年開始，網際網路進入web 2.0時代，由單一的文字和圖檔組成的靜态網頁已經不能滿足使用者的需求，使用者需要更好的體驗。在web 2.0時代，網頁有靜态網頁和動态網頁。所謂動态網頁，就是使用者不僅僅可以浏覽網頁，還可以與伺服器進行互動。舉個例子，你登陸新浪微網誌，要輸入賬号密碼，這個時候就需要伺服器對你的賬号和密碼進行驗證通過才行。web2.0時代的網頁不僅包含炫麗的動畫、音頻和視訊，還可以讓使用者在網頁中進行評論交流、上傳和下載下傳檔案等（互動性）。這個時代的網頁，如果是用“網頁三劍客Dreamweaver+Fireworks+Flash”制作的，那是遠遠不能滿足需求。現在網站開發無論是開發難度，還是開發方式上，都更接近傳統的網站背景開發，是以現在不再叫“網頁制作”，而是叫“web前端開發”。
是以，處于web2.0時代的你，如果要學習網站開發技術，就不要再相信所謂的“網頁三劍客Dreamweaver+Fireworks+Flash”，因為這個組合已經是上個網際網路時代的産物。而且這個組合開發出來的網站問題也非常多，例如代碼備援、網站維護困難（學習到後期，你會知道為什麼不用這個組合了
web2.0的曆史發展
2001年秋天網際網路公司（dot-com)泡沫的破滅是網際網路的一個轉折點。許
多人斷定網際網路被過分炒作，事實上網絡泡沫和相繼而來的股市大衰退看起來
像是所有技術革命的共同特征。股市大衰退通常标志着蒸蒸日上的技術已經開
始占領中央舞台。假冒者被驅逐，而真正成功的故事展示了它們的力量，同時
人們開始了解了是什麼将一個故事同另外一個區分開來。
“Web 2.0”的概念2004年始于出版社經營者O'Reilly和MediaLive International
之間的一場頭腦風暴論壇。身為網際網路先驅和O'Reilly副總裁，Dale Dougherty
指出，伴随着令人激動的新程式和新網站間驚人的規律性，網際網路不僅遠沒有“崩潰”，
甚至比以往更重要。更進一步說，那些得以活過泡沫破裂的公司之間似乎擁有某種相
同點。難道是網際網路泡沫破裂标志着網際網路的一個轉折點，因而導緻了諸如“Web 2.0”
這種運動？我們同意這種說法，“Web 2.0”的概念由此誕生了。Web2.0 則更注重使用者
的互動作用，使用者既是網站内容的浏覽者，也是網站内容的制造者。所謂網站内容的制
造者是說網際網路上的每一個使用者不再僅僅是網際網路的讀者，同時也成為網際網路的作者；
不再僅僅是在網際網路上沖浪，同時也成為波浪制造者；在模式上由單純的“讀”向“寫”以
及“共同建設”發展；由被動地接收網際網路資訊向主動創造網際網路資訊發展，進而更加人
性化。
在那個會議之後的一年半的時間裡，“Web 2.0”一詞已經深入人心，從Google
上可以搜尋到4.7億以上的連結。但是，至今關于Web 2.0的含義仍存在極大的分
歧，一些人将Web 2.0貶低為毫無意義的一個行銷炒作口号，而其他一些人則将之
了解為一種新的傳統理念
二，前端開發的發展曆程
2005年以後，網際網路進入Web2.0時代，各種類似桌面軟體的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再隻是承載單一的文字和圖檔，各種富媒體讓網頁的内容更加生動，網頁上軟體化的互動形式為使用者提供了更好的使用體驗，這些都是基于前端技術實作的。以前會Photoshop和Dreamweaver就可以制作網頁，現在隻掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站背景開發，是以現在不再叫網頁制作，而是叫Web前端開發。Web前端開發在産品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近幾年來備受青睐。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給使用者。
三，web前端能做什麼？
公司官網（在PC通過浏覽器來通路公司網站）移動端網頁（在手機上來浏覽公司資訊、小遊戲等）移動端APP（例如：淘寶、去哪兒旅遊、攜程等）微信小程式（微信最新推出的功能，随用随裝，不占用手機空間）皮皮蝦我們走可樂在廚房 紅牛在冰箱66666。前端開發所學技術由簡單到難，是以在很多網站上你會看到“七天入門前端”的視訊部落格等等，也就是說一星期就學會了HTML+CSS。那麼最基本的頁面你就可以書寫了。
3.1 web前端開發的職責是什麼？
- 1、使用Div+css并結合Javascript負責産品的前端開發和頁面制作；
- 2、熟悉W3C标準和各主流浏覽器在前端開發中的差異，能熟練運用DIV+CSS，提供針對不同浏覽器的前端頁面解決方案；
- 3、負責相關産品的需求以及前端程式的實作，提供合理的前端架構；
- 4、與産品、背景開發人員保持良好溝通，能快速了解、消化各方需求，并落實為具體的開發工作；
- 5、了解伺服器端的相關工作，在互動體驗、産品設計等方面有自己的見解。
四，前端開發都有哪些内容
我們知道，用所謂的網頁三劍客已經不能滿足需求了，那前端開發究竟要學習什麼技術呢？網頁最主要由3部分組成：結構、表現和行為。網頁現在新的标準是W3C，目前模式是HTML、CSS和JavaScript。
掌握HTML是網頁的核心，是一種制作網際網路頁面的标準語言，是網際網路浏覽器使用的一種語言，它消除了不同計算機之間資訊交流的障礙。是以，它是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發人員的基本條件。
學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。
學習JavaScript的基本文法，以及如何使用JavaScript程式設計将會提高開發人員的個人技能。
了解Unix和Linux的基本知識雖然這兩點很基礎，但是開發人員了解Unix和Linux的基本知識是有益無害的。
了解Web伺服器當你對Apache的基本配置，htaccess配置技巧有一些掌握的話，将來必定受益，而且這方面的知識學起來也相對容易。
4.1 需要熟練掌握的技能
熟悉版本控制系統的用法熟悉使用一種優秀的版本控制系統，你在實際工作中就會發現精通一種版本控制系統是很幸福的事情。
學好Web架構當你掌握了HTML，伺服器端腳本語言，CSS和JavaScript後，就應該找一個Web架構加快你的Web開發速度，使用架構可以節約你很多時間，如果你使用PHP，可選的架構有CakePHP，CodeIgniter，Zend等，Python程式員喜歡使用Django和 webpy，Ruby程式員喜歡使用RoR。
對于初學開發人員來說，以上知識是不是看起來很複雜，其實，當你一步步學習并為企業開發成功案例時，你會發現一切都是有意義的付出。
4.2 較強的視覺設計
前端技術包括4個部分：前端美工、浏覽器相容、CSS、HTML“傳統”技術與Adobe AIR、Google Gears,以及概念性較強的互動式設計,藝術性較強的視覺設計等等。
根據該詞可以做這樣的了解,用網際網路來做比喻,凡是通過浏覽器到使用者端計算機的統稱為前端技術.相反存貯于伺服器端的統稱為後端技術。
4.3 HTML是什麼？
HTML，全稱“Hyper Text Markup Language（超文本标記語言）”
簡單來說，網頁就是用HTML語言制作的。HTML是一門描述性語言，是一門非常容易入門的語言。
4.4 CSS
CSS，全稱“（層疊樣式表）”。以後我們在别的地方看到“層疊樣式表”、“CSS樣式”，指的就是CSS。
4.5 JavaScript
JavaScript是一門腳本語言。
4.6 HTML、CSS和JavaScript的差別 我們都知道前端技術最核心的是HTML、CSS和JavaScript這三種。但是這三者究竟是幹嘛的呢？
“HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行為
五，前端學習路徑圖
5.1 概述圖
位址：https://www.processon.com/view/link/5d3a5947e4b0511f13134ced#map
不經一番徹骨寒 怎得梅花撲鼻香