前端、

什么是前端

所有与用户打交道的都可以称之为前端，能够直接使用肉眼直接看到的都是前端

　　eg：PC端页面、手机端页面、平板页面、车载显示器等等

什么是后端

不直接与用户打交道的都可以称之为后端，后端其实就是幕后操作者

　　eg：Python语言、Java、Go、PHP等等

在招聘网上常见的岗位描述

　　Python后端工程师、Java后端工程师、PHP后端工程师、前端工程师

　　Python全栈工程师、Java全栈工程师等等

常见招聘网站;

　　Boss直聘、智联、51等，IT行业一般用Boss直聘

为什么要学前端

　　只学习Python肯定是不够的，需要配合一下其他知识，学习完前端后，就可以找Python全栈工程师，而不只是Python后端工程师。

　　前端对于后端来说要求并不高，只要你能够写一下简单的页面和看得懂别人写的前端代码，能够调试一些基础页面即可

前端需要学习内容

　　HTML：一个网站骨架，没有任何样式

　　css：给网页添加样式、目的是让其更加美观、漂亮好看

　　JavaScript：让网页动起来，简称JS

前端框架

　　jQuery、bootstrap、vue、react、angluar等

软件开发架构

前端的学习只需要一个浏览器即可，前端的代码是有浏览器开解释的

　　1.c/s架构

　　2.b/s架构

前端代码写在哪里

　　前端代码需要写在文件里面

辅助工具

　　1.直接写在文本中.txt

　　2.vscode、pycharm、notepad++、sublime等等

在浏览器中输入网站、回车、到页面渲染成功、所发生的事

　　1.客户端想服务端发起请求

　　2.服务端接收客户端的请求

　　3.服务端整理好客户端要的数据返回

　　4.把数据返回给前端，前端按照一定的规则把后端返回的数据展示给用户

浏览器如何识别服务端

　　服务器必须遵守http协议，这个是由浏览器来规定的，不遵守，数据没法识别

http协议

超文本传输协议

　　作用：规定服务端和客户端之间的数据传输格式

http协议的四大特性

　　1.是基于请求和响应的，客户端主动发起请求、服务端向客户端返回

　　2.基于tcp/ip协议之上的应用协议

　　3.无状态：不能保存用户信息，后面诞生许多保存用户信息技术，cookie、session、token

　　4.短连接/长连接

　　　　短连接：当服务端和客户端要想传输数据就必须建立连接，正常情况，二者成功发送一次消息就断开连接

　　　　长连接：二者成功发送一次消息之后，不会立马断开连接，而是中间会隔一段时间，如果双方都没有再次发送消息，就断开

　　　　场景：客服系统

客户端向服务端发起请求会携带一些数据‘称之为请求数据

http协议的请求数据格式

　　请求首行（请求发方式、协议/版本号）

　　请求头

　　\R\N

　　请求体（不是什么请求方式都有的，get请求方式没有）

HTTP协议的响应数据格式
　　响应首行(响应状态码)
　　响应头
　　\r\n
　　响应体

响应状态码：

　　1xx: 了解，服务端接收数据成功，客户端还可以继续提交

　　2xx：掌握，200，代表的是响应成功
　　3xx: 301, 302，代表的是重定向，代码内部帮助我们跳转到了指定页面
　　4xx：404，资源不存在，找不到，not found，制作404定制页面
　　5xx：500，服务器内部错误

请求方式（重要）

请求方式：
GET
　　朝服务端要数据的时候，一般都是使用GET请求方式
　　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　　
　　协议：// 域名/后缀/?参数
　　协议：// 域名/后缀/?k=v&k1=v1&k2=v2...
　　URL: 统一资源定位符(网址)
　　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

POST:
　　朝服务端提交数据逇时候，一般使用POST请求方式
　　例子：百度的登录功能，把用户名和密码提交到百度的后端做验证.用的就是POST请求

面试题：聊聊GET请求和POST请求的区别

　　1. get请求方式数据不够安全，POST请求数据更加安全
　　2. GET请求方式没有请求体，而POST请求有请求体
　　3. GET请求能够携带的数据量没有POST请求携带的多
　　　　GET请求一般携带4KB的大小
　　　　POST请求基本上没有限制

在前端中，最难的就是浏览器兼容性问题：同样的代码在不同的浏览器中展示的效果不一样
谷歌浏览器的兼容性是最强的，另外一点就是它非常好用的，调试代码方便等

HTML介绍：如果你想让你的网页在浏览器中正常显示，你就必须遵循HTML标签

<h1>helloworldaaa</h1>
<a href='http://www.baidu.com'>click me</a>
<img src='https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689699600&t=6840fd4bcbd7f1c87dd657700e7010db'>

以上这些标签就是HTML标签
　　h1
　　a
　　img
HTML中标签的名字不能改只能这样写

HTML如何书写

HTML文件的后缀名是.html
1. 书写位置
　　文件中
　　浏览器中
　　各种工具中
2. 如何打开一个html文件
　　只需要使用浏览器打开文件即可，前端的代码就是浏览器来识别的

HTML文档介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

head标签一般写的不是让用户看的
body标签一般写什么内容，浏览器中就能够看到什么内容，给用户看的
主要就是学这两个标签的

head标签的使用

常用标签
　　<title>你看我在哪里显示</title> # 标签顶部显示的内容
　　<link rel="stylesheet" href="css/my.css"> # 引入外部CSS

　　在pycharm中注释符号的快捷键是：ctrl + ?

你在浏览器中想看到什么就在body标签中写

基本标签
　　<b>加粗</b>
　　<i>斜体</i>
　　<u>下划线</u>
　　<s>删除</s>

<br>

<hr>

标签的分类

分类一：

　　块儿级元素
　　　　独占一行，不管自身有多大，他自己就占一行
　　　　　　h1标题标签都是
　　　　　　p标签
　　　　　　hr标签

　　行内元素(内联元素)
　　　　自身文本有多大就占多大，不会独占一行
　　　　　　<b>加粗</b>
　　　　　　<i>斜体</i>
　　　　　　<u>下划线</u>
　　　　　　<s>删除</s>

分类二：

　　双标签
　　　　<b>加粗</b>
　　　　<i>斜体</i>
　　　　<u>下划线</u>
　　　　<s>删除</s>
　　　　h1标题标签都是
　　　　p标签

　　单标签
　　　　hr标签
　　　　br
　　　　img
　　　　a

特殊字符（实体符号）

div标签和span标签

span

div
　　这两个标签没有实际的意义，一般用来'布局'使用

div

　　它是块儿级元素，给页面占布局
span

　　标签是行内元素，用来给文本内容占布局

标签的嵌套

我们使用亲戚关系来表示标签之间的关系
　　<div> div标签是p标签的父标签
　　　　<p> p标签是div标签的儿子，是span标签的父标签
　　　　　　<span></span> span标签是p的儿子，是div的孙子
　　　　</p>
<p></p> # p标签是div标签的儿子，是p标签的兄弟，也是span的兄弟标签

注释事项:
块级儿级元素能够嵌套所有的行内元素，块儿级元素也能够嵌套所有的块儿级元素，但是出了p标签之外
行内元素不能够嵌套块儿级元素，但是可以嵌套所有的行内元素

前端里面一般不会轻易的报错!!!!!!!!，你写的代码不正确不规范，没有效果而已，但是不会报错.
前端是跟用户打交道的，不能随随便便的报错，要不然体验很差