"""
今日考题
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>
# 接下来的框架代码无需掌握 看一下效果即可
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只读
‘‘‘
层贴样式表:就是给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.之后再学如何添加样式 """
# 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表单提交数据，完成前后端数据交互
原文：https://www.cnblogs.com/chijintao/p/14741594.html