今天給大家?guī)淼氖谴髷?shù)據(jù)開發(fā)基礎(chǔ)的WEB基本原理及常用開發(fā)工具的了解，無論是在日常生活中還是在工作辦公中，我們總是會(huì)瀏覽到各種各樣的網(wǎng)頁，比如淘寶、微博、知乎，我們的直觀感受就是點(diǎn)一下進(jìn)入一個(gè)頁面或者滑動(dòng)瀏覽頁面，而他們是如何構(gòu)成就是今天主要的講解內(nèi)容-WEB。

[[380636]]

1.什么是WEB?

WEB即world wide web，我們所熟知的WWW就是由這三個(gè)單詞的首字母組成的，也就是一種體系結(jié)構(gòu)，它是建立在Internet之上并且駐留在某種計(jì)算機(jī)上的程序，通過它可以訪問遍布于因特網(wǎng)(internet)主機(jī)上的鏈接文檔。這里就不做過多贅述了。

2.WEB基本原理

客戶端和Web服務(wù)器通過HTTP協(xié)議進(jìn)行通信。Web服務(wù)器有是也叫HTTP服務(wù)器或Web容器。HTTP協(xié)議采用的是請求/響應(yīng)模式。即客戶端發(fā)起HTTP請求，web服務(wù)器接收并解析處理HTTP請求，然后將HTTP響應(yīng)發(fā)送給客戶端。

比如

(1) 用戶做出了一個(gè)操作，然后瀏覽器獲取了該事件。

(2) 瀏覽器與對(duì)端服務(wù)程序建立TCP連接。

(3) 瀏覽器將用戶的事件按照HTTP協(xié)議格式整合成一個(gè)數(shù)據(jù)包，其本質(zhì)也就是在待發(fā)送的緩沖區(qū)里有一段寫著HTTP協(xié)議格式的字節(jié)流

(4) 瀏覽器確認(rèn)對(duì)端可操作，并將該數(shù)據(jù)包輸入至Internet，數(shù)據(jù)包經(jīng)過internet最終到達(dá)對(duì)端服務(wù)程序。

(5) 對(duì)端服務(wù)程序拿到數(shù)據(jù)包后，以同樣的HTTP協(xié)議格式解壓數(shù)據(jù)包，以此來獲知客戶端的需求。

(6) 在了解需求之后進(jìn)行下一步操作。

(7) 將需求的結(jié)果輸入緩沖區(qū)。

(8) 按照HTTP協(xié)議格式將需求的結(jié)果中的數(shù)據(jù)打包。

(9) 服務(wù)器確認(rèn)對(duì)端可寫，緊接著將該數(shù)據(jù)包輸入至Internet，該數(shù)據(jù)包經(jīng)過網(wǎng)絡(luò)最終遞交到客戶端。

(10) 瀏覽器拿到數(shù)據(jù)包后，以HTTP協(xié)議格式解包，然后再解析數(shù)據(jù)。

(11) 瀏覽器將解析后的數(shù)據(jù)展示在頁面上。

簡單來看就如下圖

這就是WEB的基本工作原理，看似繁多實(shí)則就三步：

1.接收數(shù)據(jù) 2. 發(fā)送數(shù)據(jù) 3. 數(shù)據(jù)處理

上面我們了解到了WEB的基本工作原理，那下面我們就來認(rèn)識(shí)下WEB常用的開發(fā)工具，好墨配好硯，我們也得需要選擇更合適自己的WEB開發(fā)工具。

3. WEB常用開發(fā)工具

(1)WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經(jīng)被廣大中國JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。有許多方便適用的功能，如支持眾多語言和框架、代碼補(bǔ)全、多個(gè)插入符號(hào)和選擇等功能，這么多人推薦是并無道理的。

(2)Visual Studio Code

Visual Studio Code(簡稱：Vscode)該編輯器也是一款集大成的編輯器，具備多種功能，支持多種語言，可定制的熱鍵綁定，括號(hào)匹配以及代碼片段收集。

(3)Notepad++

Notepad++ 是一款非常有特色的編輯器，是開源軟件，可以免費(fèi)使用。我們開發(fā)人員都是必備的。支持的語言: C, C++ , Java , C#, XML, HTML, PHP,Javascript!

(4)HBuilder

HBuilder是專為前端打造的開發(fā)工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數(shù)據(jù)、可以方便的制作手機(jī)APP、最保護(hù)眼睛的綠柔設(shè)計(jì)等特點(diǎn)。支持HTML、CSS、JS、PHP的快速開發(fā)。

(5)Bootstrap

Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的，它是一個(gè) CSS 和HTML 的集合，它使用了最新的瀏覽器技術(shù)，簡潔、直觀、強(qiáng)悍的前端開發(fā)框架是它最讓我喜歡的特點(diǎn)。

(6)notepad++

軟件小巧高效，支持27種編程語言，支持C,C++ ,Java ,C#, XML, HTML, PHP,JS 等眾多語言，Notepad++ 內(nèi)置支持多達(dá)27種語法高亮度顯示。是一款小巧而功能強(qiáng)大的軟件。最重要的是免費(fèi)使用!真香!

(7)Foundation

Foundation 是一個(gè)易用、強(qiáng)大而且靈活的框架，用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。提供多種 Web 上的 UI 組件，如表單、按鈕、Tabs 等。

(8)editplus

EditPlus是一款由韓國 Sangil Kim (ES-Computing)出品的小巧但是功能強(qiáng)大的可處理文本、HTML和程序語言的Windows編輯器，和notepad++一樣短小精悍，是一套功能非常強(qiáng)大的文字編輯器，擁有無限制的Undo/Redo(撤銷)、英文拼字檢查、自動(dòng)換行、列數(shù)標(biāo)記、搜尋取代、同時(shí)編輯多文件、全屏幕瀏覽功能。除了支持HTML, CSS,等多種語言外還內(nèi)建完整的HTML和CSS指令功能。

還有很多就不一一介紹了，就只說列舉下名字：Cloud9 IDE、GIMP、SecureHeaders、Fontello。大家可以自行去使用，畢竟鞋子合不合腳也只有自己才知道，希望大家能有所收獲。