web開發(fā)知識(shí)點(diǎn)[共8頁]

1、web 開發(fā)知識(shí)點(diǎn) 【篇一： web 開發(fā)知識(shí)點(diǎn)】1. 前言大約在幾個(gè)月之前，讓我看完了 webkit 技術(shù)內(nèi)幕這本書的時(shí)候，突然有了一個(gè)想法。想把整個(gè) web 前端開發(fā)所需要的知識(shí) 都之中在一個(gè)視圖中，形成一個(gè)完整的 web 前端知識(shí)體系，目的是 想要顛覆人們對(duì)于前端只有三大塊（ html 、css 、js ）的認(rèn)識(shí) 做web 前端需要的比這三大塊要多得多。拖了好幾個(gè)月了，但是由于近期將要參加的某一個(gè)活動(dòng)，我不得不這兩天把這個(gè)東西整出來。說干就干。上午我就開始在辦公室畫草圖，亂七八糟的在那兒理思路。大家不要害怕，其實(shí)下文中的這個(gè)知識(shí)框架要比草圖中的好看的多，草圖大家權(quán)當(dāng)沒看見。好了，廢話不扯

2、。下面請(qǐng)跟隨我本博客的內(nèi)容，來看看 web 前端開發(fā)除了 htm 、css 和 js 之外，還有哪些東西需要你一步一步去掌握。在看內(nèi)容之前，先看一下這個(gè)知識(shí)框架的預(yù)覽圖。圖太大不好展示，看不清除，可在此下載清晰版：（內(nèi)有整個(gè)知識(shí)體系的圖片和xmind 文件） 分類所有知識(shí)框架，那肯定是一個(gè)結(jié)構(gòu)型的展現(xiàn)，就是一棵樹。 web 前端的知識(shí)點(diǎn)非常多，也非常散，需要好幾層結(jié)構(gòu) 來組織這個(gè)體系，否則就會(huì)顯得很亂。那么如何組織、把誰和誰放在一塊兒？這是真正值得我們?nèi)ニ伎嫉?，你也可以自己來思考一下這個(gè)問題。在我總結(jié)的這個(gè)知識(shí)框架中，首先第一層我劃分為：理論知識(shí)，類庫框架，編碼開發(fā)，運(yùn)行環(huán)境。如下圖：接下來給

3、大家解釋一下：這個(gè)圖要從下往上看，為何？ 因?yàn)橄旅媸巧厦娴幕A(chǔ)；首先，我們需要一定的理論知識(shí)，不管是你聽別人講授、自己看書還是網(wǎng)上淘資料，你都需要一定的理論知識(shí)，每一種程序開發(fā)，都避免不了。第二，有了這些理論知識(shí)我們就可以編碼了 不錯(cuò) but ，沒有人能抵擋住第三方框架和類庫的誘惑，例如 jquery ；第三，有了這些理論知識(shí)和協(xié)助我們的類庫框架，我們就可真正的編碼了。大家可能以為編碼開發(fā)不就是寫代碼嗎，還有啥？ 這里面道道多著呢；最后，開發(fā)程序的目的，最終是為了能高效、穩(wěn)定的運(yùn)行在相應(yīng)的環(huán)境中，這其中又有哪些事情需要我們?nèi)プ?？?qǐng)期待； 3. 理論知識(shí) 包括 軟知識(shí) 和 硬知識(shí)軟知識(shí) 和 硬知

4、識(shí) 大家可能覺得詞陌生，其實(shí)我一說大家就能明白。所謂 軟 的就是能在各個(gè)程序開發(fā)中都用到的，算是基本功、內(nèi)功，例如數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計(jì)模式、面向?qū)ο蟮鹊?；所謂 硬 的就是能直接用于本程序開發(fā)的。用 c 語言你就得學(xué) c 語言語法，此時(shí)學(xué)java 沒用。我們 web 前端開發(fā)所需要的硬知識(shí)其實(shí)都包含在三個(gè)標(biāo)準(zhǔn)里面： http 標(biāo)準(zhǔn)、w3c 標(biāo)準(zhǔn)和 ecmascript 標(biāo)準(zhǔn)； 4. 聊一聊 web 前端開發(fā)中的 硬知識(shí)軟知識(shí) 的內(nèi)容非常多，也是我們大學(xué)時(shí)代學(xué)習(xí)的重點(diǎn)（沒學(xué)好是另回事兒，畢業(yè)再惡補(bǔ)）。我們本次主要討論的是 web 前端這一個(gè)方向，因此就點(diǎn)到為止，讓大家知道這些知識(shí)也在知識(shí)體系中扮演

5、重要角色。剛才說道，硬知識(shí)有三個(gè)標(biāo)準(zhǔn)： http 標(biāo)準(zhǔn)、w3c 標(biāo)準(zhǔn)和 ecmascript標(biāo)準(zhǔn)，那咱們就挨個(gè)聊聊這三個(gè)標(biāo)準(zhǔn)。 1 http 標(biāo)準(zhǔn)為什么做 web 前端要了解 http 標(biāo)準(zhǔn)？ 因?yàn)闉g覽器要從服務(wù)端獲取網(wǎng)頁，網(wǎng)頁也可能將信息再提交給服務(wù)器，這其中都有 http 的連接。 web 系統(tǒng)既然和http 鏈接有瓜葛，你就必須去了解它。我的意見是：你不必去非常了解 http 的詳細(xì)內(nèi)容，但是你要了解web 前端開發(fā)常用的一些 http 的知識(shí) 就是上圖中我列出來的那些。當(dāng)然，我知識(shí)列了一個(gè)綱，詳細(xì)內(nèi)容還得靠你自己去查閱（本文章講的是知識(shí)框架，不會(huì)涉及任何知識(shí)點(diǎn)的詳細(xì)內(nèi)容）關(guān)于這方面的知

6、識(shí)，建議去查閱圖解 http 這本書，淺顯易懂的講述了這些內(nèi)容，我曾經(jīng)也看過。 2 w3c 標(biāo)準(zhǔn)如果說你只知道 web前端的一個(gè)標(biāo)準(zhǔn)，估計(jì)肯定是 w3c 標(biāo)準(zhǔn)了（據(jù)我了解，貌似大部分人真的都只知道這一個(gè)標(biāo)準(zhǔn)）。它的內(nèi)容非常多，看看這個(gè)頁面。寫到這里讓我想起了一句話： 2/8 原則 20% 的功能滿足 80% 的需求。我覺得這句話用到這里非常合適，我們?cè)谄綍r(shí)開發(fā)過程中根本用不到這么多東西。反而，你要把平時(shí)用的多的東西搞懂了。下圖的這些知識(shí)，我想不用再過多解釋了，這就是我文章開發(fā)說的三大塊 （html 、css 、js）?，F(xiàn)在你要知道，它們只不多是 w3c 標(biāo)準(zhǔn)的一部分，而 w3c 標(biāo)準(zhǔn)也只是 w

7、eb 前端開發(fā)知識(shí)體系中的一部分而已。（下圖沒有完全展開，想看權(quán)展開的圖，可下載本文一開始提供的附件）關(guān)于 css 的基礎(chǔ)知識(shí)，毛遂自薦一下自己之前的一篇系列博客：3 ecmascript 簡(jiǎn)稱 es ，寫全稱太麻煩了。有些人可能只知道 javascript ，而不知道 es 其實(shí)， js 是在 es 的基礎(chǔ)上，為 web 瀏覽器做了一部分封裝（增加了 dom 操作、bom 操作等）。如上圖中的這些概念，大家可能平時(shí)都在 javascript 中看到，其實(shí)他們是 es 的內(nèi)容。只不過 javascript 繼承了 es 的這些特性，并且javascript 用的比較廣泛，因此才會(huì)在 js 中討

8、論的多一些。 還是那個(gè) 2/8 原則 。其實(shí) es 中的內(nèi)容也非常多，而且更新很快，現(xiàn) 在都到 es6 了。但是我上圖中列出來的這些都是最重要的概念。如果你不懂原型、閉包和作用域，那就說明你還不完全了解 es ，也就是不完全會(huì)用 javascript 。在此毛遂自薦自己之前的一篇系列博客，大家可以去參考： 框架和類庫前面已經(jīng)描述完了 web 前端開發(fā)所需要的理論知識(shí)。如何實(shí)踐呢？ 不能蠻干 還得繞世界去看看，有哪些大牛已經(jīng)為我們做出了如此多的貢獻(xiàn)。用下面的這些類庫或者框架，能大大提高你的開發(fā)效率。首先，jquery 一定是大部分 web 前端開發(fā)者不可或缺的工具。而我利用 jquery 不僅僅

9、停留在只使用它的 api 和插件上，我還會(huì)自己去寫 jquery 插件，我還會(huì)去讀 jquery 的源碼、了解 jquery 的設(shè)計(jì)思路。如果你也能那樣做，請(qǐng)相信我，你會(huì)收獲到意想不到的效果。如果有一個(gè)問題：怎樣才能最最透徹的理解 javascript 的事件系統(tǒng)？最佳答案之一：讀幾遍（一遍可能讀不懂） jquery 關(guān)于事件處理部分的源碼！ bootstrap 不用再過多解釋了吧，從 github 上的排名也能看出道道來。甚至連我們公司的 ui 設(shè)計(jì)師，都從 bootstrap 上截圖作為素材。是全世界最強(qiáng)大的圖標(biāo)系統(tǒng)。相比于 css 制作圖標(biāo)來說，這個(gè)要好很多倍，不管是開發(fā)、效率還是維護(hù)上

10、。能讓我自定義選擇自己的圖標(biāo)文件。 requirejs 和 seajs 這種模塊定義系統(tǒng)，也一定是你系統(tǒng)中不可或缺的。我曾經(jīng)看過一個(gè)教程，講師就說：requirejs 帶來了既 jquery 之后的第二次前端技術(shù)變革。其他的，backbone 、angular 、react 這些也慢慢的開始發(fā)揮了他們的價(jià)值，此處精力有限就不再贅述了 但是，他們很重要 你至少要試著去了解它們。6. 編碼開發(fā)要問編碼 ide 哪家強(qiáng)，當(dāng)然要屬微軟的 visualstudio ！但是即便是微軟的 vs 最新版本，它也代替不了下面要說的這套開發(fā)環(huán)境。如果你專門做 web 前端，就不要在用 vs 了，當(dāng)然要選擇 sub

11、lime 。寫 html 語句還用手動(dòng)一條一條寫嗎？你得需要 zencoding 的協(xié)助，否則效率太差了。另外，針對(duì) html 、css 、js 的壓縮、合并、語法檢查，文件的清除、復(fù)制這些操作，你還要手動(dòng)去做嗎？ 你需要 grunt 或者 gulp 的幫助。在此毛遂自薦自己的教程，講的比較詳細(xì)，適合初學(xué)者學(xué)習(xí)。如果你的系統(tǒng)中有比較多的 js 代碼或者文件，請(qǐng)選擇一個(gè)合適的模塊定義規(guī)范 cmd / amd請(qǐng)用 git 來幫助你做文件版本管理，最簡(jiǎn)單的就是使用 github 。調(diào)試、測(cè)試，也都有專門的工具，都是需要學(xué)的我的天哪 這些字寫到現(xiàn)在寫的我的手都酸了，別說要學(xué)習(xí)這些知識(shí)了 再也別說我們

12、web 前端是 三大塊 了！ 運(yùn)行環(huán)境當(dāng)系統(tǒng)真正到了運(yùn)行環(huán)境中，當(dāng)你覺得終于完事兒的時(shí)候，其實(shí)還有好幾個(gè)知識(shí)點(diǎn)需要你掌握?？聪聢D：首先，你要知道 web 系統(tǒng)雖然大部分是在瀏覽器下運(yùn)行，但是 js 可能會(huì)被運(yùn)行在 node 環(huán)境。在瀏覽器環(huán)境下，最重要的兩點(diǎn)是： web 安全和性能優(yōu)化。需要注意的綱要我都列出來了，如果想了解推薦兩本書白帽子將 web 安全高性能網(wǎng)站建設(shè)指南 其他以上這些是全部的知識(shí)體系。如果你想成為一名合格的、讓 leader 喜歡的程序猿，你除了知道這些知識(shí)之外，我覺得還需要以下幾點(diǎn)：要了解敏捷軟件開發(fā)流程（如 scrum ）和項(xiàng)目管理知識(shí)（如考取pmp ），這也屬于一種

13、軟 知識(shí)吧；要學(xué)會(huì)在網(wǎng)上和別人交流（博客、qq 群、開源項(xiàng)目），交流能讓自己看到自己的不足；要學(xué)會(huì)自我反省和自我學(xué)習(xí)。就像我現(xiàn)在一樣，試著自己總結(jié)一下屬于自己的東西，隨時(shí)反省隨時(shí)進(jìn)步。 -歡迎關(guān)注我的教程：- 也歡迎關(guān)注我的開源項(xiàng)目- 隨機(jī)視頻聊天-【篇二： web 開發(fā)知識(shí)點(diǎn)】html （超文本標(biāo)記語言）是網(wǎng)頁的核心，學(xué)好 html 是成為 web 開發(fā)人員的基本條件。 html 很容易學(xué)習(xí)的，但也很容易誤用，要學(xué)精 還得費(fèi)點(diǎn)功夫。隨著 html5 的發(fā)展和普及，了解 html5 也將成為 web 開發(fā)人員的必修課。涉及到網(wǎng)頁外觀時(shí)，就需要學(xué)習(xí) css 了，它可以幫你把網(wǎng)頁做得更美觀。利用

14、html 和 css 模擬一些你所見過的網(wǎng)站的排版和布局（色彩，圖片，文字樣式等等）。第二步：學(xué)習(xí) javascript, 了解 domjavascript 是一種能讓你的網(wǎng)頁更加生動(dòng)活潑的程序語言。學(xué)習(xí)javascript 的基本語法，學(xué)會(huì)用 javascript 操作網(wǎng)頁中 dom 元素。接著學(xué)習(xí)使用一些 javascript 庫，比如 jquery 是大部分 web 開發(fā) 人員都喜歡用的，通過 jquery 可以有效的提高 javascript 的開發(fā)效 率。第三步：了解 web 服務(wù)器你不必在這上面花太多精力，但對(duì) iis 、apache 基本配置要掌握，這方面的知識(shí)學(xué)起來也相對(duì)容易，

15、不會(huì)花多長(zhǎng)時(shí)間。學(xué)習(xí)一點(diǎn) unix 和 linux 的基本知識(shí)，因?yàn)榇蟛糠?web 服務(wù)器都運(yùn)行在 unix 和 linux 平臺(tái)上。第四步: 學(xué)好一門服務(wù)器端腳本語言服務(wù)器端腳本編程（后臺(tái)開發(fā)）也是 web 開發(fā)人員的基本功之一，你只需挑選一個(gè)服務(wù)器端腳本語言，然后學(xué)好它。目前流行的服務(wù)器腳本語言有： php 、 、jsp 、ruby 、python 、等。 第五步：學(xué)習(xí)數(shù)據(jù)庫及 sql 語法 要構(gòu)建動(dòng)態(tài)頁面通常會(huì)使用到數(shù)據(jù)庫，常用的數(shù)據(jù)庫有 sqlserver 、oracle 、mysql 等，它們都會(huì)遵循標(biāo)準(zhǔn)的 sql 原則。通常 程序使用 sqlserver 數(shù)據(jù)庫， php 、jav

16、a 使用 oracle 、mysql 數(shù)據(jù)庫。第六步：綜合實(shí)戰(zhàn)選一個(gè)你喜歡的后臺(tái)編程語言，結(jié)合之前學(xué)到的html,css,javascript 前端技術(shù)，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的留言本、論壇程序、進(jìn)而實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 cms （內(nèi)容管理系統(tǒng)） 第七步：學(xué)習(xí)使用 web 框架當(dāng)你掌握了 html ，css ，javascript 和服務(wù)器端腳本語言后，就應(yīng)該找一個(gè) web 框架加快你的 web 開發(fā)速度，使用框架可以節(jié)約你很多時(shí)間。比如.net 的 mvc ，java 的 ssh ，php 的 cakephp 、codeigniter 、zend ，ruby 的 ror ，python 的 dijango

17、等等，其實(shí)里面都有一些相通之處。整個(gè)開發(fā)過程你還可能會(huì)學(xué)習(xí)到一些工具的使用：visio ，dreamweaver ，vistual studio 、elipse 、(vim, editplus, notpad ) 、sqlserver 、phpmyadmin ，各種瀏覽器以及 firebug 的插件，ie 下的 webdevelopmenthelper 、ietester 等。如果你足夠 用心，你還發(fā)掘出很多不錯(cuò)的資源，例如 msdn ，w3cschool ，一 些前輩的博客，一些技術(shù)論壇等等，這都是你未來前進(jìn)道路上的財(cái) 富。如還想深入研究，學(xué)學(xué) http 協(xié)議,理解什么是無狀態(tài)，不然你永 遠(yuǎn)

18、做不好 web 開發(fā)，研究 web 程序服務(wù)端運(yùn)行原理，還有tcp/ip,udp 協(xié)議等。從最簡(jiǎn)單的 html 到 web 框架，內(nèi)容還是不少，要想精通這里的每一樣技術(shù)，都得下苦功夫才行。半年的時(shí)間，足夠你對(duì) web 開發(fā)產(chǎn)生一個(gè)有效的認(rèn)識(shí)，這個(gè)時(shí)候，再思考你進(jìn)一步學(xué)習(xí)的方向吧。來源:/web/javascript/196.html【篇三： web 開發(fā)知識(shí)點(diǎn)】html （超文本標(biāo)記語言）是網(wǎng)頁的核心，學(xué)好 html 是成為 web 開發(fā)人員的基本條件。 html 很容易學(xué)習(xí)的，但也很容易誤用，要學(xué)精還得費(fèi)點(diǎn)功夫。隨著 html5 的發(fā)展和普及，了解 html5 也將成為 web 開發(fā)人員的必

19、修課。涉及到網(wǎng)頁外觀時(shí)，就需要學(xué)習(xí) css 了，它可以幫你把網(wǎng)頁做得更美觀。利用 html 和 css 模擬一些你所見過的網(wǎng)站的排版和布局（色彩，圖片，文字樣式等等）。第二步：學(xué)習(xí) javascript, 了解 dom javascript 是一種能讓你的網(wǎng)頁更加生動(dòng)活潑的程序語言。學(xué)習(xí) javascript 的基本語法，學(xué)會(huì)用javascript 操作網(wǎng)頁中 dom 元素。接著學(xué)習(xí)使用一些 javascript 庫，比如 jquery 是大部分 web 開發(fā)人員都喜歡用的，通過 jquery 可以有效的提高 javascript 的開發(fā)效率。第三步：了解 web 服務(wù)器 你不必在這上面花太多

20、精力，但對(duì) iis 、apache 基本配置要掌握，這方面的知識(shí)學(xué)起來也相對(duì)容易，不會(huì)花多長(zhǎng)時(shí)間。學(xué)習(xí)一點(diǎn) unix 和 linux 的基本知識(shí)，因?yàn)榇蟛糠?web 服務(wù)器都運(yùn)行在 unix 和 linux 平臺(tái)上。第四步: 學(xué)好一門服務(wù)器端腳本語言 服務(wù)器端腳本編程（后臺(tái)開發(fā)）也是 web 開發(fā)人員的基本功之一，你只需挑選一個(gè)服務(wù)器端腳本語言，然后學(xué)好它。目前流行的服務(wù)器腳本語言有： php 、 、jsp 、ruby 、python 、等。第五步：學(xué)習(xí)數(shù)據(jù)庫及 sql 語法 要構(gòu)建動(dòng)態(tài)頁面通常會(huì)使用到數(shù)據(jù)庫，常用的數(shù)據(jù)庫有 sqlserver 、oracle 、mysql 等，它們都會(huì)遵循標(biāo)準(zhǔn)的 sql 原則。通常 程序使