目录
前端引入知识
前端
任何与用户直接打交道的操作页面，都可以称之为前端（手机页面app、电脑页面软件、平板页面软件）
后端
不直接与用户打交道，而是控制核心逻辑的运行。
eg:各种编程语言编写的代码（python代码、java代码、c++代码）
前端三剑客
1.HTML 网页的骨架（没有样式很难看）
2.CSS 网页的样式（给骨架美化）
3.JavaScript 网页的动态（丰富用户体验）
什么是HTML?
1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，* 对同一个标签可能会有不同的解释。（兼容性问题）
3.网页文件的扩展名：.html或.htm
注意：HTML是一种标记语言（markup language），它不是一种编程语言。 HTML使用标签来描述网页。
前端引入
1.编写前端的步骤
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
2.前端BS架构
我们在编写TCP服务端的时候，针对客户端的选择可以是自己写的客户端代码，也可以是浏览器充当客户端（b/s本质也是c/s架构）
3.搭建服务器 （）浏览器访问
服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
while True:
data = conn.recv(1024)
if data == 0:
break
print(data)
server.send(b'hello friend')
浏览器客户端访问结果
解决方法
浏览器可以访问很多服务端 如何做到无障碍的与这么多不同程序员开发的软件实现数据的交互。
1.浏览器自身功能强大 自动识别并切换(太过消耗资源)
2.大家统一一个与浏览器交互的数据方式(统一思想) 统一标准 就是:HTTP协议
HTTP协议
1.什么是HTTP协议
HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符)。
eg: 博客园的地址：https://www.cnblogs.com/
2.四大特性
2.1、基于请求响应
客户端发送请求 服务端回应响应。服务端永远不会主动给客户端发消息，如果想让服务端主动给客户端发送消息可以采用其他网络协议
2.2、基于TCP、IP作用于应用层之上的协议
该协议属于应用层
2.3、无状态
服务端不会保存客户端的状态(不保存客户端的状态信息)
"纵使见她千百遍 我都当她如初见"
2.4、无\短连接
客户端与服务端不会长久保持连接（两者请求响应之后立刻断绝关系）
如果想要长链接
3.数据格式
3.1 请求格式
请求首行(请求方式(有很多种) 协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
3.2 响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)
3.响应状态码
3.1 响应状态码
用数字来表示一串中文意思 xx表示不确定
1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
2XX:200 OK请求成功 服务端返回了相应的数据
3XX:重定向302(临时) 304(永久)(原本想访问A页面 但是自动跳转到了B页面)
4XX:403没有权限访问 404请求资源不存在
5XX:服务器内部错误
3.2 自定义状态码
公司还会自定义状态码 一般以10000开头
参考: 聚合数据 APL
作用:
后端写给前端的状态码
基于HTTP协议搭建HTML
简易版
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
print(data)
# conn.send(b'hello friend')
# 遵循HTTP响应格式
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# 格式化字体
conn.send(b'<h1>hello friend<h1>')
结果展示
# 请求首行
b'GET / HTTP/1.1\r\n
# 请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\nCache-Control: max-age=0\r\nsec-ch-ua: "Google Chrome";v="107", "Chromium";v="107", "Not=A?Brand";v="24"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36\r\nAccept: 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\nSec-Fetch-Site: cross-site\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
请求体（当前为空）
网页版实现web
代码实现的过程：浏览器发送请求>>HTTP协议>>服务端接收请求>>服务端返回响应>>服务端把HTML文件内容发送给浏览器>>浏览器渲染页面
升级版网页搭建
服务器
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
data = conn.recv(1024)
print(data)
# conn.send(b'hello friend')
# 遵循HTTP响应格式
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# conn.send(b'hello friend')
# 格式化字体
conn.send(b'<h1>hello friend<h1>')
# 跳转地址
conn.send(b'<a href="https://gitee.com/dashboard">let us look this nets</a>')
# 调整图片
conn.send(b'<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1102%252F8425365aj00r1xzrs001wc000hs00a5g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672395835&t=d3103c40a1e0b6b3293dabab60be7d0b"/>')
with open(r'a.txt','rb') as f:
conn.send(f.read())
网页版演示
HTML
HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
超文本标记语言:所见即所得(没有任何逻辑 是什么就是什么)
百度解析：
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
HTML概览
1.HTML注释语法
单行注释：<!--注释语法-->
多行注释：
<!--
多行注释
多行注释
-->
2.HTML文档结构
<html>
<head></head>
<body></body>
</html>
1.<html> 固定格式 html包裹
2.<head> 主要放跟浏览器交互的配置
3.<body> 主要放给用户查看的花里胡哨的内容
'''在使用编程工具创建的时候就会自动编写文档结构'''
eg:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
解析：
1.<!DOCTYPE html> :声明为HTML文档
2.<meta charset="UTF-8"> :默认编码
3.<html>,</html> :是文档开始标记和结束的标记。是HTML页面的根元素，在他们之间是文档的头部(head)和主体(body)
4.<head>,</head>:定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
5.<title>,</title>:定义了网页标题，在浏览器标题栏显示。
6.<body>,</boby>:之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
3.HTML标签分类
1.单标签（自闭和标签）
<img/>
2.多标签 (有头有尾)
<h1></h1>
4.存网页文件、pycharm创建网页
HTML文档结构
head常见标签
| 标签 | 意义 |
|---|---|
| title | 定义网页标题 |
| style | 定义内部样式表 |
| script | 定义JS代码或引入外部JS文件 |
| link | 引入外部样式表文件或网站图标 |
| meta | 定义网页原信息 |
1.title网页小标题
2.meta定义网页源信息(很多配置)
meta 定义网页源信息
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
eg:
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
补充知识
1.指定该网址2秒后跳转到jd
<meta http-equiv="refresh" content="2;URL=https://www.jd.com">
2.keywords 关键字搜索
<meta name="keywords" content="物流,科技,奶茶,跳转">
3.description 网页描述信息(简介)
<meta name="description" content="恒运集团科技">
3.style内部支持编写css代码
<style>
h1 {
color: green;
}
</style>
4.link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码也可以引入外部js文件
1.内部写js代码
<script>
prompt('好好活着','不要浪费生命')</script>
2.引入外部js文件
<script src="myjs.js"></script>
ps:了解每个标签大致的作用即可
整体代码展示：
body内标签
基本标签
| h1-h6 | 标题标签 |
|---|---|
| p | 段落标签 |
| u | 下划线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
| br | 换行（有其他符号也是换行的） |
| hr | 分割线 |
标签的分类二：
行内标签 u i s b
内部文本多大就占多大
块儿级标签 h系列 p
独占一行
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ¥
6.© ©
7.® ®
布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
eg:
<p>123
<p>321</p>
</p>
常用标签
"""
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
"""
1.a标签 链接标签
1.1 href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
1.2 target
默认_self原网页跳转
_blank新建网页跳转
2.img标签 图片标签
2.1 src 属性指定图片地址
1.填写图片地址
2.还有更多特性 目前没法讲
2.2 title 属性写文本
鼠标悬浮在图片上自动展示的文本
2.3 alt 属性编写文本
图片加载失败提示的信息
2.4 width\height 性写像素
图片的尺寸 两者调整一个即可 等比例缩放
列表标签
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题标签
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
1.tr就表示一行
2.th在表头的字段名称
3.td标签 普通的单元格数据
eg:
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>kimi</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>rose</td>
<td>23</td>
</tr>
</tbody>
</table>
表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据的提交地址
method 控制数据的提交方法
input标签(类似于前端的变形金刚)
type属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
select标签 下拉框
option标签 一个个选项
textarea标签 获取大段文本
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义