Front-end_1_前端介绍

全栈工程师：前端+后端

1、前端和后端

什么是前端？

任何与用户直接打交道的操作节目都可以称之为前端

eg: 电脑界面手机界面平板界面

什么是后端？

后端类似幕后操作者，不直接跟用户打交道的代码

2、前端学习历程

1.HTML CSS JavaScript 类似Python基本语法

2.Bootstrap JQuery Vue 前端框架

前端框架

所有的页面和样式都写好了，基础知识点复制粘贴就好

3.自我深化

HTML：内容 网页骨架
CSS：外观 样式
JS： 动作 控制网页的动态效果前端框架：BootStrap、JQuery、Vue提前给你封装号了很多操作，你只需要按照固定的语法调用即可

3、软件开发架构

CS 客户端 服务端
BS 浏览器 服务端
BS本质也是CS架构

浏览器窗口输入网址回车发生了几件事

"""
1 浏览器朝服务端发送请求
2 服务端接收请求
3 服务端返回相应的响应
4 浏览器接收响应 根据特定的规则渲染页面 展示给用户看
"""
浏览器可以充当很多服务端的客户端百度 腾讯视频 优酷视频......如何做到浏览器能够跟多个不同的客户端之间进行数据交互？1.浏览器很牛逼 能够自动识别不同服务端做不同处理（无法实现）2.指定一个统一标准 如果你想要让你写的服务端能够跟客户端之间         做正常的数据交互 那么你就必须要遵循一些规则->HTTP协议

HTTP协议（***）

HTTP协议-超文本传输协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
该协议你可以不遵循 自己编写客户端 用户想要使用 就下载你的应用程序
"""

"""
HTTP
# 四大特性1.基于请求响应2.基于TCP/IP 作用于应用层之上的协议3.无状态不保存用户的信息eg:始终保持初心，一个人来了一千次 记不住 每次当他如初见->无状态由于HTTP协议是无状态的，所以后续出现一些专门用来记录用户状态的技术cookie、session、token4.无连接/短链接请求来一次我响应一次 之后我们两个之间没有任何链接和关系补充：长连接：双方建立链接之后默认不断开（应用层上的协议）-websocket，基于websocket可以做聊天室
"""出现两个格式
# 请求数据格式1.请求首行：（标识HTTP协议版本,当前请求方式）2.请求头：（一大堆k,v键值对）3.\r\n（这里的\r\n千万不能省略）（******）4.请求体：（并不是所有的请求方式都有，没有get 有post，存放的是post请求提交的敏感数据）请求首行包含三个内容 method + request-URI + http-version 如 GET /icwork/? Search = product HTTP/1.1method 包含有 post , get, head,delete, put, connect, options, patch, propfind, propatch, mkcol, copy, move, lock, unlock, trace, headeg:
1 GET/sample.jspHTTP/1.1 # 请求首行
2 Accept:image/gif.image/jpeg,*/* # 请求头
3 Accept-Language:zh-cn
4 Connection:Keep-Alive
5 Host:localhost
6 User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
7 Accept-Encoding:gzip,deflate
8  # \r\rn
9 username=jinqiao&password=1234 请求体
# 响应数据格式1.响应首行：（标识HTTP协议版本,响应状态码）2.响应头：（一大堆k,v键值对）3.\r\n（这里的\r\n千万不能省略）（******）4.响应体：（并不是所有的请求方式都有，get没有 post有，存放的是post请求提交的敏感数据）# 请求方式
两种
1.get请求朝服务端要数据eg:输入网址获得对应内容
2.post请求朝服务端提交数据eg:用户登录 输入用户名和密码之后 提交到服务端后端做身份校验浏览器：页面-右键-检查进入开发者模式 Network：网络请求/网络状态
左上角 clear 按钮清除# 响应状态码用一串简单的数字来标识一些复杂的状态或者描述性信息eg:404：请求资源不存在1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据2XX:服务端成功响应了你想要的数据（200 ok请求成功）3XX:重定向（当你在访问一个需要登陆之后才能看的页面 你会发现自动跳转到登陆页面）内部分为永久定向和临时定向4XX:请求错误403：当前请求不合法或者不符合访问资源的条件404：请求资源不存在5XX:服务器内部错误500 server error机房着火，代码Bug。# URL
统一资源定位符=网址

First.py

import socketserver = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)"""
b'GET / HTTP/1.1\r\n # 请求首行
Host: 127.0.0.1:8080\r\n # 请求头
Connection: keep-alive\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/85.0.4183.83 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-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
请求体
'
"""
while True:conn, addr = server.accept()data = conn.recv(1024)print(data)# 构造出符合HTTP协议格式的数据conn.send(b'HTTP/1.1 200 OK\r\n\r\n')# 传输代码# conn.send(b'<h1>hello baby~</h>')# 传输文本with open('test.txt', 'rb')as f:conn.send(f.read())conn.close()

4、HTML代码

超文本标记语言

浏览器渲染页面

所有网站内部都是HTML代码

test.txt

<h1>hello big baby~</h1>
<a href="http://www.lvyang.club/">blog</a>

HTML就是网页的一套标准

Front-end_1_前端介绍相关推荐

猿来小课web前端介绍html语言基础学习
HTML是一种超文本标记语言,属于互联网开发技术里面的前端开发技术.同时也是计算机和你所访问的Web站点的沟通语言.当你访问Web服务器所寄存的站点并与其交互时,Web服务器会接收到来自你的浏览器的请 ...
guns系统前端介绍
guns系统前端介绍前端项目结构 guns-base-support/guns-sys/src/main/webapp 扩展插件以及全局js文件全局html模板 guns-vip-main/src ...
web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
php前端介绍,Web前端的开发前景介绍
"路漫漫其修远兮,吾将上下而求索",这句出自<离骚>. 虽然端午已过,但是还是不影响一个程序员想表(zhuang)达(boy)自己此刻心情的冲动. 偶然路过同事旁边,不 ...
前端介绍(前端的发展史)
一.前端的演变 1.web1.0时代的网页制作网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮 ...
前端介绍----html基础和css的认识
web前端编程的一个方向 1000种只有一种能做网页程序 -> 软件(外卖) -> 提供服务(外卖点餐) -> 给用户一个操作的平台(下载的app)-> 注册账号(身份) ...
1.01.10前端介绍
一.起步 1. 什么是web开发 Web开发其实就是Web应用开发在 PC(Personal Computer,个人计算机)刚兴起的年代,软件主要使用 C/S 架构(Client/Server,客户 ...
微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案
什么是微前端微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后再将这些微应用进行组合使其成为整体应用的架构模式. 微前端架构类似于组件架构,但不同的是,组件不能独立 ...
Python-Web之前端基础介绍(上)
一.Web前端介绍一.什么是网页网页是基于浏览器的应用程序,是数据展示的载体. 二.网页的组成浏览器代替用户向服务器发请求接收并解析数据展示给用户服务器存储数据处理并响应请求协议规 ...

Front-end_1_前端介绍

Front-end_1_前端介绍

1、前端和后端

2、前端学习历程

3、软件开发架构

HTTP协议（***）

4、HTML代码

Front-end_1_前端介绍相关推荐

最新文章

热门文章