Web 开发基础
一、 Web 開發簡介
最早的軟件都是運行在大型機上的，軟件使用者登陸到大型機上去運行軟件。后來隨著 PC 機的興起，軟件開始主要運行在桌面上，而數據庫這樣的軟件運行在服務器端，這種 Client/Server 模式簡稱 CS 架構。隨著互聯網的興起，人們發現，CS 架構不適合 Web，最大的原因是 Web 應用程序的修改和升級非常迅速，而 CS 架構需要每個客戶端逐個升級桌面 App，因此，Browser/Server 模式開始流行，簡稱 BS 架構。在 BS 架構下，客戶端只需要瀏覽器，應用程序的邏輯和數據都存儲在服務器端。瀏覽器只需要請求服務器，獲取 Web 頁面，并把 Web 頁面展示給用戶即可。
當然，Web 頁面也具有極強的交互性。由于 Web 頁面是用 HTML 編寫的，而 HTML 具備超強的表現力，并且，服務器端升級后，客戶端無需任何部署就可以使用到新的版本，因此，BS 架構迅速流行起來。
今天，除了重量級的軟件如 Office，Photoshop 等，大部分軟件都以 Web 形式提供。比如，新浪提供的新聞、博客、微博等服務，均是 Web 應用。
Web 應用開發可以說是目前軟件開發中最重要的部分。Web 開發也經歷了好幾個階段：
1. 靜態 Web 頁面：由文本編輯器直接編輯并生成靜態的 HTML 頁面，如果要修改Web 頁面的內容，就需要再次編輯 HTML 源文件，早期的互聯網Web 頁面就是靜態的；
2. CGI：由于靜態 Web 頁面無法與用戶交互，比如用戶填寫了一個注冊表單，靜態Web 頁面就無法處理。要處理用戶發送的動態數據，出現了Common Gateway?Interface，簡稱 CGI，用 C/C++編寫。
3. ASP/JSP/PHP：由于 Web 應用特點是修改頻繁，用 C/C++這樣的低級語言非常不適合 Web 開發，而腳本語言由于開發效率高，與 HTML 結合緊密，因此，迅速取代了 CGI 模式。ASP 是微軟推出的用 VBScript 腳本編程的 Web 開發技術，而 JSP用 Java 來編寫腳本，PHP 本身則是開源的腳本語言。
4. MVC：為了解決直接用腳本語言嵌入 HTML 導致的可維護性差的問題，Web 應用也引入了 Model-View-Controller 的模式，來簡化 Web 開發。ASP 發展為 ASP.Net，JSP 和 PHP 也有一大堆 MVC 框架。
目前，Web 開發技術仍在快速發展中，異步開發、新的 MVVM 前端技術層出不窮。Python 的誕生歷史比 Web 還要早，由于 Python 是一種解釋型的腳本語言，開發效率高，所以非常適合用來做 Web 開發。Python 有上百種 Web 開發框架，有很多成熟的模板技術，選擇 Python 開發 Web 應用，不但開發效率高，而且運行速度快。
二、 HTTP 協議簡介
在 Web 應用中，服務器把網頁傳給瀏覽器，實際上就是把網頁的 HTML 代碼發送給瀏覽器，讓瀏覽器顯示出來。而瀏覽器和服務器之間的傳輸協議是 HTTP，所以：
? HTML 是一種用來定義網頁的文本，會 HTML，就可以編寫網頁；
? HTTP 是在網絡上傳輸 HTML 的協議，用于瀏覽器和服務器的通信。
下面的講解基于 Google 的 Chrome 瀏覽器。
我們需要在瀏覽器中很方便地調試我們的 Web 應用，而 Chrome 提供了一套完整地調試工具，非常適合 Web 開發。
安裝好 Chrome 瀏覽器后，打開 Chrome，在菜單中找到并打開“開發者工具”。
?
?
Elements 顯示網頁的結構，Network 顯示瀏覽器和服務器的通信。我們點 Network，確保第一個小紅燈亮著，Chrome 就會記錄所有瀏覽器和服務器之間的通信：當我們在地址欄輸入 www.sina.com.cn 時，瀏覽器將顯示新浪的首頁。在這個過程中，瀏覽器都干了哪些事情呢？通過 Network 的記錄，我們就可以知道
我們來總結一下 HTTP 請求的流程：
步驟 1：瀏覽器首先向服務器發送 HTTP 請求，請求包括：
方法：GET 還是 POST，GET 僅請求資源，POST 會附帶用戶數據；
路徑：/full/url/path；
域名：由 Host 頭指定：Host: www.sina.com.cn
以及其他相關的 Header；
如果是 POST，那么請求還包括一個 Body，包含用戶數據。
步驟 2：服務器向瀏覽器返回 HTTP 響應，響應包括：
響應代碼：200 表示成功；
響應類型：由 Content-Type 指定；
以及其他相關的 Header；
通常服務器的 HTTP 響應會攜帶內容，也就是有一個 Body，包含響應的內容，網頁的HTML 源碼就在 Body 中。
步驟 3：如果瀏覽器還需要繼續向服務器請求其他資源，比如圖片，就再次發出HTTP 請求，重復步驟 1、2。
Web 的 HTTP 協議采用了非常簡單的請求-響應模式，從而大大簡化了開發。當我們編寫一個頁面時，我們只需要在 HTTP 請求中把 HTML 發送出去，不需要考慮如何附帶圖片、視頻等，瀏覽器如果需要請求圖片和視頻，它會發送另一個 HTTP 請求，因此，一個 HTTP 請求只處理一個資源。
HTTP 格式
每個 HTTP 請求和響應都遵循相同的格式，一個 HTTP 包含 Header 和 Body 兩部分，其中 Body 是可選的。
HTTP 協議是一種文本協議，所以，它的格式也非常簡單。
HTTP GET 請求的格式：
GET /path HTTP/1.1
Header1: Value1
Header2: Value2
Header3: Value3
每個 Header 一行一個，換行符是\r\n。
HTTP POST 請求的格式：
POST /path HTTP/1.1
Header1: Value1
Header2: Value2
Header3: Value3
body data goes here...
當遇到連續兩個\r\n 時，Header 部分結束，后面的數據全部是 Body。
HTTP 響應的格式：
200 OK
Header1: Value1
Header2: Value2
Header3: Value3
?
body data goes here...
HTTP 響應如果包含 body，也是通過\r\n\r\n 來分隔的。請再次注意，Body 的數據類型由 Content-Type 頭來確定，如果是網頁，Body 就是文本，如果是圖片，Body 就是圖片的二進制數據。
當存在 Content-Encoding 時，Body 數據是被壓縮的，最常見的壓縮方式是 gzip，所以，看到 Content-Encoding: gzip 時，需要將 Body 數據先解壓縮，才能得到真正的數據。壓縮的目的在于減少 Body 的大小，加快網絡傳輸。
HTTP 請求方法
根據 HTTP 標準，HTTP 請求可以使用多種請求方法。
HTTP1.0 定義了三種請求方法： GET, POST 和 HEAD 方法。
HTTP1.1 新增了五種請求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
HTTP 狀態碼分類
HTTP 狀態碼由三個十進制數字組成，第一個十進制數字定義了狀態碼的類型，后兩個數字沒有分類的作用。HTTP 狀態碼共分為 5 種類型：
下面是常見的 HTTP 狀態碼：
? 200 - 請求成功
? 301 - 資源（網頁等）被永久轉移到其它 URL
? 404 - 請求的資源（網頁等）不存在
? 500 - 內部服務器錯誤
三、 HTML 簡介
超文本標記語言（HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。你可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。HTML 定義了一套語法規則，來告訴瀏覽器如何把一個豐富多彩的頁面顯示出來。HTML 長什么樣？
我們來看看最簡單的 HTML 長什么樣：
可以用文本編輯器編寫 HTML，然后保存為 hello.html，雙擊或者把文件拖到瀏覽器中，就可以看到效果：
?
?
HTML 文檔就是一系列的 Tag 組成，最外層的 Tag 是<html>。規范的 HTML 也包含<head>...</head>和<body>...</body>（注意不要和 HTTP 的 Header、Body 搞混了），由于 HTML 是富文檔模型，所以，還有一系列的 Tag 用來表示鏈接、圖片、表格、表單等等。
總結：
? HTML 不是一種編程語言，而是一種標記語言
? 標記語言是一套標記標簽 (markup tag)
? HTML 使用標記標簽來描述網頁
? HTML 文檔包含了 HTML 標簽及文本內容
3.1 HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由 尖括號 包圍的關鍵詞，比如 <html>
HTML 標簽通常是 成對出現 的，比如 <b> 和 </b>
標簽對中的第一個標簽是 開始標簽 ，第二個標簽是 結束標簽
開始和結束標簽也被稱為 開放標簽 和 閉合標簽
<標簽>內容</標簽>
HTML 元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
HTML 速查手冊
四、 CSS 簡介
CSS 是 Cascading Style Sheets（層疊樣式表）的簡稱，CSS 用來控制 HTML 里的所有元素如何展現，比如，給標題元素<h1>加一個樣式，變成 48 號字體，灰色，帶陰影：
<html> <head><title>Hello</title><style>h1 {color: #333333;font-size: 48px;text-shadow: 3px 3px 3px #666666;}</style> </head> <body><h1>Hello, world!</h1> </body> </html> 效果如下：CSS 可以通過以下方式添加到 HTML 中:
? 內聯樣式- 在 HTML 元素中使用"style" 屬性
? 內部樣式表 -在 HTML 文檔頭部 <head> 區域使用<style> 元素 來包含 CSS
? 外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用 CSS 文件.
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
?
選擇器通常是你需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是你希望設置的樣式屬性（style attribute）。每個屬性有一個值。
屬性和值被冒號分開。
CSS 聲明總是以分號(;)結束，聲明組以大括號({})括起來。
為了讓 CSS 可讀性更強，你可以每行只描述一個屬性。
五、 JavaScript 簡介
JavaScript 雖然名稱有個 Java，但它和 Java 真的一點關系沒有。JavaScript 是為了讓HTML 具有交互性而作為腳本語言添加的，JavaScript 既可以內嵌到 HTML 中，也可以從外部鏈接到 HTML 中。如果我們希望當用戶點擊標題時把標題變成紅色，就必須通過 JavaScript 來實現：
<html> <head><title>Hello</title><style>h1 {color: #333333;font-size: 48px;text-shadow: 3px 3px 3px #666666;}</style><script>function change() {document.getElementsByTagName('h1')[0].style.color = '#ff0000';}</script> </head> <body><h1 onclick="change()">Hello, world!</h1> </body> </html>點擊標題后效果如下：
?
HTML 中的 JavaScript 腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。如果我們把JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。也可以把腳本保存到外部文件中。外部文件通常包含可被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件
小結
如果要學習 Web 開發，首先要對 HTML、CSS 和 JavaScript 作一定的了解。HTML 定義了頁面的內容，CSS 來控制頁面元素的樣式，而 JavaScript 負責頁面的交互邏輯。當我們用 Python 或者其他語言開發 Web 應用時，我們就是要在服務器端動態創建出HTML，這樣，瀏覽器就會向不同的用戶顯示出不同的 Web 頁面。
轉載于:https://www.cnblogs.com/sunBinary/p/10423468.html
總結
- 上一篇： 梦到孵小鸡是什么意思
- 下一篇： 梦到自己家厨房着火了是什么意思