理論 ：熟悉web基礎與http協議

前言：
前端中語言
HTML（超文本標記語言） CSS(層疊樣式表) JavaScript（動態語言交互，簡稱js） JSP（最終會轉化成java語言） JavaScriptPage（頁面，與js沒有關係）
VUE（典型的能很容易的實現前後端分離，漸進式JavaScript框架）
ECHARTS（用於數據圖片分析展示，可以瞭解一下）
bootstrap （前端開發框架）

C# 主要擅長做窗口開發

一 ： 域名概述

1.1 域名的概念

• IP地址不易記憶

  1.2 早期使用Hosts文件解析域名

• 主機名稱重複
• 主機維護困難

  1.3 DNS（Domain Name System 域名系統）

• 分佈式
• 層次性

  1.4 win中 hosts文件的路徑

  1.5 win中hosts文件中的內容

  
  在進行域名解析時，會默認先去識別hosts文件，若是hosts中有指向，則可以快速的去找到目標服務器，而不用每次都要去找DNS服務器，從而加快運行速度

  1.6 域名空間結構

  
  URL（網絡資源定位） http：//www.kgc.com/test
  協議：//主機名.二級域名.頂級域/虛擬目錄

  二 ： 網頁的概念

  2.1 網站

• 由一個一個頁面構成的，是多個網頁的結合體

  2.2 網頁

• 純文本格式文件，其編寫語言爲HTML，在用戶的瀏覽器中被“翻譯”成網頁形式顯示出來

  2.3 主頁

• 打開網站後出現的第一個網頁成爲網站主頁（或首頁）

  2.4 域名

• 瀏覽網頁時輸入的網址

  2.5 HTTP協議

• 用來傳輸網頁的通信協議
• http：80端口
• https：443端口
• 也有ftp：// 20或21端口

  2.6 URL

• 是一種萬維網尋址系統

  2.7 HTML

• 用來編寫網頁的超文本標記語言

  2.8 超鏈接

• 超鏈接是將網站中不同網頁連接起來的功能

  2.9 發佈

• 將製作好的網頁上傳到服務器供用戶訪問的過程

備註：網頁發佈當中最忌諱絕對路徑 ，如果遷移，就會發生找不到路徑的隱患

三 ：HTML 概述

3.1 HTML超文本標籤語言

• Hyper text markup language
• 網頁的“源碼”

  3.2 瀏覽器 ：“解釋和執行” HTML源碼的工具

有頭有尾的，就是雙結構
以/結尾的，就是單結構

3.2 HTML 文檔的結構

3.3 標籤

title常使用CSS，做美化使用
body是正文內容



title 網站標題
一級標題 h1
p 段落標籤
br 換行標籤
span 包含標籤 ：
style=“color” ；
font-size：1.5rem；
img src=“img/ping/png” width=“100px” height=“150px” 圖片標籤，路徑、寬度、高度（px單位爲像素）
a 超鏈接 href=“網頁名” width=“-blank點擊彈出第二個窗口”

四 ：Web 概述

• web （world wide web）即全區廣域網，也稱爲萬維網
• 一種分佈式圖形信息系統
• 建立在Internet上的一種網絡服務
  

4.1 Web1.0 與Web2.0

4.1.1 web 1.0

• 以編輯爲特徵，網站提供給用戶的內容是編輯處理後提供的，然後用戶閱讀網站提供的內容。這個過程是網站到用戶的單向行爲

  4.1.2 web 2.0

• 更注重用戶的交互作用，用戶近視網站內容的消費者（瀏覽者），也是網站內容的製造者
• 加強了網站與用戶之間的互動，網站內容基於用戶提供，網站的諸多功能也由用戶參與建設，實現了網站與用戶雙向的交流與參與

  五 ： 靜態網頁

  5.1.1 靜態網頁是標準的HTML文件

  5.1.2 擴展名是.htm、.html

• 文本、圖像、聲音、FLASH動畫、客戶端腳本和Activex控件及JAVA小程序等

  5.1.3 是網站建設的基礎，早期網站一般都有靜態網頁製作的

  5.1.4 沒有後臺數據庫、不含程序和不可交互的網頁

  5.1.5 相對更新起來比較麻煩，適用於一般更新較少的展示型網站

  5.2 靜態網頁特點

  5.2.1 每個靜態網頁都有一個固定的URL，且URL以.htm、.html、.shtml等常見形式爲後綴，而不含有“？”

  5.2.2 網頁內容一經發布到網站服務器上，無論是否有用戶訪問，每個靜態網頁都是保存在網站服務器上的，也就是說，靜態網頁是實實在在保存在服務器上的文件，每個網頁都是一個獨立的文件

  5.2.3 靜態網友的內容相對穩定，因此容易被搜索引擎檢索

  5.2.4 靜態網頁沒有數據庫的支持，在網站製作和維護方面工作量較大，因此當網站信息量很大時完全依靠靜態網頁製作方式比較困難

  5.2.5 靜態網頁的交互性較差，在功能方面有較大的限制

  5.2.6 頁面瀏覽速度迅速，過程無需連接數據庫，開啓頁面速度快於動態頁面

六 ： 動態網頁

MVC，視圖模板控制器，通過業務請求去判斷資源

6.1.1 網頁URL不固定，能通過後臺與用戶交互

6.1.2 在動態網頁網址中有一個標誌性的符號——“？”

6.1.3 常用的語言有ASP,PHP,JSP等

6.2 動態網頁的特點

6.2.1 交互性

• 即網頁會根據用戶的要求和選擇而動態改變和響應，將瀏覽器作爲客戶端界面，這將是今後WEB發展的大勢所趨

  6.2.2 自動更新

• 無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節省工作量

  6.2.3 因時因人而變

• 當不同的時間，不同的人訪問同一網址時會產生不同的頁面
  備註：以後還會闡述動靜分離

  七 ： HTTP協議

  7.1 http 協議概述

  7.1.1 HTTP協議是互聯網上應用最爲廣泛的一種網絡協議，設計這個協議的目的是爲了發佈和接受web服務器上的HTML頁面

  7.1.2 HTTP協議的版本

• HTTP 0.9
• HTTP 1.0
• HTTP 1.1
• HTTP 2.0

  7.2 HTTP方法

  7.2.1 HTTP支持幾種不同的請求命令，這些命令被稱爲HTTP方法（HTTP method）

  7.2.2 每條HTTP請求報文都包含一個方法，敗訴服務器要執行什麼動作

• 獲取一個web頁面
• 運行一個網關程序
• 刪除一個文件等
  post 和get 請求
  post安全 get效率，get會把信息寫入到url中
  post會將信息進行加密處理

  7.2 HTTP協議有多種獲得Web

• HTTP協議有多種獲得web資源的方法，常用的有兩種：GET和POST
  

  7.3 GET方法：從指定的服務器上獲得數據

• get請求能被緩存
• get請求會保存在瀏覽器的瀏覽記錄裏
• get請求有長度的限制
• 主要用於獲取數據
• 查詢的字符串會顯示在URL中，不安全

7.4 POST方法：提交數據給制定法服務器處理

• POST請求不能被緩存
• post請求不會保存在瀏覽器的瀏覽記錄裏
• post請求沒有長度限制
• 查詢的字符串不會顯示在URL中，比較安全

八 ： HTTP狀態碼

8.1 當使用瀏覽器訪問某一個URL，會根據請求URL返回狀態碼

8.2 通常正常的狀態碼爲2xx，3xx（如200）

8.3 如果出現異常會返回4xx，5xx（如404）

404 地址路徑問題，找不到該網頁

8.4 生產環境常見的HTTP狀態碼

8.5 HTTP協議請求流程分析

f步驟是把服務端的靜態網頁下載到客戶端的temp緩存中

九 ：HTTP消息報文格式

9.1 HTTP請求消息報文格式包括：請求行、請求頭、請求體

1 Get /mattmarg/ HTP/1.1請求目錄
2 User-Agent：Mozilla/2.0（Macintosh；I；PPC）瀏覽器標識
3 Accept：text/html； /
4 Cookie：name = value
5 Referer：http：//XXX.com/a.html
備註：
cookie ：記錄日誌，可以記錄賬號密碼，
referer ：重定向 ，防止直接在未授權的情況下進入內部頁面

9.2 HTTP響應消息報文格式包括：狀態行、響應頭、響應體

• 01 HTTP/1.1 200 OK
• 02 Server: Microsoft-IIS/5.1
• ......
• 06 Accept-Ranges:bytes
• 07 Last-Modified: Wed, 02 Jul 2008 01:01:26 GMT
• 08 ETag: "0f71527dfdbc81:ade"
• 09 Content-Length: 46
• 10
• 11 < html >< head >< /head >< body >adfasfa< /body >< /html >

  9.3 針對HTTP，通常用一款Fiddler 這款抓包工具，用於分析HTTP報文