HTTP and HTML

1、HTTP協議簡介

一、互聯網=物理鏈接介質+互聯網協議

 

二、互聯網創建的目的？

 用於打破地域限制來進行數據傳輸

 

三、什麼是上網？

用戶上網的過程即瀏覽器向服務端發送請求，而後將服務端主機的文本文件下載到本地顯示的過程。而瀏覽器與服務端之間是基於http協議工做的。咱們學習前端開發就是爲了編排好一個文本文件存放到服務端主機，而後提供給瀏覽器下載顯示的，因此在學習前端開發前，咱們必須先研究HTTP協議。

 

四、瀏覽器：具備套接字客戶端功能，以及解析功能（解釋器）的應用程序

 

五、HTTP協議：Hyper Text Transfer Protocol（超文本傳輸協議）（瀏覽器與服務端基於HTTP協議通訊）

#一、HTTP協議是用於從（WWW:World Wide Web，簡萬維網 ）服務器傳輸超文本到本地瀏覽器的傳送協議。

#二、HTTP協議工做於B/S架構上

    瀏覽器做爲HTTP客戶端經過URL向HTTP服務端即WEB服務器發送請求Request。

    Web服務器根據接收到的請求後，向客戶端發送響應信息Response。

#三、HTTP協議是基於TCP/IP通訊協議來傳遞數據的（HTML 文件, 圖片文件等）

 

#4 HTTP版本：HTTP/0.9  HTTP/1.0  HTTP/1.1  HTTP2.0

HTTP/1.1 (目前主流的HTTP協議版本)

a、keepalive鏈接（PERSISTENT CONNECTION、長鏈接）

       容許HTTP設備在事務處理結束以後將TCP鏈接保持在打開的狀態，以便將來的HTTP請求重用如今的鏈接，直到客戶端或服務器端決定將其關閉爲止。

       使得服務器壓力減少；客戶端傳輸速度提升

 

b、請求流水線（PIPELINING）（在長鏈接的基礎上）

       支持持久鏈接的客戶端能夠「流水線」它的請求（即，發送多個請求而無需等待每一個響應）。服務器必須按照與收到請求的相同順序來向這些請求發送響應。

 

c、chunked編碼傳輸

       當響應頭裏包含Transfer-Encoding: chunked，表明分塊編碼，會把「報文」分割成若干個大小已知的塊，塊之間是緊挨着發送的，這樣就不須要在發送以前知道整個報文的大小了，也意味着不須要寫回Content-Length首部了

 

d、字節範圍請求

       HTTP1.1支持傳送內容的一部分。比方說，當客戶端已經有內容的一部分，爲了節省帶寬，能夠只向服務器請求一部分。

 

   #五、HTTPS ：HTTP +SSL；證書認證；CA中心頒發證書

 

2、HTTP協議之請求REQUEST

一、請求的URL

a、URI:統一資源標識符（Uniform Resource Identifiers, URI）

 

b、URL:統一資源定位符(UniformResourceLocator)是互聯網上用來標識某一處資源的地址。

 

c、URI與URL：URL是URI的一種規範的具體實現；URI分爲URL和URN

 

d、URL的組成

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

#1.協議部分：http://

若是不寫，瀏覽器會自動補全，但必須有

 

#2.域名部分：www.aspxfans.com 

一個URL中，也可使用IP地址做爲域名使用；域名--DNS--IP; 必須有

 

#3.端口部分：8080

跟在域名後面的是端口，域名和端口之間使用「:」做爲分隔符。

端口不是一個URL必須的部分，若是省略端口部分，將採用默認web服務端口80

 

#4.虛擬目錄部分：/news/ 從域名後的第一個「/」開始到最後一個「/」爲止。

虛擬目錄不是一個URL必須的部分。

 

#5.文件名部分：index.asp

從域名後的最後一個「/」開始到「？」爲止，若是沒有「?」,則是從域名後的最後一個「/」開始到「#」爲止，是文件部分，若是沒有「？」和「#」，那麼從域名後的最後一個「/」開始到結束，都是文件名部分。

文件名部分也不是一個URL必須的部分，若是省略該部分，則使用默認的文件名

 

#6.參數部分：boardID=5&ID=24618&page=1

從「？」開始到「#」爲止之間的部分爲參數部分，又稱搜索部分、查詢部分。參數能夠容許有多個參數，參數與參數之間用「&」做爲分隔符。

參數部分非必須，主要對數據進行篩選

 

#7.錨部分：#name

從「#」開始到最後，都是錨部分。用來定位在一個頁面中的具體位置。

錨部分也不是一個URL必須的部分

 

#默認根目錄：/var/www/html

 

二、REQUEST請求的格式

請求行（request line）、請求頭部（header）、空行（\r\n）、請求數據

 

爬蟲中最經常使用的三個頭部字段：

User_Agent:用戶代理

Cookie: 以前的登陸信息、憑證

Referer: 從哪跳轉來的

 

三、HTTP請求的方法

一個URL地址用於描述一個網絡上的資源，而HTTP中最基本的四個方法GET, POST, PUT, DELETE就對應着對這個資源的查，改，增，刪4個操做

 

GET與POST的區別

#一、區別1: 參數的組織方式不一樣

GET提交的數據會放在URL以後，以?分割URL和傳輸數據，參數之間以&相連；GET的請求數據爲空。

POST方法是把提交的數據放在HTTP包的Body中

 

#二、區別2：傳輸數據大小限制

GET提交的數據大小有限制（由於瀏覽器對URL的長度有限制），而POST方法提交的數據沒有限制.

 

#三、區別3：安全性

POST的安全性要比GET的安全性高。

 

3、HTTP協議之響應Response

HTTP響應也由四個部分組成，分別是：狀態行、消息報頭、空行和響應正文。

 

狀態碼：由三位數字組成，第一個數字定義了響應的類別，共分五種類別:

1xx：指示信息--表示請求已接收，繼續處理

2xx：成功--表示請求已被成功接收、理解、接受; 200成功

3xx：重定向--要完成請求必須進行更進一步的操做

4xx：客戶端錯誤--請求有語法錯誤或請求沒法實現

5xx：服務器端錯誤--服務器未能實現合法的請求

 

4、HTTP協議完整工做流程

一、客戶端鏈接到Web服務器: 瀏覽器向 DNS 服務器請求解析該 URL 中的域名所對應的 IP 地址;解析出 IP 地址後，根據該 IP 地址和默認端口 80，和服務器創建TCP鏈接

   #傳輸前已經建好鏈接

 

二、發送HTTP請求: 瀏覽器發出讀取文件(URL 中域名後面部分對應的文件)的HTTP 請求，該請求報文做爲 TCP 三次握手的第三個報文的數據發送給服務器

 

三、服務器接受請求並返回HTTP響應: 服務器對瀏覽器請求做出響應，並把對應的 html 文本發送給瀏覽器

 

四、釋放鏈接TCP鏈接(若connection 模式爲keepalive，則該鏈接會保持一段時間，在該時間內能夠繼續接收請求)

 

五、客戶端瀏覽器解析HTML內容: 瀏覽器將該 html 文本並顯示內容

 

5、HTTP協議關鍵性總結

#一、簡單快速

客戶向服務器請求服務時，只需傳送請求方法和路徑。請求方法經常使用的有GET、HEAD、POST。每種方法規定了客戶與服務器聯繫的類型不一樣。因爲HTTP協議簡單，使得HTTP服務器的程序規模小，於是通訊速度很快。

 

#二、靈活

HTTP容許傳輸任意類型的數據對象。正在傳輸的類型由Content-Type加以標記。

 

#三、無鏈接

HTTP無鏈接說的是：當某個客戶機在短期屢次次請求同一個資源，服務器並不能區別是否已經響應過用戶的請求。

針對http無鏈接，人們設計了非持久鏈接和持久鏈接（長鏈接）

 

#四、無狀態：http是無狀態協議，是說http協議無法保存客戶機信息

無狀態的優勢：在服務器不須要先前信息時它的應答就較快。

無狀態的缺點：缺乏狀態意味着若是後續處理須要前面的信息，則它必須重傳。這樣可能致使每次鏈接傳送的數據量增大

關於http無狀態阻礙了交互式應用程序的實現。好比記錄用戶瀏覽哪些網頁、判斷用戶是否擁有權限訪問等。因而，兩種用於保持HTTP狀態的技術就應運而生了，一個是Cookie，而另外一個則是Session

 

#五、支持B/S及C/S模式。

 

6、前段內容介紹

一、HTML：HTML，全稱「Hyper Text Markup Language（超文本標記語言）」。HTML是網頁的結構

二、CSS：全稱「（層疊樣式表）。CSS是網頁的外觀

三、JavaScript: JavaScript是一門腳本語言。JavaScript是頁面的行爲

四、學前端一半工做在考慮兼容性，目前html5在兼容性方面解決的比較好

 

7、HTML簡介

一、瀏覽器也必須有一套本身能識別的標記文本的規範，該規範被稱爲HTML。

 

二、「標記」指的是在編輯文本時用特殊的記號標記一下各部份內容的意義，該記號稱之爲標籤，好比用標籤h1標記標題，用標籤p標籤段落

 

三、「超文本」指的是用超連接的方法，將各類不一樣空間的文字信息組織在一塊兒的網狀文本

 

四、HTML注意事項

#一、記號/標籤是不會顯示出來的。

#二、雖然用<h1>標記的文本在顯示時會被加大加粗，但請務必記住，HTML的做用只有一個它是專門用來對文件作記號來標識其語義的（語義指的是該文本是作什麼用的），加大和加粗這種爲文本添加樣式的操做並非HTML擅長的，雖然早期的時候確實也用HTML來製做樣式，但之後咱們專門用CSS來作這件事，這也是一種解耦合的思想

#三、HTML是一個網頁的主體部分，也是一個網頁的基礎。由於一個網頁能夠沒有樣式，能夠沒有交互，可是必需要有網頁須要呈現的內容。因此HTML部分是整個前端的基礎。

 

五、簡而言之

#一、HTML語法很是寬鬆容錯性強;

#二、XHTML更爲嚴格,它要求標籤必須小寫、必須嚴格閉合、標籤中的屬性必須使用引號引發等等;

#三、HTML5是HTML的下一個版本因此除了很是寬鬆容錯性強之外,還增長許多新的特性

 

8、HTML標籤與文檔結構

一、什麼是標籤

#一、在HTML中規定標籤使用英文的的尖括號即`<`和`>`包起來，如`<html>`、`<head>`、`<body>`都是標籤，

#2. HTML中標籤一般狀況下是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多了一個`/`，開始標籤和結束標籤之間的就是標籤的內容。

#三、有些標籤功能比較簡單，使用一個標籤便可，這種標籤叫作自閉和標籤，例如:<br/> <hr/> <input/> <img/>

 

二、固定的文檔結構組織（！Tab）

<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

 

三、固定的文檔結構組織--各部分解釋

#一、<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤以前，代表該文檔是HTML5文檔。

#二、<html></html> 稱爲根標籤，全部的網頁標籤都在<html></html>中。

#三、<head></head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤，頭部標籤在下一節中會有詳細介紹，<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。

#四、在<body>和</body>標籤之間的內容是網頁的主要內容，最終會在瀏覽器中顯示出來。

 

四、標籤間關係

#一、並列（兄弟／平級）

    head與body

#二、嵌套（父子／上下級）

html內有body

 

五、HTML標籤詳細語法與注意點

<標籤名 屬性1=「值1」 屬性2=「值2」 ......>內容部分</標籤名>

<標籤名 屬性1=「值1」 屬性2=「值2」 ....../>

 

#1. HTML標籤不區分大小寫，`<h1>`和`<H1>`是同樣的，可是咱們一般建議使用小寫，大部分程序員都以小寫爲準。

#2. 標籤之間是能夠嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>

#三、不是全部標籤都支持互相嵌套。

 

六、HTML中標籤分類

單從是否能夠嵌套子標籤的角度去分，標籤分爲兩類

#一、容器類標籤: 容器類標籤能夠簡單的理解爲能嵌套其它全部標籤的標籤。

    h系列

    ul>li

    ol>li

    dl>dt+dd

    div

 

#二、文本類標籤: 文本級的標籤對應容器級標籤，只能嵌套文字/圖片/超連接的標籤。

    p

    span

    strong

    em

    ins

    del

 

七、HTML註釋 （Ctrl ？）

<!--這裏是註釋的內容-->

#一、註釋中能夠直接使用回車換行。

#二、習慣用註釋的標籤把HTML代碼包裹起來

#三、HTML註釋不支持嵌套。

#四、HTML註釋不能寫在HTML標籤中。

 

9、經常使用快捷鍵

一、 ！ Tab   ----快速生成文檔結構

二、 SETTINGS-EDITOR-LIVE TEMPLATES   ---定義模板、快捷鍵

三、 (h$)*6  Tab   ---六個標題標籤 h1,h2,h3,h4,h5,h6

四、 p*n  Tab   ---多個段落標籤 p, p, ...

五、 div > span  Tab   ---嵌套父子模式

六、 div >(span+a)   ---嵌套兄弟模式