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标签除外 行内标签不嵌套 -
特殊符号
空格   大于号> > 。。。 -
标签两个重要的属性
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的几种方式
- 在head的style标签内写
- 新建一个css文件，在文件里面写，再在head里面的link标签中引入（最正规的方式）
- 行内式，在html里的标签里写
css选择器
找到了标签，才能给标签添加样式
基本选择器
- id选择器
#id井号+id值 - 类选择器
.class点+class名 - 标签选择器
标签名{}对所有的某一种标签添加属性 - 通用选择器 找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>
组合选择器
- 后代选择器
- 儿子选择器
- 毗邻选择器
- 弟弟选择器
在前端，将标签的嵌套，用父子关系来描述层级
/* 后代选择器*/
/* 给div内部的span添加属性*/
<style>
div span {
color:red;
}
</style>
儿子选择器
div>span{
color:red;
}
毗邻选择器，同级别紧挨着的下面的第一个，div下面的span变颜色
div+span {
color:aqua;
}
弟弟选择器：同级别下面所有的标签都是弟弟
div~span {
color:black;
}
属性选择器
- 含有某个属性
- 含有某个属性并且含有某个值
- 含有某个值并且
/* 第一种情况 */
[username] {
background-color:red; /*将所有含有名字username的标签的背景改成red*/
}
/* 第二种情况 */
[username='jason'] {
color:orange; /* 所有包函属性username且值为jason的标签，变色*/
}
/* 第三种情况 */
input[username='jason'] {
color:orange; /*找到所有包函属性username且值为jason的 input 标签，变色*/
}