前端简介

 

1. 什么是前端

任何与用户直接打交道的操作界面都可以称之为前端，如：电脑界面， 手机界面，平板界面

 

补充，什么是后端

后端类似与幕后操作者（即一堆用户看不见的代码），不直接更用户打交道

2. 前端学习历程

HTML：网页的骨架吗，没有任何的样式

CSS：给骨架添加 各种样式，使它变得好看

JavaScript：控制网页的动态效果

前端框架：Bootstrip，JQuery，Vue

​ 提前封装好的操作，只需要按照固定的语法调用即可。

3. 软件开发架构

cs    客户端 服务端
bs    浏览器 服务器
ps:bs本质也是cs

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

复制代码
'''
1 浏览器朝服务端发送请求
2 服务端接受请求（eg：请求百度首页）
3 服务端返回相应的响应（eg：返回一个百度首页）
4 浏览器接受响应 根据特定的规则渲染页面展示给用户看
'''

浏览器可以充当很多服务短的客户端
    百度 腾讯视频 优酷视频。。。
复制代码

4.1.浏览器如何识别不同的服务端

1.浏览器很牛逼 能够自动识别不同服务端做不同处理
2.制定一个统一的标准，如果想要让你写的服务端能够跟客户端之间做正常的数据交互，那么你就必须遵循一些规则，http协议

5. HTTP协议

HTTP协议：超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式

该协议你可以不遵循，但是你写的服务端就不能被浏览器正常访问，如果不遵循此协议，可以自己写客户端，用户想要使用，就下载专门的app即可

5.1. HTTP四大特性

1.基于请求响应

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

3.无状态：不保存用户的信息

​ eg：一个人来了一千次，你都记不住，每次都当他如初见

由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术（cookie，session，token）

4.无/短链接

​ 请求来一次我响应一次，之后我们两个就没有任何链接和关系了

长链接：双方建立链接之后默认不断开，websocket

场景：即时通讯

5.2. 请求数据格式

01 请求首行（标识HTTP协议版本，当请求方式）

# 请求方式
1.  get请求(朝服务端要数据)
    get请求参数在地址栏中
   eg：输入网址取对应的内容

2. post请求(朝服务端提交数据)
    post跟安全
   eg：用户登录，输入用户名和密码之后，提交到服务端后端做身份校验

02 请求头（一大推k，v键值对）

03 \r\n(一定不能少)

04 请求体（并不是所有的请求方式都有请求体，get没有post有，存放的是post请求提交的敏感数据）

5.3. 相应数据格式

01 响应首行（标识HTTP协议版本，响应状态码）

复制代码
# 相应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息 如：404：请求失败
1xx:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据（200 ok请求成功）
3xx:重定向（当你在访问一个需要登录之后才能看的页面，你会发现自动跳转到登录页面）
4xx:请求错误
    404：请求资源不存在
    403：当前请求不合法或者不符合访问资源的条件
5xx:500 服务其内部错误
复制代码

02 响应头（一大堆k，v键值对）

03 \r\n(一定不能少)

04 响应体（返回给浏览器展示给用户看的数据）

补充：

​ url：统一资源定位符（网址）

HTML简介

超文本标记语言，HTML就是书写网页的一套标准

如果你想要让里浏览器能够渲染出你写的页面，你就必须遵循HTML语法，

我们浏览器看到的页面，内部其实就是HTML代码（所有的网站内部都是HTML代码）

复制代码
# 注释：注释代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
多行注释4
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
<!--导航条结束-->
<!--导航条结束-->
<!--左菜单栏开始-->
左侧菜单栏的HTML代码
<!--左菜单栏结束-->
复制代码

HTML文档结构

<html>
    <head></head>:head内的标签不是给用户看的，而是定一些配置主要是给浏览器看的
    <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

ps:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

注意：HTML代码没有格式，可以全部写在一行，只不过我们习惯的用缩进来表示代码

posted @   shangxin_bai  阅读(848)  评论(0)  编辑  收藏  举报
相关博文：
· 前后端开发模式，restful规范，序列化与反序列化，cbv源码
· CSS介绍
· 1. 前端简单介绍
· HTML(前端web)
· 前端（一）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示