html深入解析

表格标签

使用html语法来创造一个表格:

1、首先是table标签开路
2、表头用thread
3、表身用tbody
4、添加一行数据用tr,每一个tr都代表一行数据,然后
5、在行数据内部使用td来逐个增加数据


<table>
	<thread>
		<tr>
			<td>这是表头每个单元格的数据</td>
		</tr>
	</thread>
	
	<tbody>
		<tr>
			<td>每个单元格的数据</td>
		</tr>
	</tbody>

</table>


<table boeder='1'>  每个数字都代表一种样式,是给表加边框的
<td colspan='2'>  水平方向占两格
<td rowspan='2'>  竖直方向占两格

表单标签

表单标签是可以和用户进行交互的,然后将数据基于网络发送给后端服务器。

只有在form标签内的数据才能够和后端进行交互。

1、form标签
<form action=''>只有在我这的书写才能够提交后端</form>
action主要就是提交数据的后端路径
	1.什么都不写:默认朝当前页面所在的url提交数据
	2.写全路径:https://www.baidu.com  朝百度服务端提交
	3.只写路径后缀action='/index/':自动识别当前服务端的ip和port拼接到前面ip:port/index/

2.input标签
input标签是可以通过type参数来调整自己的表现形式的
显示字:<input type='' value='可以在框框里显示的东东'>
type的几种形式:
	1.text:普通的文本
	2.passwprd:密文
	3.date:日期
	4.radio:多个选项只能选择一个。再加一个checked参数可以选定为默认值
	5.checkbox:可以进行多选
	6.file:获取文件
	7.hidden:隐藏当前input框
type的三种按钮:
	1.submit:提交数据
	2.button:目前没有任何功能
	3.Reset:充值内容,相当于刷新

3.select标签
默认是单选,但是可以增加multiple变为多选。默认选中为selected
选择侍寝对象:(想要多个就在select增加一个multiple)
<select name="" id="">
        <option value="" selected>小姐A</option>
        <option value="">小姐B</option>
        <option value="">小姐C</option>
    </select>

4.textarea标签
获取大段文本,是一个可以输入文本的大框框
<textarea name="" id="" cols="30" rows="10"></textarea>


注意:
1、所有应该被提交的数据的标签内部都应该有一个name的属性作为要提交数据的key,而用户的数据是		value,针对用户点点点选择的数据的标签,value是需要在标签中定义的
2、能够触发form提交数据的按钮一共有两个:
	1.是input标签中的submit。
	2.<button>这也是一个提交任务的按钮</button>

验证form表单提交数据

form表单提交数据的方式默认是get请求。要是提交数据的话需要更改method提交方式。

<form action='http://127.0.0.1:5000/index/' method='post'
      enctype='multipart/form-data'>
enctype=''这个属性可以支持提交普通数据和文件数据,如果不进行更改的话,默认只支持普通的文本数据,	也就是如果要是上传文件的话,那么就是使用这个属性参数。

补充:

# 三步创建服务器
1.from flask import Flask,request

2.app=Flask(__name__)


@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    obj = request.files.get('提交时定的文件name属性')
    obj.save(obj.name)
    return 'OK'


3.app.run(host='127.0.0.1',port=5000,debug=True)

如果上传文件的话,要注意几个点:

  1. form中的enctype是否进行了修改。
  2. 提交的文件标签中是否有name属性。
原文地址:https://www.cnblogs.com/liqianxin/p/12878259.html