10.27 知识总结(前端)

一、 前端

1.1 什么是前端?

前端是所有跟用户直接打交道的都可以称之为是前端

比如:PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容

通俗点就是能够用肉眼看到的都是"前端"

1.2 为什么要学前端

学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等)

咱们学前端不会学的太深入,能够写一些简单的页面,以及会调试别人写的页面和能够看懂一些别人的页面代码。

1.3 前端学习哪些内容

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

  2. CSS 对网页骨架的美化、让网页变得更加的好看而已

  3. JavaScript # html、css都是不能动的,静态的,js就是让网页能够动起来,变得更加的美观

  4. bootstrap、jQuery

称为是前端的三剑客!

学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js

1.4 网址栏中输入地址回车,到看到页面的返回,整个过程发生了什么事?

  1. 客户端输入网址向服务端发起请求

  2. 服务端收到客户端的请求,处理请求

  3. 服务端要给客户端做出响应

  4. 把服务端返回的内容渲染(显示)到浏览器页面中

我们学习前端谁来翻译前端的代码? 浏览器(就是前端代码的执行环境)

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

浏览器就是一个万能的客户端,超级客户端,言外之意,他可以作为很多服务端的客户端

比如:淘宝、腾讯视频、京东、等

"""我们自己能不能开发一个B/S架构的软件,能."""

开发一个服务端即可,浏览器已经存在了,让浏览器作为我们的客户端,你会写服务端吗?

利用socket写一个服务端,让浏览器作为我们的客户端

你说浏览器它是很多服务端的客户端,问题是:浏览器是怎么识别是哪个服务端的?

很多服务端必须都要遵循浏览器的规则,所以,浏览器才能够正常的识别他们(数据传出的规则)

这个规则是:协议(HTTP协议)

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

HTTP协议:最上层:应用层

TCP/UDP: 传输层

ip协议: 网络层

二、HTTP协议

2.1 HTTP协议的四大特性

  1. 基于请求和响应的(有请求,有响应)

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

  3. 无状态

就是这个协议它不能够在浏览器中保存数据,现在使用的:淘宝、支付宝、京东等这些网站都需要登录

cookie、session、token、jwt等保存的,他们才是真正的保存用户数据的

  1. 短链接

2.2 请求数据

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

请求头(一大堆的k:v的键值对)

换行符(\r\n)

2.3 响应数据

响应首行(响应状态码)

响应头(一大堆的k:v的键值对)

换行符(\r\n)

2.4 请求方式

get

"""当朝服务端索要数据的时候,一般使用get请求方式"""

https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?spm=a21bo.jianhua.201867-main.1.5af92a89NWpkvM\&wh_pid=dailyAct-257518

https://huodong.taobao.com/index/v1/?k=v\&k1=v1\&k2=v2

https://huodong.taobao.com/func

def index()

需要参数?

def func()

post

"""当朝服务端提交数据的时候,一般采用post请求"""

post请求,参数在哪里传递?

面试题: get和post的区别?

  1. get:

索要数据的时候使用

传参方式:在网址栏的问号后面:key=value的键值对方式

数据传递不安全

数据传递的时候,携带的数据量是有限制的,大概4KB左右的数据

2.post:

提交数据的时候使用

在请求体里面

数据传递更加安全

数据传递没有限制,想传多少传多少

2.5 响应状态码

1xx: 代表的是请求数据成功,但是这个时候还可以继续往服务端提交数据

2xx: 200 OK 代表的是请求成功

3xx:301 302 代表的是重定向

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

5xx:500 502 服务器内部错误(出现网页打不开的情况)

三、 HTML介绍

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

<h1>hello python</h1>

<h5>hello python</h5>

<a href='http://baidu.com'>click me</a>

<img src=''>

3.1 在哪写

  1. pycharm

  2. 直接在浏览器中写

  3. 直接在txt文本也可以

  4. vscode

3.2 html文档介绍

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

<body> 标签才是用户看的,在body里面写什么,浏览器就显示什么,head里面写的代码是对body中的代码做控制

例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

</body>

</html>

3.3 如何打开一个html文档

  1. 直接点击pycahrm右上角的浏览器图标

  2. 直接找到文档所在的位置,右键选择使用浏览器打开即可

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

3.4 head标签中常用的标签

<title>Title</title> 就是浏览器标签页上显示的内容

<title>Title</title>

<!-- <style>-->

<!-- /*写css样式的*/-->

<!-- a {-->

<!-- color: red;-->

<!-- }-->

<!-- </style>-->

<link rel="stylesheet" href="my.css">

<!-- <script>-->

<!-- alert(123)-->

<!-- </script>-->

<script src="my.js"></script>

3.5 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;

相关推荐
长天一色7 分钟前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_23425 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河27 分钟前
CSS总结
前端·css
BigYe程普1 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai1 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默1 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_857297912 小时前
招联金融2025校招内推
java·前端·算法·金融·求职招聘
茶卡盐佑星_2 小时前
meta标签作用/SEO优化
前端·javascript·html