WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要
- 表格标签(只要是展视数据 一般都可以使用表格标签)
- 表单标签(重要：获取前端用户数据发送给后端)
- 后端框架基本使用(flask)
- css层叠样式表(选择器)
表格标签
数据示例:
username site level
mlxg jug height
uzi adc height
ming assist height
<!--格式-->
<table border="1">
<thead>
<tr> # 一个tr就表示一行
<th>username</th> <!--加粗文本-->
<th>site</th>
<th>level</th>
<!--<td>username</td>--> <!--正常文本-->
</tr>
</thead> <!--表头(字段信息)-->
<tbody>
<tr>
<td>mlxg</td>
<td>jug</td>
<td>height</td>
</tr>
<tr>
<td>uzi</td>
<td>adc</td>
<td>height</td>
</tr>
<tr>
<td>ming</td>
<td>assist</td>
<td>height</td>
</tr>
</tbody> <!--表单(数据信息)-->
</table>
<table border="1">：添加表格的框线
<td colspan="2">jug</td>：水平方向占多行
<td rowspan="2">jug</td>: 竖直方向占多行
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
表单标签
"""
能够获取前端用户数据(用户输入的、用户选择的、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action：控制数据提交的后端路径(给哪个服务端提交数据)
1. action值为空：默认就是向当前页面所在的url提交数据
2. 写全路径：https://www.baidu.com 向百度服务端提交
3. 只写路径后缀：action="/index/" 自动识别出当前服务端的IP和Port拼接到前面(host:port/index/)
<form action="">
<label for="d1"> # 第一种方式,直接将input框卸载label内
username:<input type="text" id="d1">
</label>
<label for="d2">password:</label> # 通过id链接即可,无需嵌套
<input type="text" id="d2">
</form>
Ps: input不跟label关联也没有问题
"""
label和input都是行内标签
"""
input标签：就类似于前端的变形金刚 通过type属性变形
type属性：
- text：普通文本
- password：密文展示
- date：日期
- submit：用来触发form表达提交数据的动作
"""
<input type="submit" value="注册">
"""
- button：就是一个普普通通的按钮,本身没有任何功能,但它是最有用的,学完js后可以给它自定义各种功能
"""
<input type="button" value="按钮">
"""
- reset：重置内容
"""
<input type="reset" value="重置">
"""
- radio：单选框,默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样时可以简写
<input type="radio" name="gender" checked>女
"""
<p>gender:
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
"""
- checkbox：多选
"""
<input type="checkbox" name="hobby" checked>read
"""
- select：默认是单选,可以将mutiple参数变多选,默认选中用selected
"""
<p>province:
<select name="" id="">
<option value="" selected>上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>前女友:
<select name="" id="" multiple>
<option value="">小红</option>
<option value="">小花</option>
<option value="" selected>迪丽热x</option>
</select>
</p>
"""
- file：上传文件
"""
<p>文件:
<input type="file" nultiple(上传多个)>
</p>
"""
- hidden: 隐藏输入框
"""
<p>你看不到我:
<input type="hidden">
</p>
"""
钓鱼网站
- textarea：获取大段文本
"""
<p>自我介绍:
<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
maxlength：字数限制
cols：文本框大小
rows：文本框大小
"""
# 能够触发form表单提交数据的按钮有哪些
1. <input type="submit" value="注册">
2. <button>刷新</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户输入的数据就类似于字典的value
# 下列注释内容是上述所有知识点总结写出的页面 可以copy自己看下效果
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<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" disabled value="默认值">
</label>
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="password">
</p>
<p>你看不到我:
<input type="hidden">
</p>
<p>
<label for="d3">brithday:</label>
<input type="date" id="d3">
</p>
<p>gender:
<input type="radio" name="gender" checked="checked" value="male">男
<input type="radio" name="gender" value="women">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" checked value="tea">喝茶
<input type="checkbox" name="hobby" value="game">游戏
</p>
<p>province:
<select name="province" id="">
<option value="sh" selected>上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</p>
<p>文件:
<input type="file" name="myfile">
</p>
<p>自我介绍:
<textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
<p>
<input type="submit" value="注册">
<!--当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>刷新</button>
</p>
</form>
</body>
</html>
"""
验证form表单提交数据
# 下面的框架代码无需掌握 看下效果即可
pip3 install FLASK
# form表单默认提交数据的方式 是GET请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=wenkai.fang&gender=on&hobby=on
# 你可以通过method指定提交方式指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
针对用户选择的标签,用户不需要输入内容,但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" checked="checked" value="male">男
<input type="radio" name="gender" value="women">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" checked value="tea">喝茶
<input type="checkbox" name="hobby" value="game">游戏
</p>
<p>province:
<select name="province" id="">
<option value="sh" selected>上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表单提交文件需要注意:
1. method必须是post
2. <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/from-data">
Ps: enctype类似于数据提交的编码格式,默认是urlencoded只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""
from flask import Flask, request
app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持GET请求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile')
print(file_obj.name)
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 针对用户输入的标签,如果你加了value 那就是默认值
<label for="d1">
username:<input type="text" id="d1" name="username" disabled value="默认值">
</label>
disabled: 只能看不能改 与 readonly(只读) 类似
CSS
层叠样式表：就是给HTML标签添加样式的,让它变得更加美观
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定区域(因为HTML代码很多,所以对应的css代码也会很多)
demo：
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3
}
# css的三种引入方式
1. style标签内部直接书写
"""
在head块儿中
<style>
h1 {
color: burlywood;
}
</style>
"""
2. link标签引入外部css文件(最正规的方式 解耦合)
"""
在head块儿中
<link rel="stylesheet" href="mycss.css">
"""
3. 行内式(比较少用)
"""
直接在标签代码中
<h1 style="color: green">老板好 在干嘛呢？</h1>
"""
css的学习流程
1. 如何查找标签
css查找标签的方式要掌握
因为后面所有的框架封装的查找语句都是基于css来的
2. 如何添加样式
css选择器
基本选择器
/* 写在head中 */
# 1. id选择器
#d1 { /*找到id是d1的标签 将文本颜色变为绿黄色*/
color: greenyellow;
}
# 2. 类选择器
.c1 { /*找到class值里面包含c1的标签 */
color: red;
}
# 3. 元素/标签选择器
span { /*找到所有的span标签*/
color: red;
}
# 4. 通用选择器
* { /*html页面上所有的标签全部找到*/
color: green;
}
组合选择器
/*
在前端 我们将标签的嵌套用亲戚关系来描述层级
<div>div
<p>div里面的p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
*/
/* 后代选择器 */
div span { /*div内部所有的span变成红色 div后面的空格表示后代的意思*/
color: red;
}
/* <div>div
<p>div里面的p</p>
<p>div p
<span>div p span</span> # 这个变颜色
</p>
<span>span</span> # 这个变颜色
<span>span</span> # 这个变颜色
</div> */
/* 儿子选择器 */
div>span {
color: red;
}
/* <div>div
<p>div里面的p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span> # 这个变颜色 因为是div的儿子
<span>span</span> # 同上
</div> */
/* 毗邻选择器 */
div+span { /*同级别仅挨着下面的第一个*/
color: aqua;
}
/*
<div>div
<p>div里面的p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span> 这个变颜色 因为紧挨着div
*/
/* 弟弟选择器 */
div~span { /*同级别下面所有的span*/
color: red;
}
/* <div>div
<p>div里面的p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span> # 变色
<span>span</span> # 变色
</div> */
属性选择器
# 属性选择器是以[]作为标志的
1. 含有某个属性
<style>
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
</style>
/*
全部带有username的都变色
<input type="text" username>
<input type="text" username="xiaoming">
老师:<input type="text" username="xiaohong">
<p username="xiaolv">小绿老师</p>
<div username="xiaohua">小花老师</div>
<span username="xiaohong">小红老师</span>
*/
2. 含有某个属性并且有某个值
<style>
[username='xiaohong'] { /*找到所有属性名是username并且属性值是xiaohong的标签*/
background-color: red;
}
</style>
/*
<input type="text" username>
<input type="text" username="xiaoming">
老师:<input type="text" username="xiaohong"> 变色
<p username="xiaolv">小绿老师</p>
<div username="xiaohua">小花老师</div>
<span username="xiaohong">小红老师</span> 变色
*/
3. 含有某个属性并且有某个值的某个标签
<style>
input[username='xiaohong'] { /*找到所有属性名是username并且属性值是xiaohong的input标签*/
background-color: wheat;
}
</style>
/*
<input type="text" username>
<input type="text" username="xiaoming">
老师:<input type="text" username="xiaohong"> 变色
<p username="xiaolv">小绿老师</p>
<div username="xiaohua">小花老师</div>
<span username="xiaohong">小红老师</span>
*/
