第十一章前端開發 11.1 HTTP 1.1引入了許多關鍵性能優化：keepalive連接，請求流水線，chunked編碼傳輸，位元組範圍請求等 1、keepalive連接: 2、Pipelining（請求流水線） 3、chunked編碼傳輸 4、位元組範圍請求 get 和 post 的區別： 1、參數 ...
第十一章前端開發
11.1
HTTP 1.1引入了許多關鍵性能優化：keepalive連接，請求流水線，chunked編碼傳輸，位元組範圍請求等
1、keepalive連接:
1、長連接
允許HTTP設備在事務處理結束之後將TCP連接保持在打開的狀態，以便未來的HTTP請求重用現在的連接，直到客戶端或伺服器端決定將其關閉為止。
2、HTTP1.1對比HTTP1.0
在HTTP1.0中使用長連接需要添加請求頭 Connection: Keep-Alive，而在HTTP 1.1 所有的連接預設都是長連接，除非特殊聲明不支持（ HTTP請求報文首部加上Connection: close ）
2、Pipelining（請求流水線）
支持持久連接的客戶端可以“流水線”它的請求（即，發送多個請求而無需等待每個響應）。伺服器必須按照與收到請求的相同順序來向這些請求發送響應。
3、chunked編碼傳輸
1、介紹
該編碼將實體分塊傳送並逐塊標明長度,直到長度為0塊表示傳輸結束, 這在實體長度未知時特別有用(比如由資料庫動態產生的數據)
2、傳輸編碼和分塊編碼
當響應頭裡包含Transfer-Encoding: chunked，代表分塊編碼，會把「報文」分割成若幹個大小已知的塊，塊之間是緊挨著發送的，這樣就不需要在發送之前知道整個報文的大小了，也意味著不需要寫回Content-Length首部了。
3、分塊傳輸的應用
當使用持久連接時，在伺服器發送主體內容之前，必須計算出主體內容的大小，然後放到響應頭裡（Content-Length：主體的位元組數）發送給客戶端。
如果伺服器動態創建內容，可能在發送之前無法知道主體大小，分塊編碼就是為瞭解決這種情況：伺服器把主體逐塊發送，說明每一塊的大小。伺服器再用大小為0的塊作為結束塊。，為下一個響應做準備，此時響應頭裡便不再需要Content-Length了,除非使用了分塊編碼Transfer-Encoding: chunked，否則響應頭首部必須使用Content-Length首部。 6
4、關於Content-Length首部：
如果請求頭包含Accept-Encoding': 'gzip'，則服務端會將內容壓縮後返回，內容的Content-Length長度是壓縮後的長度，如果請求頭不包含Accept-Encoding': 'gzip'，伺服器就不會採取gzip壓縮，同時伺服器設定也不進行分塊編碼。所以返迴響應頭的Content-Length首部是必須的，但是這個值的大小肯定是沒有進行過壓縮的文件大小。
4、位元組範圍請求
HTTP1.1支持傳送內容的一部分。比方說，當客戶端已經有內容的一部分，為了節省帶寬，可以只向伺服器請求一部分。該功能通過在請求消息中引入了range頭域來實現，它允許只請求資源的某個部分。在響應消息中Content-Range頭域聲明瞭返回的這部分對象的偏移值和長度。如果伺服器相應地返回了對象所請求範圍的內容，則響應碼206（Partial Content)
get 和 post 的區別：
1、參數的組織方式不同 2、傳輸數據大小限制 3、安全性
Request請求的格式:
發送HTTP請求:通過TCP套接字，客戶端向Web伺服器發送一個文本的請求報文，一個請求報文由請求行、請求頭部、空行和請求數據4部分組成。
GET/POST url HTTP/1.1\r\n #請求行 k1:v1\r\n #Request Headers：user-agent、referer、cookie k2:v2\r\n .... \r\n #空行 請求體（只有post方法才有請求體）
HTTP的響應消息Response格式:
伺服器接受請求並返回HTTP響應:Web伺服器解析請求，定位請求資源。伺服器將資源複本寫到TCP套接字，由客戶端讀取。一個響應由狀態行、響應頭部、空行和響應數據4部分組成。
HTTP/1.1 200 Ok\r\n #狀態行 k1:v1\r\n #Response Headers k2:v2\r\n ... \r\n #空行 響應體（即我們要從服務端下載的內容）
HTTP協議關鍵性總結:
1、簡單快速 2、靈活 3、無連接 4、無狀態 5、支持B/S及C/S模式
11.11 自定義套接字分析HTTP協議
from socket import * server=socket(AF_INET,SOCK_STREAM) server.bind(('127.0.0.1',80)) server.listen(5) conn,addr=server.accept() data=conn.recv(1024) print(data) with open('index.html',mode='rb') as f: #發送本地文件作為響應消息 data=f.read() conn.send("HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=utf-8\r\n\r\n%s".encode('utf-8') %data) conn.close() server.close()
11.2 HTML
11.21 head內的meta和非meta標簽
<!DOCTYPE html> #聲明html5 <html lang="en"> <head> <meta charset="utf-8"> #設置解碼類型 <meta name="Description" content="具體描述。。。"> #網頁描述信息 <meta name="Keywords" content="python,linux,go,java,c,IT"> #設置搜索引擎搜索關鍵字 <meta http-equiv="refresh" content="3;https://www.baidu.com"> #3秒後刷新並跳轉到鏈接 #head內的非meta標簽 <title>百度一下，你就知道</title> #顯示在標題欄的標題 <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"> #<style> 方式一：設置css樣式 #設置標題欄顯示的圖片 # p {color: rebeccapurple; } #</style> #<link rel="stylesheet" href="my.css"> 方式二：使用鏈接文件設置css樣式 #<script src="hello.js"></script> 使用鏈接文件設置js效果 </head> <body> <p>我是段落</p> </body> </html>
11.22 img標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <images src="http://img4.imgtn.bdimg.com/it/u=0.jpg" alt=""> #使用網頁鏈接顯示圖片 <img src="D:\code\1.jpg" alt="" > #使用本地絕對路徑也可以顯示 <img src="images/1.jpg" alt="" > #應該使用相對路徑 <images src="11.jpg" alt="圖片被狗吃了"> #alt:圖片載入失敗時顯示的信息 <images src="1.jpg" alt="圖片被狗吃了" title="這絕對正常的圖片"> #title內容在滑鼠懸浮圖片上時顯示 <img src="images/1.jpg" alt="圖片被狗吃了" title="這絕對正常的圖片" width="200px" height="100px"> #設置圖片顯示大小 <img src="images/1.jpg" alt="圖片載入失敗時顯示的信息" title="這絕對正常的圖片" width="200px"> <img src="images/1.jpg" alt="圖片載入失敗時顯示的信息" title="這絕對正常的圖片" height="100px"> #只設置一個參數時另一個自動等比例 </body> </html>
11.23 a標簽
語義：標記一個內容為超鏈接，全稱anchor，錨
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <base target="_blank"> #設置全局跳轉在新頁面打開 </head> <body> #跳轉到鏈接 target="_blank/_self"是否在新頁面打開 title:滑鼠懸浮顯示的內容 <a href="https://www.baidu.com" target="" title="">百度一下，你就知道</a> <a href="https://www.baidu.com"><img src="images/1.jpg" alt=""></a>#圖片跳轉到鏈接 <a href="index.html">錘你胸口</a> #跳轉到文件 #假鏈接 <a href="" >地圖</a> #刷新頁面，回到當前頁頂部 <a href="#">新聞頁</a> #直接跳到當前頁頂部(不刷新) <a href="javascript:">學術</a> #到當前頁(不跳轉到頂部,不刷新) #跳轉到當前頁面指定位置 <a href="#egon">你在哪裡</a> <p id="egon">我是英俊瀟灑的EGON</p> #跳轉到指定頁面指定位置 <a href="xxxx.html#egon">找EGON</a> </body> </html>
11.24 列表標簽
11.241 無序列表
ul通常應該只嵌套li標簽，而li標簽卻可以嵌套任意其他標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> #<ul style="list-style: none"> 去掉圓點、空心圓等 <ul type="circle"> #以空心圓方式顯示列 <li>秒殺</li> <li>優惠券</li> <li>PLUS會員</li> <li>山溝</li> <li>二手東</li> </ul> </body> </html>
11.242 有序列表
有序列表能幹的事，完全可以用無序列表取代
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>智商排名</h1> <ol type="1"> <li>Egon</li> <li>lqz</li> <li>wpq</li> <li>alex</li> <li>yh</li> </ol> </body> </html>
11.243 自定義列表
對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易註冊界面的輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <dl> <dt> <h1>標題1</h1> </dt> <dd> <a href="#">內容1</a> </dd> <dd>內容2</dd> <dd>內容3</dd> <dd>內容4</dd> </dl> </body> </html>
註意: 1、dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 2、一個dt可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd
