前端开篇
浏览器窗口输入网址回车发生了几件事
"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""
浏览器可以充当很多服务端的客户端
百度 腾讯视频 优酷视频....
如何做到浏览器能够跟多个不同的客户端之间进行数据交互?
1.浏览器很牛逼 能够自动识别不同服务端做不同处理
2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
那么你就必须要遵循一些规则
HTTP协议
"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
不保存用户的信息
eg:一个人来了一千次 你都记不住 每次都当他如初见
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)
# 请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)
响应体(返回给浏览器展示给用户看的数据)
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在
1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符(大白话 网址)
HTML简介
超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello big baby~</h1>
<a href="https://www.baidu.com/">click me!give you some color to see see!</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
HTML就是书写网页的一套标准
# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
PS:文件的后缀名其实是给用户看到的,只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
注意:HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码
两种打开HTML文件的方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
标签的分类
<h1></h1>
<a href="https://www.xiaomi.com/"></a>
<img/>
1 双标签
2 单标签(自闭和标签)
head内常用标签
在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全
<title>Title</title> 网页标题
<style>
h1 {
color: greenyellow;
}
</style> 内部用来书写css代码
<script>
alert(123)
</script> 内部用来书写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name="keywords" content=""> 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content=""> 网页的描述性信息
body内常用标签
你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
基本标签
<h1>我是h1</h1> 标题标签 1~6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br> 换行
<hr> 水平分割线
标签的分类
# 1 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签(HTML书写规范)
# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签 可以嵌套行内标签
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
商标® ®
常用标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
img标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt="这是我的女友"
当图片加载不出来的时候 给图片的描述性信息
title=""
当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px"
width=""
高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色(浏览器给你记忆了)
"""
href
1.放url,用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
标签具有的两个重要书写
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写
1、列表标签
<p id="d1" class="c1" username="" password="123"></p>
```html
<!--书写格式-->
<html>
<head>
<style>
ul {
list-style:none; # 取消无序列表标签的前缀
}
</style>
</head>
<body>
<!--无序列表-->
<ul>
<li>1、第一项</li>
</ul>
<!--有序列表-->
<ol>
<li>第一项</li>
</ol>
<!--自定义列表-->
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
</body>
</html>
2、表格标签table
<!--表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table bgcolor="red" border="1px" align="center" width="100px" height="100px" style="border-collapse: collapse;border:1px solid green">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>颜值</th>
</thead>
<tbody>
<tr align="center" valign="center">
<td>牛牛</td>
<td>18</td>
<td>无敌</td>
</tr>
<tr>
<td>狗狗</td>
<td>19</td>
<td>看不穿</td>
</tr>
</tbody>
<tfoot>
<td>统计</td>
<td>平均年龄</td>
<td>平均颜值</td>
</tfoot>
</table>
</body>
</html>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
3、表单标签form
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
================================================================================
属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
================================================================================
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<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内
username:<input type="text" id="d1">
</label>
<label for="d2">password:</label> 第二种 通过id链接即可 无需嵌套
<input type="text" id="d2">
ps:input不跟label关联也没有问题
"""
label 和 input都是行内标签
"""
input标签 就类似于前端的变形金刚 通过type属性变形
text:普通文本
password:密文
date:日期
placeholder:提示信息
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>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
<input type="hidden">
钓鱼网站
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" size="2" multiple>
<option value="" selected>新垣</option>
<option value="" selected>斯</option>
<option value="">明</option>
</select>
<select name="籍贯" >
<optgroup label="一线城市">
<option value="北京111" >北京</option>
<option value="上海222">上海</option>
<option value="深圳333" selected>深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="杭州">杭州</option>
<option value="烟台">烟台</option>
<option value="德州" selected>德州</option>
</optgroup>
</select>
textarea标签 获取大段文本
<textarea name="" id="" cols="30" rows="10" style="resize: none"></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>
4、验证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只读
html文档
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单标签</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">
<!--readonly-->
username:<input type="text" id="d1" name="username" disabled value="wuxi">
</label>
</p>
<p>你看不到我:
<input type="hidden">
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="password">
</p>
<p>
birthday:<input type="date" name="birthday">
</p>
<p>
gender:
<input type="radio" name="gender" checked value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="other">其他
</p>
<p>
hobbies:
<input type="checkbox" name="hobbies" value="read">read
<input type="checkbox" checked name="hobbies" value="play">play
<input type="checkbox" name="hobbies" value="running">running
</p>
<p>
province:
<select name="province" id="" multiple size="2">
<option value="上海">上海</option>
<option value="安徽">安徽</option>
<option value="北京">北京</option>
<option value="贵州" selected>贵州</option>
</select>
</p>
<p>
detail_province:
<select name="detail_province" id="">
<optgroup label="安徽">
<option value="合肥">合肥</option>
<option value="滁州">滁州</option>
<option value="芜湖">芜湖</option>
<option value="六安">六安</option>
</optgroup>
<optgroup label="上海">
<option value="徐汇">徐汇</option>
<option value="陆家嘴">陆家嘴</option>
<option value="青浦">青浦</option>
<option value="静安">静安</option>
</optgroup>
</select>
</p>
<p>
文件:
<input type="file" multiple name="file">
</p>
<p>自我介绍:<br>
<textarea name="自我介绍" id="" cols="10" rows="5" maxlength="20"></textarea>
</p>
<p>
倩女幽魂:<br>
<select name="倩女幽魂" id="" multiple>
<option value="偃师">偃师</option>
<option value="画魂">画魂</option>
<option value="异人">异人</option>
<option value="医生" selected>医生</option>
<option value="刀客">刀客</option>
<option value="侠客">侠客</option>
</select>
</p>
<p>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我提交</button>
</p>
</form>
</body>
</html>