首页 > 其他分享 >前端简介

前端简介

时间:2023-10-27 20:55:26浏览次数:26  
标签:浏览器 请求 简介 前端 标签 服务端 客户端

什么是前端

前端是所有跟用户直接打交道的都可以称之为是前端
比如:PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容
# 能够用肉眼看到的都是前端

什么是后端?
就是一堆代码,用户不能够直接看到,不直接与用户打交道的都是后端
常见的后端:Python、Java、Go、等

为什么要学前端

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

前端学习哪些内容

1. HTML	# 网页的骨架、只是负责显示一些内容,但是显示出来的内容不好看,没样式
2. CSS  # 对网页骨架的美化、让网页变得更加的好看而已
3. JavaScript # html、css都是不能动的,静态的,js就是让网页能够动起来,变得更加的美观
4. bootstrap、jQuery
称为是前端的三剑客!
学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js

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

1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求,处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中
# 我们学习前端谁来翻译前端的代码? 浏览器(就是前端代码的执行环境)
学习前端只需有一个浏览器即可,浏览器就是前端的解释器

# 浏览器就是一个万能的客户端,超级客户端,言外之意,他可以作为很多服务端的客户端
比如:淘宝、腾讯视频、京东、等
"""我们自己能不能开发一个B/S架构的软件,能."""
开发一个服务端即可,浏览器已经存在了,让浏览器作为我们的客户端,你会写服务端吗?
利用socket写一个服务端,让浏览器作为我们的客户端

你说浏览器它是很多服务端的客户端,问题是:浏览器是怎么识别是哪个服务端的?
很多服务端必须都要遵循浏览器的规则,所以,浏览器才能够正常的识别他们(数据传出的规则)
这个规则是:协议(HTTP协议)

HTTP协议在那一层起的作用?
HTTP协议:最上层:应用层
TCP/UDP: 传输层
ip协议: 网络层

HTTP协议(重点)

HTTP协议的四大特性
    1. 基于请求和响应的(有请求,有响应)
    2. 它是基于TCP协议之上的应用层协议
    3. 无状态
    	 就是这个协议它不能够在浏览器中保存数据,现在使用的:淘宝、支付宝、京东等这些网站都需要登录
          cookie、session、token、jwt等保存的,他们才是真正的保存用户数据的
   4. 短链接
	  # 长链接
    
请求数据
	请求首行(请求方式、协议和版本号)
    请求头(一大堆的k:v的键值对)
    
    换行符(\r\n)
    
响应数据
	响应首行(响应状态码)
    响应头(一大堆的k:v的键值对)
    
    换行符(\r\n)
 
请求方式:
    # 有很多种:现在你需要掌握2种
    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:
        	提交数据的时候使用
            在请求体里面
            数据传递更加安全
            数据传递没有限制,想传多少传多少
            
 响应状态码:
	"""使用一个特殊的数字代表一串复杂的描述性信息"""
    1xx: 代表的是请求数据成功,但是这个时候还可以继续往服务端提交数据
    2xx: 200 OK 代表的是请求成功
    3xx:301 302 代表的是重定向
    4xx: 404 Not Found 代表的是资源找不到
    5xx:500 502 服务器内部错误(出现网页打不开的情况)
    
面试题:请说出常见的响应状态码(1xx 2xx 3xx 301 201)
业务状态码

HTML介绍

你在网页中所能够看到的花里胡哨的东西都是HTML标签
<h1>hello python</h1>
<h5>hello python</h5>
<a href='http://baidu.com'>click me</a>
<img src=''>

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

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

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标签中常用的标签

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

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;

标签:浏览器,请求,简介,前端,标签,服务端,客户端
From: https://www.cnblogs.com/zhangfanshixiaobai/p/17793129.html

相关文章

  • 前端简介
    1. 前端学习哪些内容1.HTML#网页的骨架、只是负责显示一些内容,但是显示出来的内容不好看,没样式2.CSS#对网页骨架的美化、让网页变得更加的好看而已3.JavaScript#html、css都是不能动的,静态的,js就是让网页能够动起来,变得更加的美观4.bootstrap、jQuery称为是......
  • 前端大文件分片上传断点续传
     分片上传分片上传是将大文件分成多个小文件进行上传,每个小文件的大小通常为1MB到10MB。上传时,将每个小文件分别上传到服务器,服务器再将这些小文件合并成一个完整的大文件。这种方法可以提高上传速度,减少上传失败的可能性。断点续传断点续传是指在上传过程中,如果上传失败或者中断......
  • 前端大文件上传、文件切片、断点续传
    一、项目初始化1、项目初始化我们创建一个big-file-upload目录作为当前项目的根目录文件。执行以下命令对当前项目进行初始化,生成package.json文件:npminit-y2、搭建项目结构在项目根目录中创建public目录,作为前端静态资源目录。同时在public中创建index.html用于构建前......
  • 每日一练:无感刷新页面(附可运行的前后端源码,前端vue,后端node)
    1、前言想象下,你正常在网页上浏览页面。突然弹出一个窗口,告诉你登录失效,跳回了登录页面,让你重新登录。你是不是很恼火。这时候无感刷新的作用就体现出来了。2、方案2.1redis设置过期时间在最新的技术当中,token一般都是在Redis服务器存着,设置过期时间。只要在有效时间内,重新发出请......
  • PPA简介
    PPA,即PersonalPackageArchive(个人软件包档案),是Ubuntu系统中一个用于存储和分发软件包的在线仓库。PPA的主要功能PPA允许开发人员和维护人员将软件包上传到Launchpad(https://launchpad.net/)(一个由CanonicalLtd提供支持的项目和代码托管平台),从而让用户能够轻松地安装和更新......
  • 05前端开发js
    运算符#1.算术运算符varx=10;varres1=x++;'先赋值后自增1'x先赋值给res1,让res变成10,x变成12varres2=++x;'先自增1后赋值'x还是10,x加了2次后赋值给res2,res2变成12#2.比较运算符弱等于:自动转换类型'5'==5'结果是true#js会自动转换成相同数据类......
  • 前端多线程处理 —— Promise对象
    在前端编程中,处理一些简短、快速的操作,在主线程中就可以完成。但是,在处理一些耗时比较长以至于比较明显的事情,比如读取一个大文件或者发出一个网络请求,就需要子线程来完成,以避免只用单线程时造成页面一时无法响应的事情。以发送网络请求为例,在以往的JavaScript中,使用多个回调函......
  • 记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助业务场景:产品有个功能是设置主题。类似手机自动切换壁纸,以及其他功能颜色,icon,字体等。管理员需要在后端管理系统多次下载不同主题,(至于要干啥就不说了...),主题中可能有30~100个高清壁纸,icon等。现在每次下......
  • 前后端系统部署——前端篇
     在华为云耀云服务器L实例上部署前端需要经过以下几个步骤:首先登录华为云耀云界面:https://www.huaweicloud.com/product/hecs-light.html 创建华为云耀云服务器L实例账号,购买服务器并登录控制台。 创建华为云耀云服务器L实例。在控制台界面上,选择ECS(云服务器)服务,然后......
  • vue + tornado 个人博客项目简介
    vue+tornado个人博客项目简介项目链接:https://www.freepd.top项目链接:https://admin.freepd.top项目简介首页预览本站接入了百度api每小时更新访问量域名在阿里云购买,解析到腾讯云服务器ssl证书为阿里云每年免费申请20个技术栈前端:vue2+element-ui+axios+vue......