Http协议
1.http概述
HTTP（hypertext transport protocol），即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。
HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。其实我们要学习的就是这个两个格式！客户端发送给服务器的格式叫“请求协议”；服务器发送给客户端的格式叫“响应协议”。
特点：
- HTTP叫超文本传输协议，基于请求/响应模式的！
- HTTP是无状态协议。
URL：统一资源定位符，就是一个网址：协议名://域名:端口/路径，例如：http://www.oldboy.cn:80/index.html
2.请求协议
(浏览器----->server)
请求协议的格式如下：
请求首行； // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1 请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost 空行； // 用来与请求体分隔开 请求体。 // GET没有请求体，只有POST有请求体。
1.GET请求
HTTP默认的请求方法就是GET
* 没有请求体
* 数据必须在1K之内！
* GET请求数据会暴露在浏览器的地址栏中
GET请求常用的操作：
1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求
2. 点击页面上的超链接也一定是GET请求
3. 提交表单时，表单默认使用GET请求，但可以设置为POST
1.请求协议 （浏览器---->server）
url:www.baidu.com?a=1
url:www.baidu.com?username=yuan&pwd=123& get存放信息 用&分割字符
(1)请求首行 GET /favicon.ico HTTP/1.1
(2)请求头信息 (发完一次请求跟server端等待3000毫秒，然后断开)
...
Host: 127.0.0.1:8081
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Accept: */*
Referer: http://127.0.0.1:8081/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
cookie(): 存一堆键值对的，对应每个server端的信息
注释：
- GET 127.0.0.1:8090/login HTTP/1.1：GET请求，请求服务器路径为 127.0.0.1:8090/login ，协议为1.1；
- Host:localhost：请求的主机名为localhost；
- *User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0：与浏览器和OS相关的信息。有些网站会显示用户的系统版本和浏览器版本信息，这都是通过获取User-Agent头信息而来的；
- Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8：告诉服务器，当前客户端可以接收的文档类型，其实这里包含了*/*，就表示什么都可以接收；
- Accept-Language: zh-cn,zh;q=0.5：当前客户端支持的语言，可以在浏览器的工具选项中找到语言相关信息；
- Accept-Encoding: gzip, deflate：支持的压缩格式。数据在网络上传递时，可能服务器会把数据压缩后再发送；
- Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7：客户端支持的编码；
- Connection: keep-alive：客户端支持的链接方式，保持一段时间链接，默认为3000ms；
- Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98：因为不是第一次访问这个地址，所以会在请求中把上一次服务器响应中发送过来的Cookie在请求中一并发送去过；这个Cookie的名字为JSESSIONID。
- Referer: http://localhost:8080/hello/index.jsp：请求来自哪个页面，例如你在百度上点击链接到了这里，那么Referer:http://www.baidu.com；如果你是在浏览器的地址栏中直接输入的地址，那么就没有Referer这个请求头了；
(3)空行
(4)请求体（请求数据）---------get请求体不存在 post存放信息
2.POST请求
(1). 数据不会出现在地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中如果存在中文，会使用URL编码！
3.响应协议
1.响应内容
响应协议的格式如下：
响应首行； 响应头信息； 空行； 响应体。
响应内容是由服务器发送给浏览器的内容，浏览器会根据响应内容来显示。遇到<img src=''>会开一个新的线程加载，所以有时图片多的话，内容会先显示出来，然后图片才一张张加载出来。
- HTTP/1.1 200 OK：响应协议为HTTP1.1，状态码为200，表示请求成功，OK是对状态码的解释；
- Server:WSGIServer/0.2 CPython/3.5.2：服务器的版本信息；
- Content-Type: text/html;charset=UTF-8：响应体使用的编码为UTF-8；
- Content-Length: 724：响应体为724字节；
- Set-Cookie: JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello：响应给客户端的Cookie；
- Date: Wed, 25 Sep 2012 04:15:03 GMT：响应的时间，这可能会有8小时的时区差；
2.状态码
- 200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
- 404：请求的资源没有找到，说明客户端错误的请求了不存在的资源；
- 500：请求资源找到了，但服务器内部出现了错误；
- 302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
- 304：
当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了 index.html的最后修改时间，浏览器会把index.html内容，以及最后响应时间缓存下来。当用户第 二次请求index.html时，在请求中包含一个名为If-Modified-Since请求头，它的值就是第一次请 求时服务器通过Last-Modified响应头发送给浏览器的值，即index.html最后的修改时间， If-Modified-Since请求头就是在告诉服务器，我这里浏览器缓存的index.html最后修改时间是这个, 您看看现在的index.html最后修改时间是不是这个，如果还是，那么您就不用再响应这个index.html 内容了，我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值，与index.html 的当前最后修改时间比对，如果相同，服务器会发响应码304，表示index.html与浏览器上次缓存的相 同，无需再次发送，浏览器可以显示自己的缓存页面，如果比对不同，那么说明index.html已经做了修 改，服务器会响应200。
3.其他响应头
告诉浏览器不要缓存的响应头：
- Expires: -1；
- Cache-Control: no-cache；
- Pragma: no-cache；
自动刷新响应头，浏览器会在3秒之后请求http://www.baidu.com：
- Refresh: 3;url=http://www.baidu.com
4.HTML指定响应头
在HTMl页面中可以使用<meta http-equiv="" content="">来指定响应头，例如在index.html页面中给出<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">，表示浏览器只会显示index.html页面3秒，然后自动跳转到http://www.baidu.com.
1 import socket 2 sock=socket.socket() 3 sock.bind(("127.0.0.1",8081)) 4 sock.listen(5) 5 6 while 1: 7 conn,addr = sock.accept() 8 data1=conn.recv(1024) 9 with open('22.html','r') as f: 10 data=f.read() 11 conn.sendall(b"HTTP/1.1 200 OK %s" %data.encode('gbk')) 12 # conn.send(b"HTTP/1.1 200 OK <h1>hello yuan<h1> <img height=200px width=400px src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494840589725&di=964514ef529db3ca2b9b99c89c8d70c3&imgtype=0&src=http%3A%2F%2Fcms-bucket.nosdn.127.net%2F7495b4a398a44c7b83411eb17b3bbaf020170420112852.jpg'>") 13 # conn.sendall(bytes("HTTP/1.1 201 OK ","utf-8")) 14 # conn.sendall(data) 15 # conn.send(b"<H1>yuan</H1>") #变大字体 16 conn.close()
HTML
定义
- 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
- 浏览器按顺序渲染网页文件（渲染顺序：从上到下，从左至右），然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
- 静态网页文件扩展名：.html 或 .htm
结构
- <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体内容
标签
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
<!DOCTYPE> 标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
<head> 内常用标签
<meta>标签
meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> ##搜索中关键字查找 <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> ##网页搜索中显示信息
(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非meta标签
<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico"> ##icon显示网页图标,加载favicon.ico显示图片
<link rel="stylesheet" href="css.css"> ##rel 该属性规定当前文档与被链接文档之间的关系。但是，只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持
<script src="hello.js"></script> ##加载外部js脚本
<body> 内常用标签
基本标签(块标签和内联标签)
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
特殊字符：
< >；"；©®
<div>和<span>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
图形标签: <img>
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
超链接标签(锚标签) <a> </a>
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
}
#part1{
background-color: red;
height: 500px;
font-size: 30px;
color: white;
}
#part2{
background-color: green;
}
#part3{
background-color: yellow;
}
</style>
</head>
<body>
<p id="part1">第一章</p>
<p id="part2">第二章</p>
<p id="part3">第三章</p>
<a href="#part2">返回第一章</a>
</body>
</html>
列表标签
<!--无序列表 有序列表 定义列表-->
<!--无序列表 unorder list-->
<u1>
<li>111</li>
<li>222</li>
<li>333</li>
</u1>
<!--有序列表 order list-->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<!--定义列表 define list-->
<dl>
<dt>标题</dt>
<dd>item</dd>
<dd>item</dd>
<dd>item</dd>
</dl>
表格标签 <table>
表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table border="2px" cellpadding="10px" cellspacing="0px">
<!--<tr>-->
<!--<td>语文</td>--> ---table data
<!--<td>数学</td>-->
<!--<td>音乐</td>-->
<!--</tr>-->
<tr>
<th>语文</th> ---table head
<th>数学</th>
<th>音乐</th>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>222 <img src="meinv.jpg" alt="美女" width="200px" title="美女"></td>
<td>333</td>
</tr>
</table>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
HTML 表格有两种单元格类型：
表头单元格 - 包含头部信息（由 <th> 元素创建）
标准单元格 - 包含数据（由 <td> 元素创建）
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。