一。http协议。
1.在软件开发架构中 有两种模式：1.b/s。2.c/s。
其中b/s就是以浏览器作为客户端，所以，需要服务器同一遵循同一规则，向浏览器发送数据，这个规则就是http协议，存在以应用层，会话层，表示层的协议。
当我们在浏览页面时，每当有一个对后端的操作时，都会有以下几个步骤：
1.浏览器向服务端发送请求。
2.服务点接受请求。
3.服务端发送响应。
4.浏览器接受响应。对页面进行渲染。
2.http协议中有4种特性：
1.基于请求响应。
2.基于tcp/ip之上的作用于应用层的协议。
3.无状态。每当一个人访问服务器时，都无法保存该用户的信息。
4.无连接。每有一次请求之后，就会断开连接。两者之间就不在有任何联系。
（可以通过websocket来 实现长连接的 数据传输）
3.请求数据格式：
请求首行（标识HTTP协议版本，当前请求方式）
请求头(一大堆k,v键值对)
请求体(携带的是一些敏感信息比如 密码,身份证号...)
注意，请求头和请求体之间要空一行。
4.响应数据格式
响应首行（标识HTTP协议版本，当前请求方式）
响应头(一大堆k,v键值对)
响应体(返回给浏览器页面的数据 通常响应体都是html页面)
5.响应状态码：
是一种使用一串简单数字表示一些复杂的状态或者提示信息。
1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2XX:服务端成功响应你想要的数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 ，302)
4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
5XX:服务器内部错误(500)
5.请求方式
1.get请求
朝服务端要资源(比如浏览器窗口输入www.baidu.com)
2.post请求
朝服务端提交数据(比如用户登录 提交用户名和密码)
URL:统一资源定位符。就是网址
二。html注释：
注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
三。html的标签
1.HTML文档结构
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
head标签中有meta标签，位于文档的头部，其中的http-equiv属性，相当于htto文件头的作用。
content中的内容是各个参数的变量值。
name属性就是描述网页，使搜索引擎更容易搜到。对应的conntent就是用来描述网站的关键字。
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>
2.打开html的两种方式。
1.找到文件路径 选择浏览器打开
2.pycharm快捷方式直接打开
3.标签分类：
1.双标签：（<h1></h1>,<a></a>）
2.单标签：（<img>）
4.head内常用标签
title用来显示网页标题
style用来控制样式的 内部支持写css代码
script内部支持写js代码 也支持导入外界的js文件
link专门用来引入外部的css文件
5.标签的分类2.
1.。块级标签。
<dir>,<p>,<h>这类的标签，特点时hi独占一行。
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签，但是p标签虽然是块儿级标签，他不能够其他块儿级标签 包括自身可以嵌套行内标签。
2.行内标签。
自身的文本有多大，就占有多大。
如同：span，b ，s，i，u等标签。
四。body内常用标签。
1.基本标签：
h标签：标题标签。
p标签：段落标签。
2.符号：
空格：
> :>
<:<
￥：¥
& ：&
®：®；
©：©；
3.常用标签：
div 框架搭建。
span。按钮。
p：文本
img：图片。
img中的属性：
src存放的是图片的路径(该路径可以是本地的也可以是网上的)。
也可以放url(会自动请求该url获取相应数据)。
也可以直接放图片的二进制数据 会自动转换成图片
alt：当图片加载不出来时，显示的提示信息。
title：当图片加载不出来的时候，显示的提示信息。
height，width，当你只指定一个参数的时候，另一个会等比缩放。
a标签：超文本链接：
a中的一些属性
href后面存放url的时候。点击跳转到该url。
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色。
target 默认是_self当前页面跳转，_blank新建页面跳转。
锚点功能(回到顶部)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签。
五：标签的三大属性
每一个标签都应该有三个比较重要的属性。
1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高。
补充 任何标签都支持自定义属性!!!
六。列表标签。
无序列表 <ul>
无序列表中的type，规定样式。
disc（实心圆点。默认值）
circle（空心圆圈）
square（实心方块）
none（五样式）
有序列表 <ol>
有序列表定义后其列表前会序号，序号需要使用属性type 和start来指定其样式和起始序号。
type：
1，A，a，I，i
标题列表 <dl>
dl时总的列表。
标题<dt>
dt显示标题
内容
<dd>显示内容。
七。表格标签。
table:建立一个表格。
其中，表属性里的cellpadding，表示的数值时表中的字与表内边距的距离。
cellspacing中的数据指的是表内边距与表外边距之间的距离。
thead，建立表格第一行。
tbody，建立表格其他内容。
tr建立一行表。
td建立一行中的一列表。
简易在thead内使用th，在tbody中使用td。
当需要一个单元格占两行或两列时需要用到以下属性。
colspan表示水平方向。
rowspan表示垂直方向。
border 表格边框
width像素。
八。表单。
表单常常使用于数据的提交。最常用的就是用户名与密码的判断。
form:创建一个表单。
form中的action属性表示的是数据提交的目的地，1.不写默认提交当前页面所在路径。
2。写路径需要编写全路径。
3.编写路径的后缀。
input标签，定义一个提交单位。
其中的type属性就表示他提交何种属性数据。
text:普通文本
password:密文 不展示明文
date:日期
submit:触发提交动
button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked)。checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件。
select标签。
select标签定义了一个下拉选择菜单。默认是单选，可以通过multiple变成多选。
如果想设置默认选择，用selected（selected = ‘selected'）
select中需要使用到option标签来设置选项。
使用optgroup功能可以为option加标题分区，其中label是指定标题名字。
<textarea>标签
获取用户输入的大段文本。
属性:rows行数。
cols列数
<label>标签。
其中的for属性所只的是一个id值。点击该字段会自动跳转到id对应的input
form表单默认的是get请求，可以通过method参数来换成post来提交数据。
form表单中要想触发提交动作只有两种情况可以
form表单需要提交文件时需要设置enctype其中的文件格式。
1.input标签type指定成submit
2.直接写button标签获取用户输入(输入 选择 上传...)的标签。都必须有一个name属性。
这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value。
<input type="text" id="d1" name="username" value="默认值">
name就像是字典中的key，而value就像是字典的值。获取的信息都会被放入value中。
表单相关属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
相关属性说明：
disabled:禁用。
value = ’‘定义提交时选项值
readonle:将该表单设置为不能修改状态。也就是只读状态。
checked，设置radio和checkbox中的默认选择值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> div form p+select{ color: blue; } </style> </head> <body> <div> <h3>注册界面</h3> <form action="http://127.0.0.1:5000/index/" method="post"> <p><label for="d1">username:</label><input id="d1" name="username" value=""></p> <p><label for="d2">password:</label><input id="d2" name="password" value=""></p> <p><label for="d3">生日：</label><input id="d3" type="date" name="brith" value=""></p> <p>男：<input type="radio" name="sex" value="male" checked>女：<input type="radio" name="sex" value="female"></p> <p>爱好：唱<input type="checkbox" name="hobby" value="sing" checked> 跳<input type="checkbox" name="hobby" value="jump"> rap<input type="checkbox" name="hobby" value="rap"></p> <p>地址：<select name="dz"> <option value="sh">上海市</option> <option value="bj" selected>北京市</option> <option value="sz">深圳市</option> </select></p> <p>补充：<textarea name="bc" value="" cols="10" rows="3">补充内容</textarea></p> <select name="" id=""> <optgroup label="上海"> <option value="">嘉定区</option> <option value="" selected>浦东新区</option> <option value="">静安区</option> </optgroup> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="安徽"> <option value="">芜湖市</option> <option value="">合肥市</option> <option value="">安庆市</option> </optgroup> </select> <input type="submit"> </form> </div> </body> </html>
补充：flask搭建接受数据：
from flask import Flask,request app = Flask(__name__) @app.route('/index/',methods=["GET","POST"]) def index(): print(request.form) # 获取前端form表单提交过来的数据 print(request.files) file_obj = request.files.get("avatar") file_obj.save('xxx.pdf') return '收到了' app.run()
使用socket模拟返回验证码：
import socket server = socket.socket() server.bind(('192.168.12.81',8180)) #192.168.12.81 server.listen(5) while True: conn,addr = server.accept() data = conn.recv(1024) print(data.decode()) conn.send(b'HTTP/1.1 200 OK ') with open('a.txt','rb') as f: res = f.read() conn.send(res) conn.close()