前端，HTTP协议，HTML介绍

最新推荐文章于 2024-07-10 16:57:46 发布

森木在花开

最新推荐文章于 2024-07-10 16:57:46 发布

阅读量427

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_38104453/article/details/134082780

版权

什么是前端

前端指的是网站或应用程序的用户界面层，涉及到在浏览器中展现的HTML、CSS和JavaScript等技术，以及与用户交互的各种组件和功能。

前端开发人员负责将设计师提供的设计图和交互原型转化为实际的网页或应用程序，使用户可以直接与其交互。前端开发人员需要具备HTML、CSS、JavaScript等相关基础知识，熟悉各种前端框架和工具，同时也需要对用户体验和交互设计有一定的了解。

什么是后端

后端是指在计算机系统中，负责处理数据存储、业务逻辑、安全性和性能等方面的程序和技术。它与前端相对应，前端负责用户交互和界面展示。后端通常包括服务器、数据库、应用程序、API 和其他基础设施。它们可以使用多种编程语言和技术来实现，例如Java、Python、PHP、Ruby、Node.js等。后端的主要目标是确保系统的稳定性、安全性和可伸缩性，并通过提供数据和服务支持前端的业务需求。

前端学习哪些内容

1. HTML 网页的骨架、只是负责显示一些内容，但是显示出来的内容不好看，没样式

2. CSS # 对网页骨架的美化、让网页变得更加的好看而已
3. JavaScript # html、css都是不能动的，静态的，js就是让网页能够动起来，变得更加的美观
4. bootstrap、jQuery

称为是前端的三剑客!
学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js

输入网址得到结果的中间过程

1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求，处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中

学习前端只需有一个浏览器即可，浏览器就是前端的解释器

浏览器是识别是区分服务端

很多服务端必须都要遵循浏览器的规则，所以，

浏览器才能够正常的识别他们(数据传出的规则)
这个规则是：协议(HTTP协议)

HTTP协议在那一层起的作用?

HTTP协议：最上层：应用层
TCP/UDP: 传输层
ip协议: 网络层

HTTP协议(重点)

HTTP协议（Hypertext Transfer Protocol）是一种用于传输数据的应用层协议，常用于传输HTML文件、图片、视频、音频等资源。

HTTP协议的四大特性

简单性：HTTP协议的设计简单明了，易于理解和实现。

无状态性：HTTP协议是一种无状态协议，服务器不会保存客户端的任何状态信息。每个请求都是独立的，服务器只根据每个请求所包含的信息来进行处理。

可扩展性：HTTP协议的标准化允许扩展新的请求方法，响应头部和状态码等。

连接性：HTTP协议采用请求-响应模型，每个请求都需要建立一个新的连接，请求完成后即关闭连接。这种方式既有助于减少服务器压力，又有助于保证信息安全性。

HTTP协议的工作流程

HTTP（超文本传输协议）是一种在Web上进行通信的协议。它的工作流程如下：

客户端（如浏览器）向服务器发送HTTP请求。请求中包含请求方法（GET、POST等）、请求URI（请求的资源路径）、请求头（包含一些额外信息）、请求体（POST请求时才有）等。

服务器收到请求后，根据请求URI找到相应的资源，并将资源返回给客户端。服务器的响应包含状态码、响应头和响应体。其中状态码表示服务器处理请求的结果，响应头包含一些额外信息，如响应时间、响应的数据类型等，响应体包含服务器返回的实际数据。

如果响应的资源包含其他资源（如图片、CSS等），客户端会再次向服务器发送请求获取这些资源，这个过程称为页面的渲染。

当客户端接收到所有资源后，浏览器会解析HTML、CSS、JavaScript等资源，并将页面渲染出来，呈现在屏幕上。

当客户端需要与服务器交互时，比如点击提交按钮提交表单数据，客户端会再次向服务器发送HTTP请求，并根据服务器的响应进行相应的处理。

整个过程中，HTTP协议起到了传输数据的作用，确保客户端和服务器之间的通信顺畅、稳定。

HTTP协议请求数据和响应过程

HTTP协议请求和响应的数据格式如下：

请求数据格式：

<请求方法> <请求URL> <协议版本>
<请求头部>
<请求正文>

请求首行(请求方式、协议和版本号)
请求头(一大堆的k:v的键值对)
    
换行符(\r\n)

响应数据格式：

<协议版本> <状态码> <状态描述>
<响应头部>
<响应正文>

响应首行(响应状态码)
响应头(一大堆的k:v的键值对)
    
换行符(\r\n)

其中，请求方法包括常见的GET、POST、PUT、DELETE等，请求URL是请求的资源地址，协议版本一般为HTTP/1.1或HTTP/2.0。

请求头部包含了客户端发送给服务器的附加信息，例如Accept、User-Agent等。请求正文是请求的实际内容，例如POST请求中发送的表单数据。

响应数据中，协议版本和状态码描述了请求的处理结果，状态码一般有200表示成功，404表示请求的资源不存在，500表示服务器内部错误等。响应头部包含了服务器发送给客户端的附加信息，例如Content-Type、Content-Length等。响应正文是响应的实际内容，例如返回的HTML、JSON等数据。

HTTP协议请求方式

HTTP协议定义了多种请求方法，常用的有：

GET：用于请求获取指定资源的信息，请求参数通过URL传递，请求体为空。
POST：用于向指定资源提交数据进行处理请求。POST请求通常会附带请求体，携带的信息不会在URL中显示。
PUT：用于请求更新指定资源，其请求体中包含所需更新的资源内容。
DELETE：用于请求删除指定的资源。
HEAD：类似于GET请求，但是只返回响应头信息，不返回实体的主体部分。
CONNECT：用于建立与资源的管道通信。
OPTIONS：用于描述指定资源的通信选项。
TRACE：用于执行一个消息环回测试，主要用于诊断。
PATCH：作用和PUT请求类似，但是只更新资源的局部内容。

面试题：get和post的区别?

1. get:
   索要数据的时候使用
传参方式：在网址栏的问号后面：key=value的键值对方式
数据传递不安全
数据传递的时候，携带的数据量是有限制的，大概4KB左右的数据
2.post：
   提交数据的时候使用
在请求体里面
数据传递更加安全
数据传递没有限制，想传多少传多少

响应状态码：

使用一个特殊的数字代表一串复杂的描述性信息

1xx: 代表的是请求数据成功，但是这个时候还可以继续往服务端提交数据
2xx: 200 OK 代表的是请求成功
3xx：301 302 代表的是重定向
4xx: 404 Not Found 代表的是资源找不到
5xx：500 502 服务器内部错误(出现网页打不开的情况)

面试题：请说出常见的响应状态码(1xx 2xx 3xx 301 201)

HTML介绍

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言，它由标签（tag）和文本组成。通过使用HTML，可以将文本、图像、音频、视频和其他类型的内容组合在一起以创建网页。

HTML最初是由Tim Berners-Lee于1991年在CERN（欧洲核子研究组织）发明的，它是Web技术的基础。HTML文件包含结构、样式和动态交互的元素，可以通过网页浏览器进行解析和呈现。

HTML标签用于定义网页的各种元素，例如标题、段落、图像、链接等。标签由左尖括号（<）和右尖括号（>）包围，例如：

<p>这是一个段落</p>

HTML还支持CSS（层叠样式表）和JavaScript等技术，这些技术帮助我们更好地控制网页的样式和交互行为。

总之，HTML是Web开发中必不可少的基础知识，它使我们能够创建美观、易于浏览和易于管理的网页。

学习前端，在哪里写前端代码

1. pycharm
2. 直接在浏览器中写
3. 直接在txt文本也可以
4. vscode

html文档介绍

HTML（Hypertext Markup Language）是一种标记语言，用于创建和呈现Web页面。 HTML文档由HTML标签和文本内容组成，标签用于描述文本内容的结构和特征。 HTML文档通常由以下几个部分组成：

DOCTYPE声明：告诉浏览器将要使用哪个HTML版本。
head标签：包含文档的元数据，如标题、描述、样式表和脚本等。
body标签：包含文档的主要内容，如文本、图像和链接等。
标题标签：用于定义文档标题。
段落标签：用于定义段落。
图像标签：用于插入图像。
链接标签：用于创建链接到其他文档或页面。
表格标签：用于创建表格。
表单标签：用于创建用户可以输入数据的表单。

通过使用这些标签，HTML文档可以按照预定的结构和样式来呈现页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
</head>
<body>

</body>
</html>

<head> 标签里面写的内容一般不是让用户看的，给程序员看的
<body> 标签才是用户看的，在body里面写什么，浏览器就显示什么，head里面写的代码是对body中的代码做控制

如何打开一个html文档

1. 直接点击pycahrm右上角的浏览器图标
2. 直接找到文档所在的位置，右键选择使用浏览器打开即可

浏览器就是前端的解释器，所有的前端代码都是有浏览器来翻译的

head标签中常用的标签

在head标签中常用的标签有：

title标签：定义文档标题，同时也是在浏览器标签页上显示的标题。

meta标签：提供有关网页的元数据（如页面描述、关键字、字符集等），对搜索引擎优化(SEO)有很大的作用。

link标签：链接外部CSS文件或icon图标。

style标签：在head中定义网页的样式表，用于定义网页元素的样式。

script标签：定义JavaScript脚本，可以在头部或尾部引入外部JavaScript文件或在页面内嵌入JavaScript代码。

base标签：定义页面上所有链接的默认URL和目标。

noscript标签：定义在浏览器不支持脚本的情况下的替代内容。

其他标签：还有一些其他的标签，如meta robots，用于搜索引擎优化，以及各种社交媒体标签等。

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>

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