前端開發初識

一，前端開發的概念

　　Web前端開發是從網頁製做演變而來（之前稱爲網頁製做），名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製做是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字爲主，用戶使用網站的行爲也以瀏覽爲主。隨着互聯網技術的發展和HTML五、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前端開發的職責是什麼？

• 一、使用Div+css並結合Javascript負責產品的前端開發和頁面製做； 
• 二、熟悉W3C標準和各主流瀏覽器在前端開發中的差別，能熟練運用DIV+CSS，提供針對不一樣瀏覽器的前端頁面解決方案；
• 三、負責相關產品的需求以及前端程序的實現，提供合理的前端架構；
• 四、與產品、後臺開發人員保持良好溝通，能快速理解、消化各方需求，並落實爲具體的開發工做；
• 五、瞭解服務器端的相關工做，在交互體驗、產品設計等方面有本身的看法。

 

四，前端開發都有哪些內容

　　咱們知道，用所謂的網頁三劍客已經不能知足需求了，那前端開發究竟要學習什麼技術呢？網頁最主要由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是頁面的行爲