day44天 HTTP协议和前端html协议

mac2022-06-30 32

web服务器的本质(***)

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.服务端接收请求发送响应数据

3.服务端发送响应数据

4.浏览器接收响应根据特定的规则来渲染页面给用户展示(响应数据跳转页面)

HTTP协议(***)

超文本传输协议

规定服务器与浏览器消息传输的数据格式

四大特性:(***)

1.基于请求响应

2.基于TCP(传输协议)/IP( 地址) 之上的作用于应用层的协议

3.无状态(服务端不保存用户的状态)

4.无连接(请求一次,就响应一次,之后就立马端来连接,两者无任何关系)

如QQ,陌陌,之类的交友软件,用的是WEBSOCKET,相当于是HTTP协议的一个大的补丁,支持长连接.

格式(***)

请求数据格式

<!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

post请求

朝服务器提交资源

如:用户登录时,提交用户和密码

URL:统一资源定位符(网址)

HTML

超文本标记语言

要想让你的页面能够被浏览器正常显示出来,就的遵守HTML协议

也就是说,所有能够被浏览器显示的页面,内部都是HTML代码

浏览器只认识 html , css , ml

网页文件的扩展名：.html或.htm

web本质

浏览器与服务器

文件 (后缀以 .html 结尾的文件是前端页面文件)

文件的后缀名只是为了给人看 ,知道哪种类型文件,而相对于计算机来讲,只是一堆二进制数据

html注释

写网页的一套规范

注释:

单行注释

多行注释

一般情况下 html的注释都会按照下面的方式书写

HTML文档结构

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> 定义一些配置,是用来给浏览器看的,不是给用户展示的 </head> <body> 是浏览器给用户展示的内容 </body> </html>

打开HTML页面的俩种方式

1.找到文件路径,选择浏览器打开

2.用pycharm快捷方式打开

标签的分类(1)

单标签

标签是单独呈现的

自闭和标签 <img/> <br/>、<hr/>

双标签

第一个标签是开始，第二个标签是结束。结束标签会有斜线

head内常用标签

title 显示网络标题 style 控制样式,内部支持写css代码 script 内部支持写js代码,也支持外部导入js代码 link 专门用来引入外部的css文件 meta 定义网页原信息

重要属性

id: 定义标签的唯一ID，在一个html文档中id应该保证唯一不重复 class: 为html元素定义一个或多个类名（classname）(CSS样式类名) style: 规定元素的行内样式（CSS样式）属于行内样式优先级最高任何标签都支持自定义属性!!!

标签的分类(2)

块级标签

独占浏览器一行如: <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 标签通常是用来构建网页布局的

body内标签

基本标签

<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> View Code

转义字符

空格 &nbsp > &gt < &lt 版权 &copy 注册 &reg & &amp ¥ &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.标题列表

表格标签(**)

<!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 rowspan="2">生蚝</td> </tr> <tr> <td>egon</td> <td>123</td>  </tr> <tr> <td>jerry</td> <td>123</td> <td>大保健</td> </tr> </tbody> </table> </body> </html> View Code

<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>头像: <input type="file" name="avatar"> </p> <p>个人简介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p>     <input type="submit" value="注册1"> <input type="button" value="注册2"> <input type="reset" value="注册3"> <button>button标签</button> </form> </body> </html> View Code

action

action控制数据提交的目的地 1.不写的情况下默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/)

input

<input> 元素会根据不同的 type 属性，变化为多种形态。

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()

转载于:https://www.cnblogs.com/komorebi/p/11456235.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)

day44天 HTTP协议 和前端html协议