day51——表格、表单标签、初始flask框架、css选择器
今日内容
- 表格标签
- 表单标签
- 初始flask框架
- css（Cascading style sheets）层叠样式表（选择器）
一、表格标签
只要是需要展示数据一般都可以使用表格标签
tom 123 捉老鼠
jerry 123 戏弄猫
jack 123 摸眼r闪
<table border="10">
<thead> 表头
<tr> 一个tr表示一行
<th>username</th> 加粗文本，一般将标题文字设为加粗字体
<td>password</td> 正常字体
<th>hobby</th>
</tr>
</thead>
<tbody> 表单（表的数据信息）
<tr>
<!-- <td rowspan="2">tom</td>-->
<!-- <td colspan="2"></td>-->
<td>tom</td>
<td>123</td>
<td>捉老鼠</td>
</tr>
</tbody>
说明：
<table border="10"> 加外边宽
<td colspan="2"></td> 水平方向占两行
<td rowspan="2">tom</td> 竖直方向占两行
原生的表格标签不是很好看，但是后面我们会用框架进行封装，那时就很好看了。
表单便签
能够获取前端用户的数据（用户的输入、用户的选择、用户的上传），通过网络传输将其发送给后端服务器。
我们用一个注册功能来进行表单标签的学习
<form action=""></form> 在该form标签内书写的用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径（也就是说具体往哪个服务器提交数据）,有三种情况
1 什么都不写，form标签会默认的朝当前窗口所在的url提交数据
2 写全路径(www.baidu.com)，form标签会朝这个路径的服务端提交数据(朝百度服务端提交数据)
3 只写后缀action='index',form标签会自动的将当前服务端的ip和port拼接到前面组成路径
host:port/index/
input标签：
第一种：input标签写在label标签内,嵌套
<label for="d1">username:
<input type="text" >
</label>
第二种：通过id链接即可无需嵌套
<label> for="d2"</label>
<input type="text" >
ps:1 input 不跟label关联也是没有问题的
2 lable 和input都是行内标签
input标签通过type值的变化，可以实现各种属性
type="text" 文本
"password" 密文（匿文）
"date" 日期（年月日）
"submit" 用来触发form提交数据的动作
"button" 一个非常有用的按钮，本身没有任何功能，但是可以给他自定义各种功能
"reset" 重置内容，注意不提交数据
"redio" 单选，默认选中需加checked="checked"或简写成checked如：
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" checked>男 简写
"checkbox" 多选，如：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
"file" 获取文件，也可以一次获取多个，如：
<input type="file" multiple>
"hidden" 隐藏当前input框，钓鱼网址就是运用了这个
ps：标签的的属性名和属性值相同的时候，可以简写，直接放标签名即可
select标签：
默认为单选，可以加multiple参数变为多选，默认选中加selected(简写)
<select name="" mutiple>
<option value="">神仙姐姐</option>
<option value="">高圆圆</option>
<option value="">陈都灵</option>
</select>
textarea标签：
获取用户输入的大段文字
<textarea name="" ></textarea>
ps: cols指定文本框的长度，指定文本框的高度
能够触发form表单 提交数据的按钮有哪些，重点记忆
1 <input type="submit" value='提交数据'>
2 <button>提交数据</button>
能够获取用户输入的数据的标签，都应该有name属性，那么类于字典的key，用户的数据类似于字段的value值
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
初始flask框架
验证表单标签是否能提交数据
# 接下来的框架代码无需掌握 看一下效果即可
pip3 install FLASK
form表单默认提交数据的方式 是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" >
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
ormdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" ></label>
disable 禁用
readonly只读
css选择器
css导入的三种方式
<!--1 导入外部css文件-->
<link rel="stylesheet" href="mycss.css">
<!--2 在style便签下书写-->
<style>
h1{
color:greenyellow;
}
</style>
<!--3 在body标签内书写-->
<body>
<h1 style="color:green">
</h1>
</body>
基本选择器
- id选择器
<style>
/*id选择器*/
#d1{
/*将id为d1的标签文本颜色变成黄绿色*/
color: greenyellow;
}</style>
- 类选择器
<style>
/*类选择器*/
*.c1{
/*找到class里面包含c1的标签，将器变成红色*/
color:red;
}
</style>
- 通用选择
<style>
/*通用选择器*/
/*将html页面上所有的便签都找到,将其变为绿色*/
* {
color: green;
}
</style>
组合选择器
在前端中我我们将标签的嵌套用亲戚关系来表诉层级，这样更容易立即，见名知意嘛！
-
弟弟选择器
(用链接两个标签，左边的便签与右边标签处于同一级别，找到左边标签下的所有右边的标签进行样式配置)
<style>
/*弟弟选择器*/
div~span{
/*找到同div同级别下所有的span*/
color:green;
}
</style>
</head>
-
毗邻选择器
（用+链接两个标签，左边的便签与右边标签处于同一级别，找到+左边标签下离它最近的一个同级别标签进行样式配置，住的最近的一个弟弟)
<style>
/*毗邻选择器*/
div+span{
/*找到div同级别下最近的一个span*/
color:red;
}
</style>
-
儿子选择器
（用>连接两个标签，>右边标签为左边标签内嵌套的第一层标签，可以是一个可以是多个)
<style>
/*儿子选择器*/
div>span {
color: yellow;
}
</style>
-
后代选择器
（不放符号用空格连接两个标签，找到空格左边标签内嵌套的所有标签进行样式配置，后代嘛！子子孙孙都算)
<style>
/*后代选择器*/
div span {
color: red;
}
</style>
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/