Python基础day46

什么是前端

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

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

什么是后端用户打交道的都可以称之为是后端，后端其实就是幕后操作者

eg：Python语言、Java、Go、C、C++、PHP等都是常见的后端语言

在招聘网站上常见的岗位描述：Python后端工程师、Java后端工程师、Go工程师、前端工程师等
Python全栈工程师、Java全栈工程师等

常见的招聘网站: Boss直聘、智联、拉钩、51等，互联网人一般都使用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. 把数据返回给前端------>浏览器中，按照一定的规则把后端返回的数据展示给用户

如果我们写一个服务端，让浏览器充当我的客户端，我也可以写出一个基于浏览器的项目

目前我们缺的就是服务器，很显然我们可以通过socket写出来一个服务端

言外之意：浏览器是可以充当很多服务端的客户端的

1. 可以充当百度的客户端

2.京东的

3. 腾讯视频的

...

那么浏览器是如何识别是那个服务端的呢？

　　所有的服务端必须遵循一个原则，这个原则就是浏览器来规定的，如果不遵循这个规则，那么你的数据就没办法识别，这个规则就是HTTP协议

如果你的服务端返回的数据想被浏览器识别，你就必须遵循HTTP协议

HTTP协议

超文本传输协议，作用：就是规定了服务端和客户端之间的数据传输格式

HTTP协议的四大特性

1. 是基于请求和响应的

　　请求：客户端主动向服务端发起请求

　　响应：服务端向客户端返回

2. 它是基于TCP/IP协议之上的应用层协议

　　HTTP协议它是基于TCP写一些出来的

3. 无状态

　　就是他不能够保存用户的信息

　　背景：早期的网站用户是不需要登录的，比如新闻类的、博客类的网站是不需要登录的，也就不需要保存用户的消息。随着技术的发展，诞生了像支付宝、京东网站等网站，就需要用户登录了，由于HTTP协议压根就不能保存用户信息，所以就诞生了一些保存用户信息的技术：cookie、session、token

4. 短连接/无连接

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

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

　　场景：客服系统（逻辑很复杂）

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

HTTP的请求数据格式

常用的版本号就是 http1.x 版本，新版本应该是 http2.x

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

　　请求头

　　\r\n

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

HTTP协议的响应数据格式

　　响应首行（响应状态码）

　　响应头

　　\r\n

　　响应体

响应状态码

　　简单描述就是使用一个简单的数字代表一段复杂的描述性信息

　　1xx: 了解，服务端接收数据成功，客户端还可以继续提交
　　2xx：掌握，200，代表的是响应成功
　　3xx: 301, 302，代表的是重定向，代码内部帮助我们跳转到了指定页面
　　4xx：404，资源不存在，找不到，not found，制作404定制页面
　　5xx：500，服务器内部错误

如果你想深入了解HTTP协议，推荐看图解HTTP，图解TCP

请求方式

　　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请求基本上没有限制

ps：记住：学前端，以后就是有谷歌浏览器，默认浏览器：360,qq,ie(必须不能用)。在前

端中，最难的就是浏览器兼容性问题：同样的代码在不同的浏览器中展示的效果不一样

谷歌浏览器的兼容性是最强的，另外一点就是它非常好用的，调试代码方便等

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>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

标签的分类1

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


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

标签的分类2

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

单标签
hr标签
br
img

特殊字符(实体符号)

内容    对应代码
空格    &nbsp;
>     &gt;
<     &lt;
&     &amp;
¥     &yen;
版权    &copy;
注册    &reg;

div标签和span标签

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

div它是块儿级元素，给页面占布局
span标签是行内元素，用来给文本内容占布局

标签的嵌套

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

<span></span>    
</div>

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

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

posted @ 2023-07-17 16:12 吼尼尼痛阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

人在园子，刚开电脑