一、表格标签table：但凡用于展示的内容，一般都可以使用表格标签。
<table border="1" cellpadding="5" cellspacing="10"> <!--border用来设置外表框线条粗细--> <!--cellpadding用来设置文本与内表框的间距--> <!--cellspacing用来设置内表框与外表框的间距--> <thead> <!--表头--> <tr> <!--先用tr占一行--> <th>加粗表头</th> <td>正常表头</td> <td>正常表头</td> </tr> </thead> <tbody> <!--表体--> <tr> <td>表体1</td> <td>表体2</td> <td>表体3</td> </tr> <tr> <td colspan="2">表体4+5</td> <!--占2列--> <td rowspan="2">表体6+9</td> <!--占2行--> </tr> <tr> <td>表体7</td> <td>表体8</td> </tr> </tbody> </table>
二、表单标签form：能够获取用户在前端页面输入的数据(直接输入，选择输入，上传文件等等)，再基于网络发送给后端服务器。
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!--action配置后端服务器地址--> <!--action若不声明内容，则地址就是当前页面的url--> <!--写全外界url，如，http://www.baidu.com--> <!--只写后缀/index/，会自动识别当前服务端的地址，补全ip与port，如，http://127.0.0.1:5000/index/--> <!--method声明请求方式，若不指定，会默认为get方式，get方式提交的数据，会直接显示在url后面，数据就全部暴露了--> <!--entype声明数据编码格式，默认是urlencoded，默认模式只能传输文本，改为multipart/form-data即可以支持所有文件--> <!--name相当于存储着数据的键，value或传入的内容相当于储存着数据的值-->
<!--在input标签内用placeholder设置输入框的提示信息-->
<h1>注册页面</h1> <p> <label> <!--点击label标签的内容会关联到该label内嵌套的标签--> 账号 <input type="text" name="username"> <!--输入标签input的text格式，纯文本--> </label> </p> <p> <label for="001">密码</label> <!--若通过id绑定，也可以不用嵌套--> <input type="password" id="001" name="password"> <!--password格式，，密文格式--> </p> <p>默认值演示 <input type="text" name="username" value="默认值333"> <!--可以通过定义value，设置默认值，默认值可修改--> </p> <p>只读演示 <input type="text" name="username" value="默认值666" readonly> <!--若声明为readonly则不可再输入，也不可修改--> </p> <p>日期 <input type="date" name="date"> <!--date格式，日期格式--> </p> <p>性别 <input type="radio" name="gender" value="male">男 <!--radio格式，单选格式--> <input type="radio" name="gender" checked="checked" value="female">女 <!--声明为默认选中,同名同值可只写参数名--> </p> <p>爱好 <input type="checkbox" name="hobbies" value="read" checked>读书 <!--checkbox格式，多选格式--> <input type="checkbox" name="hobbies" value="music">音乐 <input type="checkbox" name="hobbies" value="sports">运动 </p> <p>上传文件 <input type="file" multiple name="uploadfile"> <!--file格式，文件格式，multiple声明为可多选--> </p> <p>隐藏的的输入框 <input type="hidden" name="secret"> <!--hidden格式，隐藏格式--> </p> <p>省份 <select name="province"> <!--选择标签--> <option value="shanghai">江苏</option> <!--下拉菜单形式罗列，单选--> <option value="beijing">浙江</option> <option value="guangzhou">山东</option> </select> </p> <p>地市 <select name="city"> <optgroup label="江苏"> <!--下拉菜单分组形式罗列，单选--> <option value="nj">南京</option> <option value="sz">苏州</option> <option value="wx">无锡</option> </optgroup> <optgroup label="浙江"> <option value="hz">杭州</option> <option value="nb">宁波</option> <option value="jx">嘉兴</option> </optgroup> <optgroup label="山东"> <option value="qd">青岛</option> <option value="jn">济南</option> <option value="yt">烟台</option> </optgroup> </select> </p> <p>技能 <select name="skills" multiple> <!--multiple声明为多选--> <option value="cooking" selected>烹饪</option> <!--selected声明为默认选择--> <option value="fishing">钓鱼</option> <option value="drive">驾驶</option> </select> </p> <p>简介 <textarea name="introduce" cols="60" rows="5" maxlength="50"></textarea> <!--cols和rows分别定义宽和高，maxlength限制输入内容的大小上限--> </p> <p> <input type="submit" value="提交注册"> <!--声明为提交数据按钮，点击之后会把数据传给后端服务器--> <input type="reset" value="重新填写"> <!--声明为重置按钮，点击之后会撤销已经输入和选择重新再来--> <input type="button" value="其他功能"> <!--声明为普通按钮，本身没有任何功能，等待绑定其他功能--> <button>点我也是提交注册</button> <!--直接用button，效果等同于input标签的submit--> </p> </form>
三、flask框架初探
from flask import Flask from flask import request app_obj = Flask(__name__) @app_obj.route('/index/', methods=['GET', 'POST']) def index(): form_items = request.form # 接收form表单传来的非文件数据,是键值对的形式 print(form_items) file_items = request.files # 接收form表单传来的文件数据，也是键值对的形式 print(file_items) tar_file_obj = file_items.get('uploadfile') # 通过键从文件存储器中获取目标文件对象 tar_file_obj.save('从浏览器接收的图片.png') # 将文件重命名保存于本地 return '数据提交成功' app_obj.run()
