python 之 前端開發（HTTP協議、head標籤、img標籤、a標籤、列表標籤）

時間  2019-11-08
標籤 python 前端 開發 http 協議 head 標籤 img 列表 欄目 Python 简体版
原文   原文鏈接

第十一章前端開發

11.1 

HTTP 1.1引入了許多關鍵性能優化：keepalive鏈接，請求流水線，chunked編碼傳輸，字節範圍請求等javascript

一、keepalive鏈接:css

一、長鏈接
容許HTTP設備在事務處理結束以後將TCP鏈接保持在打開的狀態，以便將來的HTTP請求重用如今的鏈接，直到客戶端或服務器端決定將其關閉爲止。
二、HTTP1.1對比HTTP1.0
在HTTP1.0中使用長鏈接須要添加請求頭 Connection: Keep-Alive，而在HTTP 1.1 全部的鏈接默認都是長鏈接，除非特殊聲明不支持（ HTTP請求報文首部加上Connection: close ）

二、Pipelining（請求流水線）html

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

三、chunked編碼傳輸前端

一、介紹
該編碼將實體分塊傳送並逐塊標明長度,直到長度爲0塊表示傳輸結束, 這在實體長度未知時特別有用(好比由數據庫動態產生的數據)
二、傳輸編碼和分塊編碼
當響應頭裏包含Transfer-Encoding: chunked，表明分塊編碼，會把「報文」分割成若干個大小已知的塊，塊之間是緊挨着發送的，這樣就不須要在發送以前知道整個報文的大小了，也意味着不須要寫回Content-Length首部了。
三、分塊傳輸的應用
當使用持久鏈接時，在服務器發送主體內容以前，必須計算出主體內容的大小，而後放到響應頭裏（Content-Length：主體的字節數）發送給客戶端。
若是服務器動態建立內容，可能在發送以前沒法知道主體大小，分塊編碼就是爲了解決這種狀況：服務器把主體逐塊發送，說明每一塊的大小。服務器再用大小爲0的塊做爲結束塊。，爲下一個響應作準備，此時響應頭裏便再也不須要Content-Length了,除非使用了分塊編碼Transfer-Encoding: chunked，不然響應頭首部必須使用Content-Length首部。 6
四、關於Content-Length首部：
若是請求頭包含Accept-Encoding': 'gzip'，則服務端會將內容壓縮後返回，內容的Content-Length長度是壓縮後的長度，若是請求頭不包含Accept-Encoding': 'gzip'，服務器就不會採起gzip壓縮，同時服務器設定也不進行分塊編碼。因此返回響應頭的Content-Length首部是必須的，可是這個值的大小確定是沒有進行過壓縮的文件大小。

四、字節範圍請求html5

HTTP1.1支持傳送內容的一部分。比方說，當客戶端已經有內容的一部分，爲了節省帶寬，能夠只向服務器請求一部分。該功能經過在請求消息中引入了range頭域來實現，它容許只請求資源的某個部分。在響應消息中Content-Range頭域聲明瞭返回的這部分對象的偏移值和長度。若是服務器相應地返回了對象所請求範圍的內容，則響應碼206（Partial Content)

get 和 post 的區別：java

一、參數的組織方式不一樣 二、傳輸數據大小限制 三、安全性python

Request請求的格式:linux

發送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協議關鍵性總結:

一、簡單快速 二、靈活 三、無鏈接 四、無狀態 五、支持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>

注意: 一、dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而能夠在dt和dd中添加任意其餘標籤 二、一個dt能夠沒有對應的dd，也能夠有多個，但建議一個dt對應一個dd

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程