前端 day 02 表单数据提交，css属性查找

5.12

昨日内容

  • web的本质：服务端----html文件----浏览器

  • http协议：统一服务端与浏览器直接交流的标准，浏览器唯一，要去兼容多个服务端

    • 四大特性

      基于请求响应

      基于tcp/ip作用于应用层之上

      无状态，保存用户状态：cookie，session

      无连接

  • 请求数据格式：请求首行（http版本，请求方式），请求头，/r/n，请求体（不是所有的方式都有请求体）

  • 响应数据格式

  • 请求方式

    get，post

    get请求的参数放在url里

  • 响应状态码：用数字来表示提示信息

    1xx,2xx,3xx,4xx,500

    这些状态码是http协议规定的，会有别的状态码

  • html：标记语言，书写网页的标准

    <!--注释-->
<!--文档结构-->
<html>
    <head>
        <!--不是给用户看的，是给浏览器内看的一些配置信息-->
    </head>
    <body>
        <!--给用户看的-->
    </body>
</html>

  • head内常用标签

    <title>定义网页标题信息</title>
<style>内部支持书写css</style>
<link>引入外部css文件</link>
<script>引入js文件</script>
<meta>定义网页源信息

  • body内常用标签

    h1~h6 标题标签
p段落标签
u i b s
hr，br

  • 常用标签

    div 用于网页初期划定范围
span 用于装文本的
a 链接标签
img 图片标签

  • 标签的分类

    1. 单标签/双标签
2. 块级标签/行内标签
	块级：独占一行，可以设置长款 div
	行内：文本多大，自身就多大 span
	
块级标签可以嵌套任意标签，p标签除外
行内标签不嵌套

  • 特殊符号

    空格 &nbsp
大于号> &gt
。。。

  • 标签两个重要的属性

    id 标签的唯一标识，同一页面内不能重复
class

  • 列表标签，页面上只要是带有规则的排序文字，都用的是无序列表

    ul，li无序列表
ol，li有序列表

今日内容

  • html结束：表格标签，表单标签
  • 框架
  • css：选择器

表格标签

<table border="1" cellpadding="1">
	<thead>
		<tr>
			<th>user</th>
			<th>pwd</th>
			<th>sex</th>
		</tr>
	</thead>
	<tbody>
        <tr>
            <td>aaa</td>
            <td>123</td>
            <td>male</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>123</td>
            <td>male</td>
        </tr>
    </tbody>
</table>

table的属性：border加外边框，带颜色和立体效果的，cellpadding
数据td标签的属性：colspan=2水平方向占两行，rowspan=垂直方向占两行
原生的表格标签很丑，但是后续一般使用框架封装好的，很好看

表单数据

能够获取前端用户数据，基于网络发送给后端发送数据

<form action="">
	input
</form>
<!--在该标签内部书写的数据都会被form接收
action：用于控制数据提交的后端路径，给哪个服务端提交数据

三种书写方式
1. 什么都不写，默认向当前url提交数据
2. 写全路径，https://www.baidu.com ，向百度服务器提交
3. 只写路径后缀，action='/index' 自动识别出当前服务端的ip和端口，拼接到前面 host:port/index/
-->

input

<!--
获取用户的输入的标签：input
-->
<input type="text" id="d1">
<!--
通过type属性，可以变成很多种输入框
	text：普通文本
	password：密文展示
	date：日历
	submit：按钮，用来触发form表单提交数据的动作
	button：本身没有任何功能，可以加上js绑定事件
	reset：重置
如果没有指定按钮的文本内容，浏览器打开之后的文本会不一样，可以在input内用value指定内容
-->
两种书写方式
1. 直接将input框写在lable内
<lable for="d1">user:<input type="text" id="d1"></lable>
lable是行内标签，两个input会挨在一起：包在p标签里面，可以让每个输入框占一行

2. 通过id链接，无需嵌套
<lable for="d1">user:</lable>
<input type="text" id="d1">

lable是行内标签，两个input会挨在一起：包在p标签里面，可以让每个输入框占一行
<p>
    <input type="date" id="d1">
	<!--输入日历-->
</p>

type参数：date，password，submit，button，reset，radio
date可以把输入框变成选择日历，password可以把输入框变成***

能够触发提交form数据的按钮

<input type="submit">
<button>点击提交</button>

radio单选

<p>
    <input type="radio" name="gender" checked="checked">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他
</p>
<!--选择性别栏，只能选择一个，默认选中男
默认选中：checked="checked"
标签名和属性名一样的时候可以简写：checked
<input type="radio" name="gender" checked>男
-->

checkbox多选

<p>hobby：
    <input type="checkbox" checked>read
    <input type="checkbox">sleep
    <input type="checkbox">music
</p>
<!--
多选框，✔的那种
-->

select下拉框

<p>province：
    <select name="" id="">
        <option value="sh">上海</option>
        <option value="jh">金华</option>
        <option value="">珠海</option>
    </select>
</p>
<!--
单选下拉框，默认选择第一个
-->
<!--
在option中加selected 默认选中
默认四单选加一个multiple属性，可以多选
-->

file选择文件

获取本地的文件，可以用于上传，默认一个，加multiple可以上传多个
<p>上传文件：
    <input type="file">
</p>

textarea输入大段文本

<p>自我介绍：
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

验证form表单提交数据

安装flask

pip3 install FLASK

from flask import FLASK
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST']) # 当前url既可以支持get，也可以支持post请求
def index():
    print(request.form)
    print(request.file)
    file_obj = request.files.get('myfile')
	return 'OK'
app.run()

# 在网页form的action里面添加127.0.0.1:5000/index/
# form默认提交数据的方式是get，数据是直接放在url里面的，提交方式可以通过method改成post，这样那些敏感数据就不会放在url里给人看到了

# 针对用户选择的标签，用户不需要输入内容，我们应该提前给这些标签添加内容：value="male" 一类

# form表单提交文件要注意：
# method必须是post，enctype必须指定form-data
# enctype类似于数据提交的编码格式，默认是urlencoded，只能提交普通文本，改成form-data之后也能支持文件

针对用户输入的内容，可以加value默认值

CSS

给html添加样式的，让html变好看

/*注释*/
/* 通常在写css样式的时候也会用注释来划定样式

/*顶部样式

/*左侧样式
。。。

/* css语法结构*/
选择器{
	属性1:值1;
	属性2:值2;
}

引入css的几种方式

  1. 在head的style标签内写
  2. 新建一个css文件，在文件里面写，再在head里面的link标签中引入（最正规的方式）
  3. 行内式，在html里的标签里写

css选择器

找到了标签，才能给标签添加样式

基本选择器

  1. id选择器 #id 井号+id值
  2. 类选择器 .class 点+class名
  3. 标签选择器 标签名{} 对所有的某一种标签添加属性
  4. 通用选择器 找html页面里所有的标签，基本不用
<head>
    <style>
        /*#d1 { 找到id是d1的标签，文本颜色变成红色
            color:red;
        }*/
        .c1 {
            color:green;
        }
        * {
            color:yellow;
        }
    </style>
</head>
<div id="d1">div
    <p>div里的p</p>
    <span>div里的span</span>
</div>
<div id="d2" class="c1 c2">
    <p>div里的p</p>
    <span>div里的span</span>
</div>

组合选择器

  1. 后代选择器
  2. 儿子选择器
  3. 毗邻选择器
  4. 弟弟选择器

在前端，将标签的嵌套，用父子关系来描述层级

/* 后代选择器*/
/* 给div内部的span添加属性*/
<style>
    div span {
        color:red;
    }
</style>

儿子选择器
div>span{
	color:red;
}

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

弟弟选择器：同级别下面所有的标签都是弟弟
div~span {
	color:black;
}

属性选择器

  1. 含有某个属性
  2. 含有某个属性并且含有某个值
  3. 含有某个值并且
/* 第一种情况 */
[username] {
	background-color:red; /*将所有含有名字username的标签的背景改成red*/
}

/* 第二种情况 */
[username='jason'] {
    color:orange; /* 所有包函属性username且值为jason的标签，变色*/
}

/* 第三种情况 */
input[username='jason'] {
    color:orange; /*找到所有包函属性username且值为jason的 input 标签，变色*/
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telecasterfanclub/p/12877446.html