前端-HTTP
前端
HTTP：搭建网页骨架
CSS：给骨架美化骨架
JS：控制网页的动态效果
HTML是什么？
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
HTTP的四大特征：
- 请求响应
- TCP/IP作用于应用层之上的协议
3.无状态
HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。
4.无/短链接
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
长链接：双方建立链接之后不断开。
请求数据式与响应数据式
请求数据式：
-
- 请求首行(标识HTTP协议版本，当前请求方式)
- 请求方式：
- get请求：向服务端要数据
- post请求：向服务端提交数据
- 请求方式：
- 请求头(一大堆k,v键值对)
- 请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
- 请求首行(标识HTTP协议版本，当前请求方式)
响应数据式：
-
- 响应首行(标识HTTP协议版本，响应状态码)
- 响应头(一大堆k,v键值对)
- 响应体(返回给浏览器展示给用户看的数据)
响应状态码：
200，OK 请求成功
403，请求不合法
404，请求资源不存在
500，服务器内部错误
HTML就是书写网页的一套标准
# 注释:注释是代码之母 <!--单行注释--> <!-- 多行注释1 多行注释2 多行注释3 --> 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找 <!--导航条开始--> 导航条所有的html代码 <!--导航条结束--> <!--左侧菜单栏开始--> 左侧菜单栏的HTMl代码 <!--左侧菜单栏结束-->
<html>
<head></head>:head内是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
两种打开HTML文件的方式
-
找到文件所在的位置右键选择浏览器打开
-
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可
<h1></h1> 双标签
<img/> 单标签(自闭和标签)
<title>Title</title> 网页标题 <style> h1 { color: greenyellow; } </style> 内部用来书写css代码 <script> alert(123) </script> 内部用来书写js代码 <script src="myjs.js"></script> 还可以引入外部js文件 <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <meta> 跳转页面
<h1>我是h1</h1> 标题标签 1～6级标题 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落</p> <br> 换行 <hr> 水平分割线
常用标签
1.块儿级标签（div）:独占一行 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 2. 行内标签（span）:自身文本多大就占多大 行内标签不能嵌套块儿级标签 可以嵌套行内标签 页面布局用占位div，span，之后再修改在，调整样式，div用来提前规定所有区域之后再往区域填写内容。
空格 > 大于号 < 小于号 & & ¥ ¥ © © ® ®
# 图片标签 <img src="" alt=""> src： 1.图片的路径 可以是本地的也可以是网上的 2.url（自动朝该url发送get请求获取数据） alt="派大星的好朋友" 当图片加载不出来的时候 给图片的描述性信息 title="海绵宝宝" 当鼠标悬浮到图片上之后 自动展示的提示信息 height="800px" width="" 高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放 如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1750143968,1315119488&fm=26&gp=0.jpg" alt="派大星的好朋友" title="海绵宝宝" >
# 链接标签 <a href=""></a> """ 当a标签指定的网址被点击过则会改变颜色 """ href： 1.放url，用户点击就会跳转到该url页面 2.放其他标签的id值 点击即可跳转到对应的标签位置 target： 默认a标签是在当前页面完成跳转 _self 修改为新建页面跳转 _blank # a标签的锚点功能 """eg:点击一个文本标题 页面自动跳转到标题对应的内容区域""" <a href="" id="d1">顶部</a> <h1 id="d111">hello world</h1> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 1000px;background-color: greenyellow"></div> <a href="#d1">底部</a> <a href="#d2">回到中间</a> <a href="#d111">回到中间</a>
1.id值 类似于标签的身份证号 在同一个html页面上id值不能重复 2.class值 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
- 无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
<li>第二项</li>
</ul>
- 有序列表
<ol >
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
- 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
表格
<table> <thead> ------表头 <tr> <th>序号</th>----加粗文本 <th>姓名</th> <th>爱好</th> </tr> </thead> --------表数据 <tbody> <tr> <td>1</td> ----- 正常文本 <td>kk</td> <td>read</td> </table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列
表标签：能获取前端用户的数据（输入，选择）然后基于网络传输给后端
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径
3.只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
input 与label 结合使用（不结合使用也没多大关系），两者都是行内标签
<input> 元素会根据不同的 type 属性，变化为多种形态。
<1> 表单类型 type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) file 提交文件：form表单需要加上属性 enctype="multipart/form-data" enctype类似于数据提交的编码格式 默认是urlencoded 只能够提交普通的文本数据 formdata 就可以支持提交文件数据 上传文件注意两点：请求方式必须是post <2> 表单属性 name: 表单提交项的键. 注意和id属性的区别：name属性是和服务器通信时使用的名称； 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
select 标签
<select> 下拉选标签属性 name:表单提交项的键. size：选项个数 multiple：multiple <optgroup>为每一项加上分组 <option> 下拉选中的每一项 属性： value:表单提交项的值. selected: selected下拉选默认被选中
textare 多行文本框
<form id="form1" name="form1" method="post" action=""> <textarea cols=“宽度” rows=“高度” name=“名称”> 默认内容 </textarea> </form>
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> p{ font-size: 22px; } </style> </head> <h2>注册页面</h2> <body> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <label for="d1"> <hr size="10" color="red"> <p>name:<input type="text" name="name" id="d1" size="15"></p> <p>pwd:<input type="password" name="pwd" size="15"></p> <p>sex:<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女" checked="checked">女 <input type="radio" name="sex" value="其他">其他</p> <p>data:<input type="date" name="data" size="15"></p> <p>hobby:<input type="checkbox" name="hobby" value="画画" checked="checked">画画 <input type="checkbox" name="hobby" value="弹琴">弹琴 <input type="checkbox" name="hobby" value="打球">打球</p> <p>province: <select name="province" id=""> <optgroup label="上海"> <option value="浦东">浦东</option> <option value="宝山">宝山</option> </optgroup> <optgroup label="北京"> <option value="朝阳">朝阳</option> <option value="昌平">昌平</option> </optgroup> <optgroup label="深圳"> <option value="罗湖">罗湖</option> <option value="宝安">宝安</option> </optgroup> </select></p> <p>files:<input type="file" name="files"></p> <p> <hr> <input type="submit" value="注册"> <input type="reset" value="重置"> <input type="button" value="按钮"> </p> </label> </form> </body> </html>
后端代码
from flask import Flask,request app = Flask(__name__) @app.route("/index/",methods=["GET","POST"]) def index(): print(request.form) print(request.files) filter_obj = request.files.get("files") filter_obj.save(filter_obj.name) return "ok" app.run()
