"""
今日考题
1.什么是HTTP协议
2.列举你所知道的HTML标签
"""
-
Web的本质
"""
浏览器
服务端
文件(html文件)
"""
课程web方向
前端 django 路飞 -
HTTP协议
"""
HTTP协议的由来
浏览器只有一个如何兼容N多个服务端
"""
# 四大特性
1 基于请求响应
2 基于TCP/IP作用于应用层之上的协议
3 无状态
无论来多少次 都待你如初见
如何做到保存用户状态？？？
cookie、session、token
4 无/短链接
请求来我响应你 之后就没有联系了
长链接:websocket(群聊功能、服务端主动给客户端发送消息)
?
# 请求数据格式
请求首行(HTTP协议的版本，当前请求方式)
请求头(一大堆k，v键值对)
请求体(并不是所有的请求方式都有请求体,get没有post有)
# 响应数据格式
响应首行(HTTP协议的版本，响应状态码)
响应头(一大堆k，v键值对)
响应体(浏览器展示给用户看的内容)
# URL
统一资源定位符 类似于坐标
# 请求方式
1.get请求
朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)
url?username=jason&password=123
2.post请求
朝别人提交数据
?
# 响应状态码
"""用简短的数字来表示一大串提示性信息"""
1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
2XX:请求成功(200 OK)
3XX:重定向(你想访问A页面但是给你调到了B页面)
4XX:请求错误(404请求资源不存在、403请求不符合条件)
5XX:服务端内部错误(500)
ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息
公司A
1000:
1001:
1002:
公司B
2001:
2002:
2003:
... -
HTML
"""
超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
书写网页的一套标准
除了HTML可以书写前端页面之外
还有XML也可以书写前端页面
"""
?
# 注释 <!--注释-->
?
# 文档结构
<html>
<head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息
<body></body>：body书写的所有的内容 都是给用户看的
</html> -
head内常用标签
title 定义网页标题信息
style 内部支持直接书写css代码
link 引入外部css文件
script 内部可以书写js代码并且也可以引入外部js文件
meta 定义网页源信息
keywords
description -
body内基本标签
"""
h1～h6 标题标签
p段落标签
u i b s
hr
br
"""
?
# 特殊符号
空格
大于 >
小于 <
&
®
©
¥ -
常用标签
"""
div：网页初期划定区域范围
span：划定文本的
"""
?
# a标签
链接标签
<a href=‘‘ target=‘‘></a>
href
1.可以放一个url点击自动跳转
2.还可以放其他标签的id值 锚点功能
target
控制是否在当前页跳转
_self
_blank
# img标签
图片标签
<img src=‘‘ alt=‘‘ title=‘‘ height=‘‘ width=‘‘/>
src
1.可以放图片的路径 本地或者线上
2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)
alt
图片加载不出来的时候 展示的提示信息
title
鼠标悬浮在图片上之后展示的提醒信息
height、width
单独调整某一个 另外一个会自动等比例缩放
如果两个都调整了 可能会出现图片的失真
# 标签一般情况下都需要有两个重要的属性
id值
唯一标示 同一个页面不能有重复
class值
类似于类的继承 可以有多个 -
标签的分类
"""
分类1:
双标签
<h1></h1>
单标签
<img/>
分类2:
块儿级标签:独占一行 可以设置长宽
div p
注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签
但是p标签只能嵌套行内标签
行内标签:自身文本多大就占多大 不能设置长宽
span a img
PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错
浏览器会自动帮你解除嵌套关系
""" -
列表标签
ul li 页面上只要是带有规则的排序文字 一般用的都是无序列表 ol li 有序列表 dl dt dd 标题列表
今日内容概要
-
表格标签(只要是展示数据 一般都可以使用表格标签)
-
表单标签(获取前端用户数据发送给后端) (重要！！！)
-
偷窥一下后端框架的基本使用(flask)
-
css层叠样式表(选择器)
表格标签
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table>
<thead> 表头(字段信息)
<tr> 一个tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead>
<tbody> 表单(数据信息)
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody>
</table>
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占多行
<td rowspan="2">DBJ</td> 垂直方向占多行
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
表单标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action=‘/index/‘
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
<label for="d1"> 第一种 直接将input框写在label内(label包input，用id标明包谁)
username:<input type="text" id="d1">
</label>
<label for="d2">password:</label> 第二种 通过id链接即可 无需嵌套(label可以不包input)
<input type="text" id="d2">
ps:input不跟label关联也没有问题(pycharm会飘黄，但效果一致)
"""
label 和 input都是行内标签
"""
input标签 就类似于前端的变形金刚 通过type属性变形
属性组：↓↓↓
text:普通文本
password:密文
date:日期
按钮组：↓↓↓
submit:用来触发form表单提交数据的动作(提交按钮)
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
reset:重置内容
选择组：↓↓↓
radio:单选
默认选中要加checked=‘checked‘
<input type="radio" name="gender" checked=‘checked‘>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox:多选
<input type="checkbox" checked>play (默认值也是使用checked)
<input type="checkbox">read
<input type="checkbox">music
文件组：↓↓↓
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站
button标签 触发form表单提交数据的动作(提交按钮) ---> 注意和input里的button属性区分开
select标签 默认是单选 可以加mutiple参数变多选 默认选中用selected(注意这里不再是使用checked)
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
textarea标签 获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1、<input type="submit" value="注册">
2、<button>点我</button>
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
验证form表单提交数据
# 接下来的框架代码无需掌握 看一下效果即可
pip3 install FLASK
form表单默认提交数据的方式 是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
‘针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容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>
<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>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
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">
"""下面的代码无需掌握 你只需要关心form表单即可"""
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.png‘)
file_obj.save(file_obj.name)
return ‘OK‘
app.run()
# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">
username:<input type="text" id="d1" name="username" value="默认值">
</label>
‘‘‘
disable 禁用
readonly只读
‘‘‘
CSS
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
# css的三种引入方式
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
""" css的学习流程 1.先学如何查找标签 css查找标签的方式你一定要学会 因为后面所有的框架封装的查找语句都是基于css来的 css选择器很简单很好学不要有压力!!! 2.之后再学如何添加样式 """
CSS选择器
基本选择器
# id选择器
# 类选择器
# 元素/标签选择器
# 通用选择器
<style>
id选择器
#d1 { /*找到id是d1的标签 将文本颜色变成绿黄色*/
color: greenyellow;
}
类选择器
.c1 { /*找到class值里面包含c1的标签*/
color: red;
}
元素(标签)选择器
span { /*找到所有的span标签*/
color: red;
}
通用选择器
* { /*将html页面上所有的标签全部找到*/
color: green;
}
</style>
组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<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 {
color: red;
}
# 儿子选择器
div>span {
color: red;
}
# 毗邻选择器
div+span { /*同级别紧挨着的下面的第一个*/
color: aqua;
}
# 弟弟选择器
div~span { /*同级别下面所有的span*/
color: red;
}
属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
[username=‘jason‘] { /*找到所有属性名是username并且属性值是jason的标签*/
background-color: orange;
}
input[username=‘jason‘] { /*找到所有属性名是username并且属性值是jason的input标签*/
background-color: wheat;
}
总结
""" 1.form表单所有相关的标签都需要掌握 2.后端框架稍微了解一下 激发兴趣 3.选择器练习一下 """
作业
今日作业 必做题 1.form表单所有知识点自己敲一遍 2.用html搭建一个注册页面 3.自己演示操作css各种选择器 选做题 1.用web框架体验一下form表单提交数据，完成前后端数据交互