day51-表格、表单标签，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> 垂直方向占多行 # 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
""" 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器 """ # 写一个注册功能 <form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端 action:控制数据提交的后端路径(给哪个服务端提交数据) 1.什么都不写 默认就是朝当前页面所在的url提交数据 2.写全路径:https://www.baidu.com 朝百度服务端提交 3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面 host:port/index/ <label for="d1"> 第一种 直接讲input框写在label内 username:<input type="text" id="d1"> </label> 第二种 通过id链接即可 无需嵌套 <label for="d2">password:</label> <input type="text" id="d2"> ps:input不跟label关联也没有问题 """ label 和 input都是行内标签 """ input标签 就类似于前端的变形金刚 通过type属性变形 text:普通文本 password:密文 date:日期 submit:用来触发form表单提交数据的动作 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能 reset:重置内容 radio:单选 默认选中要加checked='checked' <input type="radio" name="gender" checked='checked'>男 当标签的属性名和属性值一样的时候可以简写 <input type="radio" name="gender" checked>女 checkbox:多选 <input type="checkbox" checked>DBJ file:获取文件 也可以一次性获取多个 <input type="file" multiple> hidden:隐藏当前input框 钓鱼网站 select标签 默认是单选 可以加mutiple参数变多选 默认选中selected <select name="" id="" multiple> <option value="" selected>新垣结衣</option> <option value="" selected>斯佳丽</option> <option value="">明老师</option> </select> textarea标签 获取大段文本 <textarea name="" id="" cols="30" rows="10"></textarea> # 能够触发form表单提交数据的按钮有哪些(一定要记住) 1、<input type="submit" value="注册"> 2、<button>点我</button> # 所有获取用户输入的标签 都应该有name属性 name就类似于字典的key 用户的数据就类似于字典的value <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p>
# 接下来的框架代码无需掌握 看一下效果即可 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只读
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释 /*单行注释*/ /* 多行注释1 多行注释2 多行注释3 */ 通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多) /*这是博客园首页的css样式文件*/ /*顶部导航条样式*/ ... /*左侧菜单栏样式*/ ... /*右侧菜单栏样式*/ ... # css的语法结构 选择器 { 属性1:值1; 属性2:值2; 属性3:值3; 属性4:值4; } # css的三种引入方式 1.style标签内部直接书写(为了教学演示方便我们用第一种) <style> h1 { color: burlywood; } </style> 2.link标签引入外部css文件(最正规的方式 解耦合) <link rel="stylesheet" href="mycss.css"> 3.行内式(一般不用) <h1 style="color: green">老板好 要上课吗?</h1>
CSS选择器
基本选择器
# id选择器 # 类选择器 # 元素/标签选择器 # 通用选择器 <style> /*id选择器*/ /*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/ /* color: greenyellow;*/ /*}*/ /*类选择器*/ /*.c1 { !*找到class值里面包含c1的标签*!*/ /* color: red;*/ /*}*/ /*元素(标签)选择器*/ /*span { !*找到所有的span标签*!*/ /* color: red;*/ /*}*/ /*通用选择器*/ /** { !*将html页面上所有的标签全部找到*!*/ /* color: green;*/ /*}*/ </style>
""" 在前端 我们将标签的嵌套用亲戚关系来表述层级 <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 {*/ /* color: red;*/ /*}*/ /*儿子选择器*/ /*div>span {*/ /* color: red;*/ /*}*/ /*毗邻选择器*/ /*div+span { !*同级别紧挨着的下面的第一个*!*/ /* color: aqua;*/ /*}*/ /*弟弟选择器*/ div~span { /*同级别下面所有的span*/ color: red; }
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
1.form表单所有相关的标签都需要掌握
2.后端框架稍微了解一下 激发兴趣
3.选择器练习一下
