html
超文本标记语言,规定了前端页面的书写标准
html注释
单行注释<!--这里写注释-->
多行注释<!--
这就是多行注释
-->
html文档结构
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
head内常用标签
title 定义网页标题
link 引入外部css文件
script 在该标签内部直接写js代码,也可以引入外部js文件
style 内部写css样式语句
meta
name='keywords' content='...................
基本标签
h1~h6
p
a
img
b,u,i,s
br
hr
特殊符号
>
<
®
&
©
¥
常用标签(******)
div用于页面布局
span普通小文本
a标签:链接标签,锚点,可以通过target控制是否是当前页跳转
img标签:
src:图片地址
alt:图片未加载完成显示信息
title:鼠标悬浮上去显示文本
只需要调整一个,另一个自动按比例缩放
height
列表标签
无序列表
ul>li
type disc,none,square,circle
有序列表
<ol type="i">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题3</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
表格标签
<table>
<thead></thead>
<tbody></tbody>
</table>
table内 tr标签表示一行,tr里面可以放td,thead
form表单(*******)
功能:前后数据交互,帮你提交任意的数据
input通过控制type属性来展示不同的获取用户输入的页面效果
type属性总结:
text:纯文本
password:用户输入不可见
date:日期 比如:获取用户生日
radio:单选 比如:获取用户性别
checkbox:多选 比如:获取用户爱好
file:文件 获取用户上传文件
submit:提交 注意:form表单中只有input的type属性是submit才能支持提交
reset:重置
button:按钮
select:下拉框 默认是单选,可以通过multiple属性指定为多选
textarea:大段文本
label标签
本身没有任何实际意义,主要是配合input标签
<label for="">username:
<input type="text">
</label>
<label for="i1">username:
<input type="text" id="i1">
</label>
flask框架初窥
flask安装命令
pip install Flask
flask三行式
请求方式
获取数据 get请求
提交数据 post请求
标签分类(**) 块儿级标签(独占一行) h1~h6,p,hr,br 1.块儿级标签,可以嵌套其他块儿级标签和行内标签 2.p标签虽然也是块儿级标签,但是它不能嵌套任何块儿级标签,只能嵌套行内标签
行内标签(自身文本多大就占多大) span,b,u,i,s,a,img
1.行内标签肯定不能嵌套块儿级标签,只能嵌套行内标签
2.行内标签 无法设置长宽
标签分类2: 双标签<h1></h1> 自闭和标签<img /> URL:网址(uniform resource locator) 专业一点:统一资源定位符 url的组成: https://www.baidu.com/ form表单中 action属性. 控制数据往哪提交,不写默认往当前url地址提交 method属性 控制数据提交的方式,默认是get请求,可以通过method该属性指定其他提交 提交数据的input必须要有name参数 input框中value属性就是对应的值
如果要提交文件数据
1.修改提交数据编码格式enctype
2.提交方式必须是post
form表单注意事项: action method默认是get enctype数据编码格式 form表单获取用户输入的标签都必须有name属性 form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果
eg:如何实现前后端交互 导入flask模块
form表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<form action="http://127.0.0.1:5000/reg" method="post" enctype="multipart/form-data">
<p>
<label for="i1">username:
<input type="text" id="i1" name="username" >
</label>
</p>
<p>password:<input type="password" name="pwd"></p>
<p>birthday:
<input type="date" name="birth">
</p>
<p>性别:
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" checked value="2">女
</p>
<p>hobby:
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<input type="checkbox" name="hobby" value="doulecolorball">双色球
</p>
<p>省市:
<select name="province" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</p>
<p>省市多选:
<select name="" id="" multiple>
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>省市2:
<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>文件资料:
<input type="file" name="myfile">
</p>
<input type="submit" value='注册'>
<input type="reset">
<input type="button" value="按钮">
</form>
</body>
</html>
demo 后端服务器
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('bbbbbb.txt')
return '收到了'
@app.route('/home')
def home():
return '这是主页'
@app.route('/index')
def index():
return redirect('/home')
if __name__ == '__main__':
# 运行flask项目
app.run()