python 之前端开发（HTTP协议、head标签、img标签、a标签、列表标签）

第十一章前端开发

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="data:images/1.jpg" alt="" >                              #应该使用相对路径

    <images src="11.jpg" alt="图片被狗吃了">                        #alt:图片加载失败时显示的信息

    <images src="1.jpg" alt="图片被狗吃了" title="这绝对正常的图片">   #title内容在鼠标悬浮图片上时显示

    <img src="data:images/1.jpg" alt="图片被狗吃了" title="这绝对正常的图片" width="200px" height="100px">

                                                                #设置图片显示大小

    <img src="data:images/1.jpg" alt="图片加载失败时显示的信息" title="这绝对正常的图片" width="200px">

    <img src="data: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="data: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