51、表格标签与CSS选择器
一、表格标签
jason 123 read egon 123 dbj tank 123 hecha ... <table> <thead> <tr> 一个tr就表示一行 <th>username</th> 加粗文本 <td>username</td> 正常文本 </tr> </thead> 表头(字段信息) <tbody> <tr> <td>jason</td> <td>123</td> <td>read</td> </tr> </tbody> 表单(数据信息) </table> <table border="1"> 加外边宽 <td colspan="2">egon</td> 水平方向占多行 <td rowspan="2">DBJ</td> 垂直方向占多行
二、表单标签
后端通过网络得到前段用户的数据
2.1、form表单的使用
<form action=" "> </form>：form标签内部数据会提交到后端
action：提交到后端的数据
1.什么都不写
2.写全路径
3.只路径后缀名
2.2、label标签：标识作用
1.通常和input标签一起使用
<label for="d1"> #一旦点击name，也会直接提跳到d1
name:<input type = "text" id ="d1">
</label>
2.和id连接使用，不需要嵌套
<lable for= "d2">password:</lable> #password可以不用input，直接通过id关联
<input type="text" id="d2">
label和input都是行内标签
2.3、input标签
input标签通过搭配type属性使其功能化
type=“text”：普通文本
“password”：密文
“date”：日期
“submit”：触发form表当提交数据的动作
“button”：生成普通按键，无其他功能
“reset”：重置内容
“file”：获取文件，一次性可以获取多个
<input type="file" mutiple>
"hidden"：隐藏当前input框（钓鱼网站）
“textrea”：获取大段文本框
<textrea name=“” id=“” cols=“30” rows=“10”></textrea> #自动填写
2.4、统一行内标签内的多选和多选
“radio”：单选
默认选项中要添加checked=‘checked’，当属性名和属性值相同时可以简写
获取用户输入的标签，都要有name属性，name属性和数据相当于key和value
<input type="radio" name="gender" checked>男
“checkbox”：多选
<input type="checkedbox" checked>女
2.5、select标签，默认单选
select 标签里面使用<option>标签，
可以搭配mutiple，变成多选 ，
<select name="" id="" Mutiple>
<option value="" select> 小明</option>
<option value="" select> 小红</option>
</select>
三、验证form表单提交数据
# 接下来的框架代码无需掌握 看一下效果即可 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" id=""> <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 只能够提交普通的文本数据 formdata 就可以支持提交文件数据 """ <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" id="d1" name="username" value="默认值"></label> disable 禁用 readonly只读
四、css 简介
css 层叠样式表：就是给HTML标签添加样式表单的，使其更加的好看
4.1、注释
通常在编写css样式的时候使用注释来划分定样式的区域，可以快速的找到需要找到的样式位置，例如/*顶部导航条样式*/
/*单行注释*/
/*多行注释
多行注释
*/
4.2、css的语法结构
选择器{
属性1：值1；
属性2：值2；
}
4.3、css的三种引入方式
1.style标签内部直接书写
<style> h1 { color: burlywood; } </style>
2.link标签引入外部css文件（最正规的方式，解耦合）
<link rel="stylesheet" href="mycss.css">
3.行内是（一般不用）
<h1 style="color: green">老板好 要上课吗?</h1>
4.4、css的学习流程
1.先学习如何查找标签
2.在学如何添加样式
五、css选择器
5.1、基本选择器
1.id选择器：#加上标签
2.类选择器：。加上标签
3.元素/标签选择器：直接写标签
4.通用选择器：*加上标签
<style> id选择器 #d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*! color: greenyellow; } 类选择器 .c1 { !*找到class值里面包含c1的标签*! color: red; } 元素(标签)选择器*/ span { !*找到所有的span标签*! color: red; } 通用选择器 * { !*将html页面上所有的标签全部找到*! color: green; } </style>
5.2、选择器的选择
我们使用层级的关系来表述选择器
后代选择器：div span，只要是div下面的选择器，都是
儿子选择器：div>span,div下面一层级的选择器
毗邻选择器：div+span，div同级别第一个选择器
弟弟选择器：div~span，div同级下的所有选择器
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗邻选择器*/
/*div+span { !*同级别紧挨着的下面的第一个*!*/
/* color: aqua;*/
/*}*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
5.3、属性选择器
1.含有某个属性
[username] { !*将所有含有属性名是username的标签背景色改为红色*!
background-color: red;
}
2.含有某个属性并且有某个值
[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!
background-color: orange;
}
3.含有某个属性并且有某个值的某个标签
input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!
background-color: wheat;
}
