从小白到小黑 python学习之旅 日常总结 51（表格标签 表单标签 flask简介 CSS）

表格标签

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <table border="10" cellpadding="5" cellspacing="5">         border="10" 外边框加宽  cellpadding="5" 内边框距离信息的距离 cellspacing="5" 内边框距离外边框的距离
        <thead>                               表头(字段信息)
            <tr>                              一个tr就表示一行
                <th>username</th>             th  加粗文本
                <td>password</td>             td  正常文本
                <th>hobby</th>
            </tr>
        </thead>
        <tbody>                     表单(数据信息)
            <tr>
                <td>jason</td>
                <td>123</td>
                <td>read</td>
            </tr>
            <tr>
                <td colspan="2">egon</td>   colspan  水平方向占多行
<!--                <td>123</td>-->
                <td rowspan="2">DBJ</td>    rowspan  垂直方向占多行
            </tr>
            <tr>
                <td >tank</td>
                <td>123</td>
                <td>hecha</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

 

表单标签

能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>注册页面</h1>
<!--
    <form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
    action:控制数据提交的后端路径(给哪个服务端提交数据)
          1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交
        3.只写路径后缀action='/index/'
          自动识别出当前服务端的ip和port拼接到前面
          host:port/index/

    form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
    可以通过method指定提交方式method="post"

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">



<!--label 和 input都是行内标签-->
<!--input type="text" 文本-->

<!--
<label> 标签为 input 元素定义标注（标记）

效果是鼠标放在username时 也自动选中了输入框
1  label 元素不会向用户呈现任何特殊效果。
2  <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

第一种 直接讲input框写在label内
<label for="d1">
    username:<input type="text" id="d1">
</label>

第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">

ps:input不跟label关联也没有问题

disabled:禁用
readonly:只读  只能看不能改
placeholder:输入提示
-->
        <p>
            <label for="d1">username:
                <input type="text" id="d1" name="username" value="默认值" disabled>
            </label>
        </p>


        
<!-- type="password" 密文 -->
        <p>
            <label for="d2">password:
                <input type="password" id="d2" name="password">
            </label>
        </p>

<!--
hidden:隐藏当前input框
        钓鱼网站
-->
            <input type="hidden" name="usernamename" value="骗子账户">

<!--  type="date" 日期输入框   -->
        <p>birthday:
            <input type="date">
        </p>

<!--
所有获取用户输入的标签 都应该有name属性
  name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>
-->
<!--
  type="radio" 单选
      设定默认选中  要加checked='checked'
      <input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      <input type="radio" name="gender" checked>女
-->
<!--
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容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>


<!--  type="checkbox" 多选     -->
        <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>

<!--  select标签 默认是单选 可以加mutiple参数变多选 默认选中selected  -->
        <p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
        </p>

<!--  select标签 默认是单选 可以加multiple参数变多选 默认选中selected  -->
        <p>前女友:
            <select name="" id="" multiple>    
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
        </p>

<!--  带有标题的  optgroup label="标题"   -->
        <p>province1:
            <select name="" id="">
                <optgroup label="上海">
                    <option value="">浦东</option>
                    <option value="">黄埔</option>
                    <option value="">青浦</option>
                </optgroup>
                <optgroup label="北京">
                    <option value="">朝阳</option>
                    <option value="">昌平</option>
                    <option value="">沙河</option>
                </optgroup>
                <optgroup label="深圳">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </optgroup>
            </select>
        </p>

<!--
file:获取文件  也可以一次性获取多个multiple        
-->
        <p>文件:
            <input type="file" multiple name="myfile">
        </p>

<!--
textarea 标签   大段文本框   cols="30" rows="10"调整大小
-->
        <p>自我介绍:
            <textarea name="info" id="" cols="30" rows="10"></textarea>
        </p>

<!-- 当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致  value="指定内容"-->
<!--  type="submit"  刷新页面 将form收到的数据打包发送给服务端    -->
        <input type="submit" value="注册">
<!-- type="button"就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，js可以给它自定义各种功能  -->
        <input type="button" value="按钮">
<!-- type="reset"重置内容  -->
        <input type="reset" value="重置">
<!-- button标签也能用来触发form表单提交数据的动作  -->
        <button>点我</button>
    </form>
</body>
</html>

 

 

 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('myfile')
    # file_obj.save(file_obj.name)
    return 'OK'

app.run()
View Code

 

 

 CSS

 层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

 

注释

 

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

 

 

CSS的语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
}

 

 

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选择器*/
#d1 {                    /*找到id是d1的标签 将文本颜色变成绿黄色*/
    color: greenyellow;
}

/*类选择器*/
.c1 {                    /*找到class值里面包含c1的标签*/
    color: red;
}

/*元素(标签)选择器*/
span {                   /*找到所有的span标签*/
    color: red;
}

/*通用选择器*/
* {                       /*将html页面上所有的标签全部找到*/
    color: green;
}

 

 

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    <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 {          /*div以下的 所有的span（只要是div一下的级别）*/
    color: red;
}

/*儿子选择器*/
div>span {          /*div下一级别的 的span*/
    color: red;
}

/*毗邻选择器*/
div+span {          /*div同级别紧挨着的下面的第一个span*/
    color: aqua;
}

/*弟弟选择器*/
div~span {          /*div同级别下面所有的span*/
    color: red;
}

 

 

属性选择器

 

1 含有某个属性
[username] {                          /*将所有含有属性名是username的标签背景色改为红色*/
    background-color: red;
}

2 含有某个属性并且有某个值
[username='jason'] {                  /*找到所有属性名是username并且属性值是jason的标签*/
    background-color: orange;
}

3 含有某个属性并且有某个值的某个标签
input[username='jason'] {             /*找到所有属性名是username并且属性值是jason的input标签*/
    background-color: wheat;
}

 

posted @ 2020-05-12 20:03  It's_cool  阅读(224)  评论(0)    收藏  举报