前端之表格标签，from表单，CSS介绍等

表格标签

<table>
	<thead>
		<tr>
			<td></td>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<th></th>
		</tr>
	</tbody>
</table>

<table border = '1'> 加外边距
<td colspan = '2'> 横向占格数
<td rowspan = '2'> 竖向占格数

    <table border="1">
        <thead>
        <tr>
            <th>username</th>
            <th>password</th>
            <th>gender</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">egon</td>
            <td>123</td>
            <td>male</td>
        </tr>
        <tr>
            <td colspan="3">alex</td>
            <td>123</td>
            <td>male</td>
        </tr>
        </tbody>
    </table>

表单标签

表单标签能够获得用户输入的数据并且传入后端进行处理

语法格式:
	<form action=''></form>
	<!--在form表单内部的数据才会被提交到后端-->
action:控制数据提交的后端路径（给那个服务器提交数据）
	1.不填：默认为当前的路径
	2.写全路径：https://editor.csdn.net/md?articleId=112546325
	3.只写路径后缀：'/student/',会自动识别服务器的IP和端口并且发送数据
一般来说input(单标签)标签应该与label标签（双标签）有两种关系：
1.在label内部
<label for='d1'><input type='text' id='t1'></label>
通过for连接id的方式能够实现点文字就能点中输入框
2.通过ID和label关联
<label for='d1'>username:</label>
<input type='text' id='d1'>

ps:label和input都是行级标签


input标签：功能实现与用户的交互
input中type属性的参数：
	1.text 普通文本
	2.password 密码形式
	3.date 日期形式
	4.submit 用来触发form表单的提交功能
	5.button：一张白纸,普通的按钮功能，我们可以给他赋予任意的功能
	6.reset：即刷新页面，重置输入的数据
	7.radio：单选（需要给name值来标识唯一的选项）
	8.checkbox:多选
	9.file：获取文件 也可以一次性获取多个
	10.hidden：隐藏当前的input框，钓鱼网站
	11.placeholder：在input框可以输入提示信息
	
select标签 默认是单选 可以加multiple参数边多选
格式：
<select name='' id='' multiple>
	<option value='' selected='selected'>内容</option>
	<option value='' selected='selected'>内容</option>
	<option value='' selected='selected'>内容</option>
	<option value='' selected='selected'>内容</option>
</select>

textarea标签 获取大段文本标签
	<textarea name='' id='' cols='30' ros='10'></textarea>
参数：
	maxlength：输入的最大长度
	cos：宽度
	ros:长度

ps:激活form表单提交数据的两种方式
1.submit
2.button

# 所有获取用户数据的标签都应该name属性
否则没有键名，后端无法进行接收

# 针对用户的输入的标签，如果加了value 那就是默认值
disable 禁用
onlyread 只读

# 对于点击事件来说，必须在标签属性栏内部指定value，这样传入后台的才是value值

# form标签提交文件注意：
	1.传输类型即method必须是post
	2.enctype='multipart/form-data'
		enctype是提交的编码
		默认是urltype不能提交文件
		form-data可以提交文件

代码实现：
	    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
      <div>
        <label for="l1">username: <input type="text" name='username' id="l1" ></label>
      </div>
        <div>
            <label for="l2">password: <input type="password" name="password" id="l2" name="password"></label>
        </div>
        <div>
            <label for="">birthday：<input type="date" name="brithdat"></label>
        </div>         
        <p>
            <input type="radio" name="gender" checked="checked">男
            <input type="radio" name="gender">女
        </p>
        <p>
            <input type="checkbox" name="hobbies" value="football" checked>足球
            <input type="checkbox" name="hobbies" value="basketball">篮球
            <input type="checkbox" name="hobbies" value="飞机">乒乓球
        </p>
        <p><input type='file' name="file"></p>
        <p><input type="hidden"></p>
        <div>
            <label for=""><input type="submit"  value="注册"></label>
            <label for=""><input type="button" value="点我没用"></label>
            <label for=""><input type="reset" value="重置"></label>
        </div>
        <p>hobbyy：
            <select name="hobbyy" id="">
                <option value="sb" selected>上海</option>
                <option value="sc">北京</option>
                <option value="se">南京</option>
                <option value="sd">天津</option>
                <option value="sg">东京</option>
                <option value="sf">西京</option>
            </select>
        </p>
        <p>请输入：<textarea maxlength="30" name="user_input" id="t1" cols="30" rows="10"></textarea></p>

    </form>
FLASK框架部分：
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('file')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()

CSS

层叠样式表：是用来美化界面的

/*单行注释*/
/*
多行注释
*/

注释的作用：
	与HTML作用一样：划定代码的范围
	/*顶部导航栏*/
	/*中部作用域*/

基本语法：
	选择器 {
		属性1：值1；
		属性2：值2；
		属性3：值3；
		属性4：值4；
		属性5：值5；
		属性6：值6；	
		}

选择器使用的三个方法：
	1、在<style></style>内部直接书写
	2、在<link src=''>直接导入
	3、行内式
		在每一个标签直接使用如
		<h1 style='color:green'>superman</h1>

CSS选择器

基本选择器

id选择器
# #h1 找到id号为h1的标签{ 
属性：属性值
	}
类选择器（一个标签可以有多个类）
# .c1 找到class内部有c1的标签 {
...
} 
元素/标签选择器
# 标签名 找到所有标签名为标签名的标签{
} 
通用选择器
# * 所有的标签全部

组合选择器

在前端通过标签的嵌套来表示亲戚关系
例如
	<div>
		<p>
			<b>
			</b>
		</p>
	</div>
其中div是P的父亲,b的爷爷
1.后代选择器
拿到一个标签中的所有的标签名为标签名的标签并且操作
    <style> 标签 里面的标签 {color: aqua}
    </style>
    <style> div p {color: aqua}
    </style>
2.儿子选择器
只拿到标签中儿子级别的标签
	<style>标签>儿子标签{}
	</style>
	    <style>
        div>p {color: aqua}
    </style>
3.毗邻选择器
必须是同级别的挨着的下面的第一个如果不是后面的不会变
    <style>
        标签+标签 {}
    </style>
        <style>
        div+p {color: aqua}
    </style>
4.弟弟选择器
是同级别的下面的所有的该标签
    <style>
        标签~标签 {}
    </style>
        <style>
        div~p {color: aqua}
    </style>

属性选择器

1.内部有该属性的
    <style>
        [属性名] {color: gold}
    </style>
    <style>
        [id] {color: gold}
    </style>
2.内部有该属性且有该值得
    <style>
        [属性名='值'] {color: gold}
    </style>
    <style>
        [id] {color: gold}
    </style>
3.内部有该属性且有该值得且有标签号的
    <style>
       标签[属性=属性值] {color: gold}
    </style>
     <style>
        h1[id='h'] {color: gold}
    </style>