前端的基本介绍

m0_69962105

于 2023-10-27 16:15:39 发布

阅读量139

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_69962105/article/details/134076662

版权

一、前端和后端的简述

前端：直接和用户打交道的，如和网页的页面

后端：不直接和用户打交道的，一堆代码，用户不能直接看到

二、前端需要学习的内容

前端三剑客：

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

        2. CSS：对网页骨架的美化，让网页变得跟美观

        3. JavaScript：将HTML和CSS等静态的网页，变成动态的网页，让网页变得更美观

和前端配套的框架(库)：bootstrap、jQuery、vue、react、angular.js

三、网址栏中输入地址回车，到看到页面的返回，这个过程发生了什么事？

1. 客户端向服务端发生请求

2. 服务端收到客户端发送的请求，执行请求

3. 服务端向客户端响应

4. 客户端把服务端返回的内容渲染到浏览器页面上

四、浏览器

浏览器是前端翻译代码的，浏览器就是前端的解释器

浏览器就是一个万能的客户端，它可以作为很多服务端的客户端

浏览器是如何识别每个客户端的？

很多服务端都遵循浏览器的规则，也就是HTTP协议，这样浏览器才能正常的识别他们（传输数据的规则）， HTTP协议在应用层起作用

五、HTTP协议（重点）

1、HTTP协议的4大特性：

1. 它是基于请求和响应的

2. 他是基于TCP协议之上的应用层协议

3. 无状态

这个协议它不能在浏览器中保存数据，真正保存数据的是cookie、session等

4. 短连接

客户端向服务端发送请求，服务端响应后立马断开

2、请求数据结构和响应数据结构

响应数据结构

1. 响应首行(响应状态码)

2. 响应头(一大堆的k：v键值对)

3.

4. \r\n 换行符

请求数据结构

1. 请求首行(请求方式、协议和版本号)

2. 请求头(一大堆的k：v键值对)

3.

4. \r\n：换行符

3、请求方式：get、post

get

当向服务端索要数据的时候，用get请求方式

post

当向服务端提交数据时，用post请求方式

面试题：get和post的区别？

get：

1. get是向服务端索要数据

2. 传参方式：在网址栏上的？后面，以k：v键值对的方式

3. 数据传递不安全

4. 数据传递，携带的数据量有限制，大约4KB左右

post：

1. post是向服务端提交数据

2. 参数传递在请求体里面

3. 数据传递安全

4. 数据传递没有限制

4、响应状态码

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

1xx：代表的是数据请求成功，但是这个时候还是可以向服务端提交数据

2xx：200 ok 表示请求成功

3xx：301,302 代表重定向

4xx：404 Not Found 代表的是资源找不到

5xx：500 502 服务器内部出现错误（网页打不开的情况）

面试题：说出常见的响应状态码

六、html文件介绍

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

</body>
</html>


'''
<head></head>：标签里面写的内容一般不是让用户看的是让程序员看的

<body></body>：标签才是给用户看的，body标签内写的内容，在浏览器中就会显示什么内容，head里面写的代        码是对body里面的代码做控制
'''

1、如何在浏览器中打开一个html文件

1. 在pycharm中写html代码，写完后点击pycharm右上角的浏览器

2. 找到html文件的位置，选择浏览器打开

为什么要用浏览器打开？

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

2、head标签中常用的标签

1、<style>写的是css样式的</style> 或者在创建一个css文件，在css文件中写好css代码，然后使用<link>标签来使用css文件中的代码，<link rel="stylesheet" href="my.css">

2. <script>写的是js样式的</script> 或者在创建一个js文件，在html文件中使用<script src="js文件名"></script> 来使用js文件中的代码

3、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；