前端
前端：就是所以和用户打交道的界面都可以称之为是前端。
比如：PC端页面、手机端页面、平板页面、车载显示器等
前端学习的内容
1. HTML：搭建网页的骨架，没有样式
2. CSS：就是给网页添加样式，让网页更加好看、美观。
3. JavaScript：就是让网页动起来，简称js
前端框架：
jQuery、bootstrap、Vue（中国的）、react、angluar等
软件开发架构
cs架构:client-------->server
bs架构:browser------->server
前端其实就是bs端，页面就在浏览器中显示。'''我们学习前端只需要有浏览器即可，翻译前端代码的是浏览器'''
在浏览器中写的前端代码不能够永久生效，只能临时看到效果，刷新页面就消失。所以我们写前端代码依然是需要写在文件里的。
辅助写前端的工具：
1. 可以直接写在文本中.txt
2. vscode、pycharm、notepad++、sublime等
建议使用浏览器是：谷歌浏览器（兼容性是最好的）------->前端最难的就是解决兼容性问题。
在浏览器中输入一个网址，到返回浏览器，渲染成页面的过程：
1. 浏览器（客户端）向服务端发起请求
2. 服务端接受请求
3. 服务端开始处理请求，并返回数据
4. 数据返回给了浏览器，浏览器按照一定的规则把后端返回的数据，展示给用户
浏览器就是万能的客户端，可以充当很多服务端的客户端，所以，浏览器有了，就相当于客户端有了，就能够通过socket写一个服务端。
浏览器通过HTTP协议来识别不同的服务端。
HTTP协议
HTTP：超文本传输协议。作用：就是规定了服务端和浏览器之间的数据传输格式。
四大特点：
1. 基于请求响应：浏览器（客户端）发起请求 -------->服务端做出响应
2. 基于TCP/IP协议之上的应用层协议 （HTTP协议是基于TCP协议写出来的）
3. 无状态：不保存用户信息。
能保存用户信息的技术有：cookie、session、token
4. 短连接/无连接：当服务端和客户端想要传输数据就必须建立连接，正常情况，二者成功发送一次消息就断开连接。
# 长连接：二者成功发送一次消息之后，不会立马断开，中间会间隔一段时间，如果双方都没有再次发送消息，就断开。
场景： '''客服系统------->长链接'''
客户端向服务端发起请求会携带一些数据，就称之为是请求数据。
请求数据模式：
1. 请求首行（HTTP协议的版本号，当前请求方式）
2. 请求头（一堆k:v键值对）
3. \r\n（一定不能省略！！！）
4. 请求体（不是所有的请求方式都有，get没有，post有，存放的是post请求提交的敏感数据）
响应数据格式：
1.响应首行（HTTP协议版本号，响应状态码）
2. 响应头（一大堆k:v键值对）
3. \r\n
4.响应体（返回给浏览器展示给用户看的数据）
响应状态码
就是通过用一串简单的数字代码来表示一些复杂的状态或者描述性信息 （404：请求包资源不存在）
1XX：服务端接受到消息正在处理（了解）
2XX：代表请求成功（200 OK）
3XX：重定向（向直接进入到A页面，但是内部自动跳转了B页面）
4XX：请求错误
404：请求资源不存在
403：没有权限
5XX：500 服务器内部错误
补充：请求方式（重要）
1. GET：朝服务端要数据
eg: 在网址栏里输入baidu.com
'''没有请求体，数据放在哪里了？跟在了网址的后面'''
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=49055317_42_hao_pg&wd=%E7%BE%8E%E5%A5%B3
协议：// 域名/后缀/?参数（参数中间用&区分开）
2. POST：朝服务端提交数据
eg：你在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证。
面试题：聊聊GET请求和POST请求的区别
1. GET请求方式数据不够安全，POST请求方式数据更加安全
2.GET请求方式没有请求体，POST请求方式有请求体
3. GET请求能够携带的数据量没有POST请求携带的多
GET请求一般携带4KB的大小，而POST请求基本上没有限制
HTML简介
如果想让浏览器识别到网站，就必须遵循HTML语法。
我们浏览器看到的页面，内部其实都是HTML代码。
<h1>hello big big baby!</h1> <a href='http://www.taobao.com'>click me</a> <img src='https://img2.baidu.com/it/u=1574304958,174721775&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto，sec=1681318800&t=7025b504ad317f14cb6a313a7b20d50b'>
像h1、a、img 这些标签就是HTML标签，HTML的标签名字不能改正。
创建HTML文件的方式
在pycharm中新建HTML文件，html文件的后缀名是：.html
HTML文档介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
解释：
<head>
<meta charset="UTF-8"> # 指定字符编码的
<title>Title</title>
</head> # head标签内写的东西不是让用户看的
<body></body> # body标签内写的东西都是让用户看的，在body中写什么，浏览器中就能看到什么
打开html的方式
1. 打开文件所在的位置，使用浏览器打开
2. 在pycharm中打开
head标签的使用
常用标签：
< <title>你看我在哪里显示</title> # 标签顶部显示的内容 <link rel="stylesheet" href="css/my.css"> # 引入外部CSS
在pycharm中注释符号的快捷键：Ctrl + ?
标签的分类
1.双标签
<h1></h1>
<a></a>
2. 单标签
<img />
head标签内常用标签
# <style></style> 只需要写出每个标签的前几个字母或者写标签的起始。Tab补全 <style> /*style里面一般写css样式*/ h1 { color：red; } </style> <script> // 写js代码 alert(123)< /script> <link rel="stylesheet" href="mycss.css"> # 引入外部CSS文件,href= 后面写的是css文件的路径 <script src="myjs.js"></script> # 引入外部js文件，src=后面写的是js文件的路径， <link rel="stylesheet" href="../../mycss.css"> # 上一层目录：..
<script src="../../myjs.js"> </script>
body中常用标签
基本标签：
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行--><br>
<!--水平线--><hr>
标签分类1
1. 块儿级标签
独占一行，不管自身有多大就占一行（h1标题标签都是，p标签，hr标签）
2. 行内元素（内联元素）
自身文本有多大就占多大，不会独占一行
<b>加粗</b>、 <i>斜体</i>、<u>下划线</u>、 <s>删除</s>
标签的分类2
1.双标签
<b>加粗</b>、 <i>斜体</i>、<u>下划线</u>、 <s>删除</s>、h1标题标签都是、p标签、a标签
2. 单标签
hr标签、br标签、img
特殊字符（实体符号）
内容 对应代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
div标签和span标签
div、span这两个标签没有实际的意义，一般都是用来‘布局’使用的
div：块儿级元素，给页面占布局
span：是行内元素，用来给文本内容占布局。
标签的嵌套
我们使用亲戚关系来表示标签之间的关系
<div> # div标签是p标签的父标签 <p> # p标签是div标签的儿子，是span标签的父标签 <span></sapn> # span标签是p标签的儿子，是div的孙子 </p> <p></p> # p标签是div标签的儿子，是上面p标签的兄弟，也是下面span的兄弟标签 <span></span> </div>
注意事项：
块儿级元素能够嵌套所以的行内元素，块儿级元素也能够嵌套所有的块儿级元素，但是除了p标签。
行内元素不能嵌套块儿级元素，但能嵌套所有的行内元素。