当前位置：首页 > article >正文

第44天:前端及html、Http协议

article 2024/9/20 9:29:10

前端

前端是所有跟用户直接打交道的都可以称之为是前端，比如：PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容。

前端的用处：

学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等),能够写一些简单的页面，以及会调试别人写的页面和能够看懂一些别人的页面代码。

前段的大概内容：

        1. HTML：网页的骨架、只是负责显示一些内容，但是显示出来的内容不好看，没样式
        2. CSS：对网页骨架的美化、让网页变得更加的好看而已
        3. JavaScript：html、css都是不能动的，静态的，js就是让网页能够动起来，变得更加的美观

与前端配套的框架：

bootstrap、jQuery、vue、react、angular.js

页面返回时的原理：

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

Http协议

HTTP协议的四大特性：

        1. 基于请求和响应的(有请求，有响应)
        2. 它是基于TCP协议之上的应用层协议
        3. 无状态：这个协议它不能够在浏览器中保存数据，要在cookie、session、token、jwt等保存的
        4. 短链接

请求数据：

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

响应数据：

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

请求方式:

get:当朝服务端索要数据的时候，一般使用get请求
post:当朝服务端提交数据的时候，一般采用post请求

get和post的区别：

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

响应状态码：

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

html介绍

在网页中所能够看到的花里胡哨的东西都是HTML标签。

html文档模板:

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

</body>
</html>

<head> 
<body>

如何写前端代码:

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

打开一个html文档的方式:

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

head中常用的标签:

        <title>Title</title> 就是浏览器标签页上显示的内容
        <style></style>写css样式的
         <link>
        <script></script>

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>水平线

特殊字符：