标签：index form Python request 基础表单 color 提交 day47

img标签

图片，在网页显示图片的
标签会有属性：
　　1. 自带的属性
　　2. 自定义的属性

<img src="img/123.png" alt="你看我是什么东西" width="800px" height="200px">

src:写图片的地址
　　1. 外链地址
　　2. 相对地址
alt：
　　当图片地址加载失败的时候，显示的描述性信息

width="800px" height="200px"
控制图片的大小，但是注意，二者是等比例缩放

a标签

超链接
<a href="http://www.baidu.com" title="你看是什么" target="_blank">点我一下啊</a>
href：填写的是跳转的地址
　　id值，锚点，我们用不到，是一种效果，一般是前端来写
　　● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
　　● 相对URL - 指当前站点中确切的路径（href="index.htm"）
target="_blank"
　　跳转的时候新开一个tab页面
title="你看是什么"
　　当鼠标悬浮的时候展示的内容

列表

1. 无序列表(掌握)
<ul type="disc">
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
</ul>

    type属性：
    ● disc（实心圆点，默认值）
    ● circle（空心圆圈）
    ● square（实心方块）
    ● none（无样式）
2. 有序列表(了解)
<ol type="I" start="3">
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
    <li>第一个</li>
</ol>
    type属性：
    ● 1 数字列表，默认值
    ● A 大写字母
    ● a 小写字母
    ● Ⅰ大写罗马
    ● ⅰ小写罗马

3. 标题列表(了解)
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格（重要）

id   name   age   gender  salary
1     kevin1    18    male        1000
2     kevin2    18    male        1000
3     kevin3    18    male        1000
4     kevin4    18    male        1000
5     kevin5    18    male        1000
6     kevin6    18    male        1000

table
    thead
        tr----->代表一行
            td(th)------>代表的是一列
    tbody
        tr----->代表一行
            td------>代表的是一列
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）

标签的两个重要属性

<div id="d1"></div>

<!--id-->
<!--    一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签-->
<!--class-->
<!--     一个html文档中，class值是可以有多个的，可以重复-->

<!--自定义属性-->
    <div id="d1" username='kevin' password='123'></div>
<!--    属性名可以自己来定，自定义属性一般用来存储数据的-->

form表单（重要）

form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端

<form></form>
<label></label>
# 通过id值绑定
<label for="username">用户名</label>
<input type="text" id="username">
    
    
input:
    通过改变input的属性type来达到不同的输入类型
    text    单行输入文本    <input type=text" />
    password    密码输入框    <input type="password"  />
    date    日期输入框    <input type="date" />
    checkbox    复选框    <input type="checkbox" checked="checked"  />
    radio    单选框    <input type="radio"  />
    submit    提交按钮    <input type="submit" value="提交" />
    reset    重置按钮    <input type="reset" value="重置"  />
    button    普通按钮    <input type="button" value="普通按钮"  />
    hidden    隐藏输入框    <input type="hidden"  />
    file    文本选择框    <input type="file"  />

属性说明:
    ● name：表单提交时的“键”，注意和id的区别
    ● value：表单提交时对应项的值
      ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
      ○ type="text","password","hidden"时，为输入框的初始值
      ○ type="checkbox", "radio", "file"，为输入相关联的值
    ● checked：radio和checkbox默认被选中的项
    ● readonly：text和password设置只读
    ● disabled：所有input均适用  
    

# 每一个单选框、复选框标签都应该有一个属性叫name

<input type="submit" value="登录">  # 把前端数据提交表单到后端
<input type="button" value="登录">  # 不能够提交表单，就是一个空白的按钮，事件
<button>登录</button>  # 提交表单的功能，但是，必须写在form表单里

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值

验证form表单提交数据到后端

用的是flask框架做后端语言

# 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架，Django框架

<form action="">
action:
        1. 什么都不写，默认提交到当前地址
        2. 全写，绝对地址：http://www.baidu.com/login/
        3. 只写后缀
            /index/
            # 它会自动拼接当前计算机的ip+port
            http://127.0.0.1:5000/index/
              
文件的提交：
    '''必须满足两个条件'''
    1. 请求方式必须是post
    2. enctype必须是form-data

    
form表单提交数据的编码方式：
        application/x-www-form-urlencoded
    1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据
        multipart/form-data
    2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据
    3. json # form表单不能提交json格式的数据
    

urlencode
staticpage=https%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html&charset=UTF-8&token=20cc339caa83933ae3baa6dda5465d09&tpl=mn&useranme=123&password=123


from flask import Flask,request

app = Flask(__name__)

# 路由，网址的后缀 baidu.com/index/
@app.route('/index/',  methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
    # 如何拿到前端提交过来的数据
    # 前端以post请求方式提交的
    print(request.form) # 只能拿到post请求的数据
    # print(request.args) # 拿到get请求的数据
    # 如何接收文件数据
    print(request.files)
    file_obj = request.files.get('myfile')
    print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

    with open(file_obj.filename, 'wb') as f:
        for line in file_obj:
            f.write(line)
    return 'OK'

app.run()

CSS

用的是flask框架做后端语言

# 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架，Django框架

<form action="">
action:
        1. 什么都不写，默认提交到当前地址
        2. 全写，绝对地址：http://www.baidu.com/login/
        3. 只写后缀
            /index/
            # 它会自动拼接当前计算机的ip+port
            http://127.0.0.1:5000/index/
              
文件的提交：
    '''必须满足两个条件'''
    1. 请求方式必须是post
    2. enctype必须是form-data

    
form表单提交数据的编码方式：
        application/x-www-form-urlencoded
    1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据
        multipart/form-data
    2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据
    3. json # form表单不能提交json格式的数据
    

urlencode
staticpage=https%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html&charset=UTF-8&token=20cc339caa83933ae3baa6dda5465d09&tpl=mn&useranme=123&password=123


from flask import Flask,request

app = Flask(__name__)

# 路由，网址的后缀 baidu.com/index/
@app.route('/index/',  methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
    # 如何拿到前端提交过来的数据
    # 前端以post请求方式提交的
    print(request.form) # 只能拿到post请求的数据
    # print(request.args) # 拿到get请求的数据
    # 如何接收文件数据
    print(request.files)
    file_obj = request.files.get('myfile')
    print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

    with open(file_obj.filename, 'wb') as f:
        for line in file_obj:
            f.write(line)
    return 'OK'

app.run()

基本选择器

<style>
        /*#p1 {*/
        /*    color: red;*/
        /*    font-size: 30px;*/
        /*}*/

        /*.c1 {*/
        /*    color: yellow;*/
        /*    font-size: 25px;*/
        /*}*/

        /*p {*/
        /*    color: green;*/
        /*}*/

        /** {*/
        /*    color: orange;*/
        /*}*/

    </style>
    
id
class
标签选择器
通用选择器

<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午，汗滴禾下土</p>
<p id="p2" class="c1">锄禾日当午，汗滴禾下土</p>
<p id="p3" class="c1" style="color: red;font-size: 20px">锄禾日当午，汗滴禾下土</p>

组合选择器

<style>
      /*ul li .c1 {*/
      /*  color: red;*/
      /*}*/

      div>p {
        color: red;
      }
  </style>

属性选择器

 <style>
        [username] {
            color: red;
        }

        [username=kevin] {
            color: red;
        }

        input[username=kevin] {
            color: red;
        }
    </style>

分组和嵌套

 div, p, span {
            color: red;
        }

标签：index,form,Python,request,基础,表单,color,提交,day47
From： https://www.cnblogs.com/zfq132/p/17563982.html

Python基础day47