import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.clos
在浏览器中敲入网址发生了几件事情
1.浏览器向服务端发送请求数据
2.服务端接收请求发送响应数据
4.浏览器接收响应 根据特定的规则来渲染页面给用户展示(响应数据跳转页面)
超文本传输协议
规定服务器与浏览器消息传输的数据格式
四大特性:(***)
1.基于请求响应
2.基于TCP(传输协议)/IP( 地址) 之上的作用于应用层的协议
3.无状态(服务端不保存用户的状态)
4.无连接(请求一次,就响应一次,之后就立马端来连接,两者无任何关系)
格式(***)
请求数据格式
<!DOCTYPE html>请求数据首行 用来标识HTTP协议版本,当前请求方式 <head>、</head>请求头 一大堆 k:v键值对 <body>、</body>请求体 一些敏感信息
响应数据格式
<!DOCTYPE html>响应数据首行 标识HTTP协议版本,当前响应方式 <head>、</head>响应头 一大堆 k:v键值对 <body>、</body>响应体 返回给浏览器页面的数据,通常响应体都是HTML页面
用一串简单的数字来表示一些复杂的状态或提示信息 1XX:服务端已经成功接受了你的数据,正在处理,你可以继续提交数据 2XX:服务端成功响应你想要的数据 (200:请求成功) 3XX:重定向(当你在访问一个需要登录的页面时,你会发现跳转到登录页面 301 302 ) 4XX:请求错误(404:请求资源不存在,403:q请求资源不合法,或) 5XX:服务器内部错误(500)
get请求
朝服务器要资源
如:在浏览器中输入www.baidu.com
朝服务器提交资源
如:用户登录时,提交用户和密码
URL:统一资源定位符(网址)
超文本标记语言
要想让你的页面能够被浏览器正常显示出来,就的遵守HTML协议
浏览器只认识 html , css , ml
网页文件的扩展名：.html或.htm
web本质
浏览器 与 服务器
文件 (后缀以 .html 结尾的文件 是 前端页面文件)
文件的后缀名 只是为了给人看 ,知道哪种类型文件,而相对于计算机来讲,只是一堆二进制数据
html注释
注释:
单行注释
<!--单行注释-->
多行注释
<!--
多
行
注
释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
定义一些配置,是用来给浏览器看的,不是给用户展示的
</head>
<body>
是浏览器给用户展示的内容
</body>
</html>
1.找到文件路径,选择浏览器打开
2.用pycharm快捷方式打开
标签的分类(1)
单标签
标签是单独呈现的
自闭和标签 <img/> <br/>、<hr/>
双标签
第一个标签是开始，第二个标签是结束。结束标签会有斜线
<a></a> <p></p> <h3></h3> <h2></h2>
title 显示网络标题
style 控制样式,内部支持写css代码
script 内部支持写js代码,也支持外部导入js代码
link 专门用来引入外部的css文件
meta 定义网页原信息
id: 定义标签的唯一ID，在一个html文档中id应该保证唯一不重复 class: 为html元素定义一个或多个类名（classname）(CSS样式类名) style: 规定元素的行内样式（CSS样式） 属于行内样式 优先级最高 任何标签都支持自定义属性!!!
块级标签
独占浏览器一行 如: <div></div> <h></h>系列的 <p></p> 1.快级标签 可以修改长度 2.p标签 不能嵌套其他块级标签,也不能嵌套p标签,但可以嵌套行内标签
总结:
只要是块级标签,都可以嵌套行内标签
p标签只能嵌套行内标签,其他块级标签可以嵌套任意的块级标签
行内标签
文本有多大,就占多大,由文本的内容撑开
<span></span> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s>
div标签用来定义一个块级元素,span标签用来定义内联(行内)元素
div标签 和span 标签 通常是用来构建网页布局的
<p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <!--换行--> <br> 换行标签 <hr/> 分割线标签 <!--水平线--><hr>
空格   > > < < 版权 © 注册 ® & & ¥ &yun
<div></div> "架构"标签 <span></span> 行文本标签 <p></p> 段落标签 <img/> 图片标签 <a></a> 超链接标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> src存放的是图片的路径(该路径可以是本地的也可以是网上的) 1.也可以放url(会自动请求该url获取相应数据) 2.也可以直接放图片的二进制数据 会自动转换成图片 alt当图片加载不出来的时候 显示的提示信息 title当鼠标悬浮在图片上 提示的信息 height,width 当你只指定一个参数的时候 另外一个会等比例缩放
a标签
<a href="http://www.oldboyedu.com" target="_blank" >点我</a> <a href="" id="d1">顶部</a> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2" class="c1">中间</a> <div style="height: 1000px;background-color: green"></div> <a href="#d2">会到中间</a> <div style="height: 1000px;background-color: yellow"></div> <a href="#d1" username="jason" password="123">点我回到顶部</a>
href后面存放url的时候 点击跳转到该url
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
target 默认是_self当前页面跳转
blank新建页面跳转
锚点功能(回到顶部)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> type属性： disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="20" cellpadding="10" cellspacing="10"> <thead> <tr> <th>username</th> <th>password</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td colspan="2">tank</td> <!-- <td>123</td>--> <td rowspan="2">生蚝</td> </tr> <tr> <td>egon</td> <td>123</td> <!-- <td>足疗</td>--> </tr> <tr> <td>jerry</td> <td>123</td> <td>大保健</td> </tr> </tbody> </table> </body> </html>
<table>
<thead></thead>
<tbody></tbody>
</table>
tr表示一行
th和td都是文本
建议在thead内用th
tbody内用td
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册页面</h2> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p> <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p> <p> <label for="d3">birthday:</label> <input type="date" id="d3" name="birth"> </p> <p>性别: <input type="radio" name="gender" checked value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>爱好: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" checked value="doublecolorball">双色球 </p> <p>省市: <select name="province" id=""> <option value="sh">上海市</option> <option value="bj">北京市</option> <option value="sz">深圳市</option> </select> </p> <!--<p>伴侣:--> <!-- <select name="" id="" multiple>--> <!-- <option value="" selected>新垣结衣</option>--> <!-- <option value="" selected>斯嘉丽</option>--> <!-- <option value="">明老师</option>--> <!-- </select>--> <!--</p>--> <!--<p>省市1:--> <!-- <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>--> <!--</p>--> <p>头像: <input type="file" name="avatar"> </p> <p>个人简介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <!--<p>隐身--> <!-- <input type="hidden">--> <!-- --> <!--</p>--> <input type="submit" value="注册1"> <input type="button" value="注册2"> <input type="reset" value="注册3"> <button>button标签</button> </form> </body> </html>
action
action控制数据提交的目的地 1.不写的情况下 默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/)
input
type text:普通文本 password:密文 不展示明文 date:日期 submit:触发提交动作 button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作 reset:重置表单内容 radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked" checkbox:多选 同上 可以设置默认值 file:获取用户上传的文件 hidden:隐藏输入框(防呆标签) 属性说明: name：表单提交时的“键”，注意和id的区别 value：表单提交时对应项的值 type="button", "reset", "submit"时，为按钮上显示的文本按钮内容 type="text","password","hidden"时，为输入框的初始值 type="checkbox", "radio", "file"，为输入相关联的值 checked：radio和checkbox默认被选中的项 readonly：text和password设置只读 disabled：所有input均适用
select
默认是单选 可以通过multiple变成多选 如果想默认选择 用selected (selected="selected")
label
定义：<label> 标签为 input 元素定义标注（标记）。 说明： label 元素不会向用户呈现任何特殊效果。 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同
textarea标签
获取用户输入的大段文本 属性说明： name：名称 rows：行数 cols：列数 disabled：禁用
小结:
form表单默认是get请求 你需要通过method参数 换成post提交 form表单中 要想触发提交动作 只有两种情况可以 1.input标签type指定成submit 2.直接写button标签 获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性 这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value <input type="text" id="d1" name="username" value="默认值"> name就相当于是字典的key value就是字典的值 获取都的用户输入都会被放入value属性中 form表单传文件的时候 需要指定enctype参数
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()