一、Web本质
'''
浏览器 浏览器向服务器发起请求
服务端
HTML文件
'''
二、HTTP协议
'''
HTTP协议的由来（SQL语句的由来）:
浏览器只有一个如何兼容N多个服务器
'''
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层上的协议
3.无状态
无论来多少次 都待你如初恋
如何做到保存用户状态？？
cookie、session、token
4.无链接/短链接
请求来我响应你，之后就没联系了
长链接：websocket（群聊功能、服务端主动给客户端发送消息）
# 请求数据格式
请求首行（HTTP协议的版本，当前请求方式）
请求头（一堆k、v键值对）
请求题（并不是所有的请求方式都有请求体，get没有，post有）
# 响应数据格式
响应首行（HTTP协议的版本，响应状态码）
响应头（一堆k、v键值对）
响应体（浏览器展示给用户看的内容）
# 请求方式
get：朝浏览器要数据（可以携带参数，参数不是放在请求体里面，而是放在url后面）
post：朝浏览器提交数据
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息
1xx：服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx：服务端成功响应了你想要的数据 （200 OK请求成功）
3xx：重定向（当你在访问一个需要登录之后才能看到的页面，你会发现会自动跳转到登录页面）
4xx：请求错误
404：请求资源不存在
403：当前请求不合法或者不符合访问资源的条件
5xx：服务器内部错误（500）
三、HTML注释&文档结构
# 注释是代码之母
<!--单行注释-->
<!--
多行注释一
多行注释二
-->
#注释的作用
由于HTML代码非常的杂乱无章而且多，所以我们习惯性的用注释来划定区域方便后续查找。
<!--导航条开始-->
导航条所有HTML代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏啊结束-->
# 文档结构
<html>
<head></head>：head里面的标签不是给用户看的，而是定义一些配置主要是给浏览器看的
<body></body>：body里面的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>
ps：文件的后缀名其实是给用户看的，只不过对应不同的文件后缀名以后不同的软件来处理，并增添很多功能。
注意：HTML代码是没有格式的，可以全部写在一行里，只不过我们习惯了用缩进来表示代码
四、两种打开HTML文件的方式&标签的分类
# 两种打开方式
- 找到文件所在的位置右键选择浏览器打开
- 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可（前提是你电脑上有浏览器）建议使用谷歌浏览器
# 标签的分类一：
- 双标签
<h1></h1>
- 单标签（自闭和标签）
<img/>
# 标签的分类二：
- 块儿级标签：独占一行
h1-h6 p div
1.块儿级标签可以修改长宽，行内标签不可以，修改了也不会有变化
2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签
如果你套了，问题也不大，因为浏览器会自动帮你解开
总结：
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）
- 行内标签：自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签，可以嵌套行内标签（一般不会这么干）
五、head内常用标签
在书写HTML代码的时候，只需要写标签名，然后tab键就能自动补全
<title>Title</title> 网页标题
<style>
h1{
color:greenyellow;
}
</style> 内部用来写css代码
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<script>
alert(123)
</script> 内部用来写js代码
<script src="myjs.js"></script> 还可以引入外部js文件
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
当你在浏览器搜索的时候，只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content="老男孩教育Python学院">
网页的描述性信息
六、body内常用标签
6.1常用标签
<h1>我是h1</h1> 标题标签 1-6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br>换行
<hr>水平分割线
6.2特殊符号
别忘了加分号
nb的space 空格
> 大于号
<: 小于号
& &
¥ ¥
© 版权商标 ©
® 注册商标 ®
6.3常用标签
div：块儿级标签
span：行内标签
上述两个标签是在构造页面初期最常使用的，页面的布局一般先用div和span占位之后再去调整样式
尤其是div使用的频繁
div你可以把它看成是一块区域，也就意味着可以用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的的文本先用span标签
6.4强调标签
6.4.1 img标签
# 图片标签
<img src="" alt="">
src
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据
alt=“这是我女朋友”
当图片加载不出来时候显示的内容
title=“fwk”
当鼠标悬浮到图片上之后，自动展示的提示信息
height width
eg：height=“800px” px是像素单位
高度和宽度当你只修改了一个的时候，另外一个会等比例缩放
如果你修改了这两个参数，并且没有考虑比例的问题，那么图片就会失真
6.4.2 a标签
# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器记忆）
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值，点击即可跳转到对应页面的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新页面跳转 _blank
# 标签具有的两个重要属性
1.id值
类似于标签的身份证号，在同一个HTML页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承，一个标签可以继承多个class值
标签里既可以有默认的属性也可以有自定义的属性
可以将数据存在标签里然后再提取出来
<p id="d1" class="c1" username="jason" password="123"></p>
# a标签的锚点功能 也可以跳转其余标签，但a标签最常用
"""点击一个文本标题，页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<a hrf="#d1">回到顶部</a>
6.4.3 列表标签
1.无序列表（最多）
<ul>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ul>
虽然ul标签很丑，但是在页面局部的时候，只要是排版一致的几行数据基本上用的都是ul标签
2.有序列表（了解）
<ol type="1" start="5">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
1 A I a …了解即可
3.标题列表（了解）
<d1>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</d1>
6.4.4 table标签
# 表格标签 块儿级标签
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> 垂直方向占多行
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
6.4.5 form标签
# 表单标签 块儿级标签
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
第一种 直接将input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
"""
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>DBJ
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框
钓鱼网站
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<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>
6.4.6 验证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只读