回顾
json 序列化 非默认数据结构
第一种 手动转字符串
第二种 继承JsonEncoder重写它的default 方法
什么是前端
任何跟用户直接交互的界面都可以称之为前端
web本质
浏览器输入网址 朝服务器发送请求
服务器接收请求
服务器返回相应的响应
浏览器接收响应解析渲染展示到屏幕上
http协议
超文本传输协议,规定了信息基于网络传输的发送及接收格式
http状态码
10X 服务器已经接收到你的请求 正在处理 你可以继续提交相应数据
20X 请求成功
30X 内部重定向
40X 请求错误
50X 服务器错误
html 超文本标记语言,规定了前端页面的书写标准
html注释
单行注释 <!--这里写注释-->
多行注释<!--
这是多行注释
-->
html文档结构
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
head内常用标签
title 定义网页标题
link 引入外部css文件
script 在该标签内部直接写js代码 也可以直接引入外部js文件
style 内部写css样式语句
meta
h1
a
img
今日内容
body常用标签
基本标签
<h1>xxx</h1>:一个六个标题标签
<p></p>:段落标签
<b></b>:加粗标签
<i></i>:斜体标签
<s></s>:字体上划去除符号标签
<u></u>:下划线标签
<br>:换行标签
<hr>:水平线标签
:在<p></p>内空行 可存在多个
< :小于号
> :大于号
& :&
© 证书认证符号
® 商标
¥: 中文钱符号
<h1>这是一个标签!</h1>
<h2>这是标签2</h2>
<h3>这是标签3</h3>
<h4>这是标签4</h4>
<h5>这是标签5</h5>
<p><b><i><s><u>这是加粗标签</u></s></i></b></p>
<p><b>加粗标签</b></p>
<i>这是斜体标签</i>
<br>
<s>去除符号标签</s>
<hr>水平线<hr>
<u>下划线标签</u>
<br>
<小于 >大于 &<br>©:证书认证 ®:商标 ¥:中文钱符号
基本标签
特殊符号
常用标签(******)
div 用于页面布局
span普通小文本
a标签:链接标签
<a href='' target='_self'></a> 默认是self 本页跳转
<a href='' target='_blank'></a> 是否跳转页面
<a href='' id='a1'></a>
<div style='height:100px;/div>
<a href='#a1'>点我去顶部</a>
<img src='图片地址' alt='图片未加载完成显示信息' title='鼠标悬浮上去显示文本'>alt用来表示当图片加载不出来的时候，显示的文字
width:只需要调整一个 另一个自动按比例缩放
height
列表标签
无序列表:
<ul>li
type disc none square circle
有序列表
<ol type=更改序列符号>
标题列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd></dd>
</dl>
表格标签
<table border=''>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='竖直方向'></td>
<td colspan='水平方向'></td>
</tr>
</tbody>
</table>
table 内 tr标签标示一行,tr里面可以放td/th
<div><u>页面布局</u></div>
<div>页面布局</div>
<span>普通文本</span>
<span>普通文本</span>
<br>
<a href="https://www.37zw.net/0/761/" target="_blank">这是跳转雪中的标签</a>
<br>
<a href="https://www.baidu.com" target="_self">这是本页跳转</a>
<div style="height:50px;background-color:red"></div>
<hr>
<div style="height:50px;background-color:greenyellow"></div>
<hr>
<div style="height:50px;background-color:rebeccapurple"></div>
<br>空行
<hr>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554116809659&di=456f8cc10895136bbaf566d0152a3ea5&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fd80c0bae0470c7d0f253958344d59bd83899f1b1.png" title="雪中悍刀行">
<hr>
<img src="" alt="没图片拉">
<ul type="circle">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
<ol type="I">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容3</dd>
<dd>内容4</dd>
</dl>
<hr>
<table border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>小林</td>
<td>33</td>
<td rowspan="2">被戴帽子</td>
<td>unknow</td>
</tr>
<tr>
<td>小王</td>
<td>22</td>
<td colspan="2">unknow</td>
</tr>
</tbody>
</table>
常用标签
form表单(*******)
功能:前后端数据交互,帮你提交任意的数据
select option/optgroup省市标签
label配合 input通过控制type属性来展示不同的获取用户输入的页面效果
type属性总结:
text:纯文本
password:密文 用户输入不可见
date:日期
radio:单选 获取用户性别
checkbox:多选 获取用户爱好
file:文件 获取用户上传文件
submit:提交按钮 注意:form表单中只有input的type属性是submit才能支持提交数据
reset:重置
button 绑定不同的事件
select:下拉框 默认是单选 可以通过multiple 属性指定为多选
textarea:大段文本 可以调节比例 cols 长 rows 高
label标签本身没有任何的意义,主要是配合input标签
<label for='1'>username:
<input type='text' id='1'>
</label>
<form action="http://127.0.0.1:5000/reg" method="post" enctype="multipart/form-data">
<p>
<label for="1">username:
<input type="text" id="1" name="username">
</label>
</p>
<p>
<label for="2">password:
<input type='password' name="password" id="2">
</label>
</p>
<p>
<label>
birth:
<input type="date" name="birth">
</label>
</p>
<p>
<label>性别:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
</label>
</p>
<p>
<label for="">hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
</label>
</p>
<p>
出生省份：<select name="省份" id="" >
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</p>
<p>省市多选:
<select name="" id="" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</p>
<p>
省市:
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">海淀</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>自我评价:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label>上传文件:
<input type="file" name="myfile">
</label>
</p>
<input type="submit" value="提交">
<input type="reset">
<input type="button" value="按钮">
</form>
form 表单
标签分类:(******)
块儿级标签:独占一行 h1~h6,p,hr
1.块儿级标签可以嵌套其他块儿级标签和行内标签
2.p标签虽然也是块儿级标签,但是他不能嵌套任何块儿级标签,只能嵌套行内标签
行内标签:自身文本多大就占多大 span,b,u,i,s,a,img
1.行内标签肯定不能嵌套块儿级标签 只能嵌套行内标签
2.行内标签 无法设置长宽
标签分类2:
双标签<h1></h1>
自闭和标签<img />
url:网址(uniform resource locator)
专业说法:统一资源定位符
flask 三行式
from flask import Flask,request,redirect
#实例化flask对象
app=Flask(__name__)
@app.route('/reg',methods=['get','post'])
def reg():
print(request.form)
print(request.files)
obj=request.files['myfile']
obj.save('b.txt')
return'收到了'
@app.route('/home')
def home():
return '这是主页'
@app.route('/index')
def index():
return redirect('/home')
if __name__ == '__main__':
app.run()
flask
请求方式
获取数据 get请求
提交数据 post请求
form 表单中
action属性.控制数据往哪提交 不写默认往当前url地址提交
method属性 控制数据提交的方式 默认是get请求 可以指定method该属性指定其他提交
提交数据的input标签必须要有name参数
input框中value属性就是对应的值
如果要提交文件数据
1.修改提交数据编码的格式 enctype 数据编码格式
2.提交方式必须是post
from提交数据必须借助input标签type类型等于submit 按钮才能触发效果
form表单注意事项:
action
method默认是get
enctype数据编码格式
form表单获取用户输入的标签都必须有name属性
form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果
