欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  第十一章前端开发
 
  11.1
 
  HTTP1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等
 
  1、keepalive连接:
 
  1、长连接
 
  允许HTTP设备在事务处理结束之后将TCP连接保持在打开的状态,以便未来的HTTP请求重用现在的连接,直到客户端或服务器端决定将其关闭为止。
 
  2、HTTP1.1对比HTTP1.0
 
  在HTTP1.0中使用长连接需要添加请求头Connection:Keep-Alive,而在HTTP1.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(PartialContent)
 
  get和post的区别:
 
  1、参数的组织方式不同2、传输数据大小限制3、安全性
 
  Request请求的格式:
 
  发送HTTP请求:通过TCP套接字,客户端向Web服务器发送一个文本的请求报文,一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
 
  GET/POSTurlHTTP/1.1\r\n#请求行
 
  k1:v1\r\n#RequestHeaders:user-agent、referer、cookie
 
  k2:v2\r\n
 
  ....
 
  \r\n#空行
 
  请求体(只有post方法才有请求体)
 
  HTTP的响应消息Response格式:
 
  服务器接受请求并返回HTTP响应:Web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
 
  HTTP/1.1200Ok\r\n#状态行
 
  k1:v1\r\n#ResponseHeaders
 
  k2:v2\r\n
 
  ...
 
  \r\n#空行
 
  响应体(即我们要从服务端下载的内容)
 
  HTTP协议关键性总结:
 
  1、简单快速2、灵活3、无连接4、无状态5、支持B/S及C/S模式
 
  11.11自定义套接字分析HTTP协议
 
  fromsocketimport*
 
  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)
 
  ?
 
  withopen('index.html',mode='rb')asf:#发送本地文件作为响应消息
 
  data=f.read()
 
  conn.send("HTTP/1.1200OK\r\nContent-Type:text/html;charset=utf-8\r\n\r\n%s".encode('utf-8')%data)
 
  ?
 
  conn.close()
 
  server.close()
 
  11.2HTML
 
  11.21head内的meta和非meta标签
 
  <!DOCTYPEhtml>#声明html5
 
  <htmllang="en">
 
  <head>
 
  <metacharset="utf-8">#设置解码类型
 
  <metaname="Description"content="具体描述。。。">#网页描述信息
 
  <metaname="Keywords"content="python,linux,go,java,c,IT">#设置搜索引擎搜索关键字
 
  <metahttp-equiv="refresh"content="3;https://www.baidu.com">#3秒后刷新并跳转到链接
 
  #head内的非meta标签
 
  <title>百度一下,你就知道</title>#显示在标题栏的标题
 
  <linkrel="shortcuticon"href="https://www.baidu.com/favicon.ico"type="image/x-icon">
 
  #<style>方式一:设置css样式#设置标题栏显示的图片
 
  #p{color:rebeccapurple;}
 
  #</style>
 
  #<linkrel="stylesheet"href="my.css">方式二:使用链接文件设置css样式
 
  #<scriptsrc="hello.js"></script>使用链接文件设置js效果
 
  </head>
 
  <body>
 
  <p>我是段落</p>
 
  </body>
 
  </html>
 
  11.22img标签
 
  <!DOCTYPEhtml>
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>Title</title>
 
  </head>
 
  <body>
 
  <imagessrc="http://img4.imgtn.bdimg.com/it/u=0.jpg"alt="">#使用网页链接显示图片
 
  <imgsrc="D:\code\1.jpg"alt="">#使用本地绝对路径也可以显示
 
  <imgsrc="images/1.jpg"alt="">#应该使用相对路径
 
  <imagessrc="11.jpg"alt="图片被狗吃了">#alt:图片加载失败时显示的信息
 
  <imagessrc="1.jpg"alt="图片被狗吃了"title="这绝对正常的图片">#title内容在鼠标悬浮图片上时显示
 
  <imgsrc="images/1.jpg"alt="图片被狗吃了"title="这绝对正常的图片"width="200px"height="100px">
 
  #设置图片显示大小
 
  <imgsrc="images/1.jpg"alt="图片加载失败时显示的信息"title="这绝对正常的图片"width="200px">
 
  <imgsrc="images/1.jpg"alt="图片加载失败时显示的信息"title="这绝对正常的图片"height="100px">
 
  #只设置一个参数时另一个自动等比例
 
  </body>
 
  </html>
 
  11.23a标签
 
  语义:标记一个内容为超链接,全称anchor,锚
 
  <!DOCTYPEhtml>
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title></title>
 
  <basetarget="_blank">#设置全局跳转在新页面打开
 
  </head>
 
  <body>#跳转到链接target="_blank/_self"是否在新页面打开title:鼠标悬浮显示的内容
 
  <ahref="https://www.baidu.com"target=""title="">百度一下,你就知道</a>
 
  <ahref="https://www.baidu.com"><imgsrc="images/1.jpg"alt=""></a>#图片跳转到链接
 
  <ahref="index.html">锤你胸口</a>#跳转到文件
 
  #假链接
 
  <ahref="">地图</a>#刷新页面,回到当前页顶部
 
  <ahref="#">新闻页</a>#直接跳到当前页顶部(不刷新)
 
  <ahref="javascript:">学术</a>#到当前页(不跳转到顶部,不刷新)
 
  #跳转到当前页面指定位置
 
  <ahref="#egon">你在哪里</a>
 
  <pid="egon">我是英俊潇洒的EGON</p>
 
  #跳转到指定页面指定位置
 
  <ahref="xxxx.html#egon">找EGON</a>
 
  </body>
 
  </html>
 
  11.24列表标签
 
  11.241无序列表
 
  ul通常应该只嵌套li标签,而li标签却可以嵌套任意其他标签
 
  <!DOCTYPEhtml>
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>Title</title>
 
  </head>
 
  <body>
 
  #<ulstyle="list-style:none">去掉圆点、空心圆等
 
  <ultype="circle">#以空心圆方式显示列
 
  <li>秒杀</li>
 
  <li>优惠券</li>
 
  <li>PLUS会员</li>
 
  <li>山沟</li>
 
  <li>二手东</li>
 
  </ul>
 
  </body>
 
  </html>
 
  11.242有序列表
 
  有序列表能干的事,完全可以用无序列表取代
 
  <!DOCTYPEhtml>
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>Title</title>
 
  </head>
 
  <body>
 
  <h1>智商排名</h1>
 
  <oltype="1">
 
  <li>Egon</li>
 
  <li>lqz</li>
 
  <li>wpq</li>
 
  <li>alex</li>
 
  <li>yh</li>
 
  </ol>
 
  </body>
 
  </html>
 
  11.243自定义列表
 
  对一个题目进行解释说明的时候,用自定义列表,可以做网站尾部相关信息,网易注册界面的输入框
 
  <!DOCTYPEhtml>
 
  <htmllang="en">
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>Title</title>
 
  </head>
 
  <body>
 
  <dl>
 
  <dt><h1>标题1</h1></dt>
 
  <dd><ahref="#">内容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
 
  

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h54902.shtml