今日学习内容
一、前端简介
-
前端与后端
前端：用户可以直接操作的界面。
后端：用户不能直接操作的内部真正执行核心业务逻辑的代码程序。
-
前端的学习
真正的前端工程师也需要学习很长时间，作为后端的工程师可以学习前端的部分核心知识点。
-
前端核心基础
-
HTML
网页的骨架
-
CSS
网页的样式
-
JS
网页的动态
-
二、超文本传输协议前戏
模拟一个服务端程序
1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流，有了一些协议 HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式没问题，因为浏览器发送的请求是已经封的。问题就在于自己写的服务端响应数据格式。
import socket
server = socket.socket() # 默认就是基于网络的TCP协议
server.bind(('127.0.0.1', 8080))
server.listen(5)
sock, address = server.accept()
data = sock.recv(1024)
print(data.decode('utf8'))
sock.send(b'HTTP/1.1 200 OK\r\n\r\n') #发送HTTP协议，请求成功！
with open(r'01server.txt', 'r', encoding='utf8') as f:
data1 = f.read()
sock.send(data1.encode('gbk'))
print(data1.decode('utf8'))
'''
请求首行
GET / HTTP/1.1 \r\n
请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: "Chromium";v="104", " Not A;Brand";v="99", "Google Chrome";v="104"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
换行
\r\n
请求体
GET请求没有请求体，所以这里为空。
'''
三、 HTTP协议
什么是HTTP协议？
超文本传输协议, 规定了浏览器与服务端之间数据交互的格式。
浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。
-
四大特性
-
基于请求响应
HTTP协议规定请求从客户端发出，最后服务端响应客户端请求并返回
-
基于TCP/IP之上作用于应用层的协议
-
无状态
协议本身并不保留之前一切的请求或响应报文的信息。
HTTP是一种不保存状态,即
无状态(stateless)协议。HTTP协议 自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别,协议对于发送过的请求或响应都不做持久化处理。总结：见你千百遍，我始终待你如初恋（见）。
-
无/短连接
服务器处理完客户的请求，并收到客户的应答后，即断开连接。客户端请求一次服务端就响应一次， 之后就没有任何关系。
作用：采用这种方式可以
节省传输时间。注意：后面可以用
websocket可以实现长连接，可以让双方建立连接后默认不断开连接（QQ、微信聊天采用的就是这种）
-
-
数据格式
HTTP协议既然规定了客户端与服务端之间的通信格式，http协议包含由浏览器发送数据到服务器需要遵循的请求协议和服务器发送数据到浏览器需要遵循的请求协议。
-
请求数据格式
-
请求首行（请求方式：有很多种，协议名称及版本）
-
请求头（K:V键值对的形式存在的数据）
-
换行（请求头的结束标志）
-
请求体（携带一些敏感的数据比如密码，不是所有的请求都有请求体）
get请求 : 朝服务端索要数据 (例 : 输入网址获取对应的内容)post请求 : 朝服务端提交数据 (例 : 登入,输入用户名密码,提交到服务端进行校验)
-
-
响应数据格式
- 响应首行（响应状态码）
- 响应头（K:V键值对的形式存在的数据）
- 换行（
\r\n请求头的结束标志） - 响应体（一般情况下就是浏览器）
-
-
响应状态码
利用数字表示一些复杂的情况说明（类似于暗号）
状态码 类别 解释 1XX Informational（信息性状态码） 服务端已经接收到你的请求正在处理，你可以继续提交或者等待 2XX Success（成功状态码） 200 OK服务端给出了相应的响应 3XX Rediection（重定向状态码） 重定向（访问一个需要登录之后才能看到页面会自动跳转到登录页面） 4XX Client Error（客户端错误状态码） 403-请求不符合条件，404-请求资源不存在 5XX Server Error（服务端错误状态码） 服务端内部错误
四、HTML简介
超文本标记语言：浏览器展示页面的底层代码层次需要的东西。
浏览器展示的界面我们也称之为HTML页面，存储HTML语言的文件后缀一般是.html。
HTML注释语法
<!--注释内容-->
快捷键：Ctrl + ?
HTML文本结构
<html> 所有的页面代码都必须写在html标签内部
<head></head> head内的数据一般用户看不了
<body></body> body内的数据就是浏览器展示给用户看的
</html>
HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
注意：
HTML代码是不讲究缩进的，我们只是习惯了python的缩进语法。
五、head内常见标签
title 控制标签页小标题
<title>My HTML</title>
style 内部支持编写CSS
<style>
body {
background-color: aqua;
}
</style>
link 引入外部CSS文件
<link rel="stylesheet" href="index.css">
script (内部支持编写JS代码:JavaScript 通常用于图像操作、表单验证以及动态内容更改。)
<script>
document.write("Hello World!")
</script>
meta (meta主要用于设置网页中的一些元数据，元数据不是给用户看)
1.charset 指定网页的字符集
<meta charset="UTF-8">
2.表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="keywords" content="填写一些关键字，提升网页被搜索的概率">
2.用于指定网站的描述
<meta name="description" content="填写一些网页的简介">
详细标签可以参考：https://www.runoob.com/tags/html-reference.html
六、body内基本标签
h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下划线
i 斜体
s 删除线
b 加粗
注意：有很多不同标签可以表现相同的样式
七、body内基本符号
为什么不直接用符号来表示，因为html有很多标签，都是<>形式，会造成错误，页面错乱。
空格
> 大于号
< 小于号
& &
¥ ¥
® 注册 ®
© 版权 ©
八、块儿级标签与行内标签
-
块儿级标签 h1~h6 p hr br
一个标签独占一行
-
行内标签 u i s b
内部文本占多大就占多少位置
九、body内布局标签
div>>>块儿级标签 span>>>行内标签
1.块儿级标签可以通过CSS标签调整不独占一行，可以CSS对div宽度、长度修改，然后再用float可以调整。
2.标签间也可以嵌套，块儿级标签可以嵌套，但是p标签和div嵌套的时候，是嵌套在div里面，不然会没有效果。
3.行内标签只能嵌套在行内
十、body内常见标签
1.a标签---链接标签
href 可以填写网站，点击会自动跳转
href 还可以填写其他标签的id值，实现锚点
target 可以控制新建页面是否在当前或其他页面跳转
_self 就在当前页面新建页面
_blank 新建页面在其他页面
2.img标签---图片标签
src 填写图片地址（网络地址、本地地址）
title 鼠标悬浮在图片就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
注意：
height和width调整其中一个，另一个等比例缩放
十一、标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签
1.id属性（相当于每个标签的标识）
在同一html中，id不能重复，可以用哪个这种性质来做锚点
2.class属性（相当于类，相同的特性放在一起）
类似于分组，多个标签可以拥有相同的class值
十二、列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
'type表示按什么类型的序列'
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
'''
可以一次性创建多层相同标签
eg： li*3 按Tab可以 创建3层标签
<li></li>
<li></li>
<li></li>
'''
十三、表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xz</td>
<td>123</td>
</tr>
</tbody>
</table>
十四、表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form> 元素包含一个或多个如下的表单元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
---------------------------------------------------------------------
<form action="" method=""></form>
action属性：数据的提交地址,空则默认朝当前页面所在的地址提交
method属性：用于控制请求的方式(get\post)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p> # 用于敏感数据输入
<p>birthday:<input type="date"></p> # 用于日期
<p>email:<input type="email"></p> # 用于邮箱
<p>gender: # name 后面是分组的组名，只能多选一
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby: #name后面相同组名是相同组，可多选
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p>
<p>file: #上传单个文件
<input type="file">
</p>
<p>files: #上传多个文件
<input type="file" multiple>
</p>
<p>province: # 复选框
<select name="" >
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>GF: # 滚动选择
<select name="" multiple>
<option value="">肖战</option>
<option value="">王一博</option>
<option value="">晨哥</option>
</select>
</p>
<p>info: #获取大量文本
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>