web前端(1)——了解什么是前端,以及与后端的关系
简介
1.什么是web前端
说这个之前,我们先了解web前端工程师是干什么的,百度百科的解释:
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验
得知这个之后,那么什么是web前端相信各位也就有个大概了解了,就是浏览器和app界面的开发嘛。
web是什么呢?web就是万维网,要彻底的解释这个名词就需要些篇幅了,这里就用一句话总结,就是一种全球都公认的协议,一个信息系统,必须遵守这个协议才能上网。web前端其实就是前端,或者前端技术,前端开发,这几个名词其实意思都差不多的
浏览器界面是什么呢,比如你打开百度网站

以上这个界面全是利用web前端技术做出来的,比如上方这些:

这些字根据您的上网常识,应该都知道是可以点击的,点击完会跳到一个新的界面,但是有些字又不能点击,这就是用了前端技术实现的
接着看,这个百度的logo

不难看出,它就是一张图片对吧,当你控制鼠标把光标放上去的时候,它还会出现几个字:点击一下,了解更多

那么说明,这个图片也是可以点击的,而且也可以跳到一个页面上去
接着再看,下面的这个

根据你的上网常识,应该也知道,最长的那个框里可以输入文字,然后中间那个像相机一样的图片可以把图片放上去,最右边蓝色的【百度一下】这个按钮就是当我们要查个东西,在左边的框输完文字点击【百度一下】之后就会立马显示出我们搜索相关的数据。
朋友们,想过没有,为什么只有那个长条的框里可以输入文字,其他地方不可以呢?为什么点那个相机图片位置会提示让你传图片呢?为什么点【百度一下】就可以实现我们的查询呢?而且按键盘上的回车键和点【百度一下】的效果是一样的。以上这些也是前端技术实现的
最后再看底部

这些看起来,有的也是可以点击的,有的不可以。和之前的一样也是点击就可以跳转,所以不多说了
好的,根据以上的大概描述,那些功能是通过怎样的前端技术实现的,这个我们暂且不提(以后会详细介绍),朋友们,你有没有个疑问,这些东西的排版有没有问题,它们为什么就可以这么排版,比如,那个输入框为什么不在右下角,而在整个页面的正中间呢?相信你已经可以抢答了,是的,它也是前端技术实现
以上的这些所有的,就是前端技术或者说web前端,而在早期不叫web前端,而叫页面设计(不太等同于现在的页面设计),网页设计,当然现在也有很多人这么叫。掌握这个技术的人,就是前面说的web前端工程师,或者早期的叫网页设计师。
说到这,相信很多人会问,什么又是后端。在这之前先说个事,其实在最开始,前端和后端是没有严格区分的,也就是说前端后端都要搞,这个的话在现在来看有另外一个词语叫全栈。
2.什么是后端
后端就是除了前端以外的所有技术都是后端,后端就是在服务器上运行的,比如和数据库交互,逻辑实现,对前端的响应和请求等等这些就是后端技术。
比如你再浏览器地址里输入【www.baidu.com】会立马显示百度首页,其实这就是浏览器和后端交互的过程,不然的话,你想为什么就会显示百度,而不显示其他网站呢?这里就是浏览器对服务器的请求,告诉百度的服务器,我要访问你的首页,百度服务器作出响应,说好的,然后返回了一些数据给浏览器,浏览器再把服务器返回的这个数据重新格式化了下再显示到界面上,这才是我们看到的百度首页
3.后端与前端的关系

然后比如我利用百度搜索一个数据:

这些返回来的数据也是服务器上的后端通过前端发来的请求,去和数据库交互之后拿到结果响应给前端的

好的,我已经尽量的把我理解的描述出来了,如果有错,各位望指出
前端和后端就是这样的关系,什么是前端相信各位看了也有个大概了解了,如果因为看了我的这篇文章还是没懂,这里先说声抱歉,然后劳烦请忘记我的描述,去百度一下技术大佬更专业的描述。
web前端(1)——了解什么是前端,以及与后端的关系的更多相关文章
- Web前端开发大系概览 (前端开发技术栈)
前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...
- 系统架构:Web应用架构的新趋势---前端和后端分离的一点想法
最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现 ...
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- web前端开发教程系列-4 - 前端开发职业规划
前言 关于我:小天 1). 架构师,项目经理,产品经理 2). 中间件研发 3). VPCC 云计算基础平台管理 4). 智慧旅游 5). 智慧教育 6). 一次失败的创业体验(爱邂逅网) 一. 在开 ...
- 写给想成为前端工程师的同学们 ―前端工程师是做什么的?a
前端工程师是做什么的? 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产 ...
- 用“MEAN”技术栈开发web应用(一)AngularJs前端架构
前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...
- web前端开发教程系列-2 - 前端开发书籍分享(转)
目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记 前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...
- web前端开发教程系列-2 - 前端开发书籍分享
目录: 前言 一. CSS 二. JavaScript 三. jQuery 四. 后记 前言 前端书籍在每个商城或书架上面都是琳琅满目,很多初学者又不能很好的判断书的质量或层次.因为今天给同学们分 ...
随机推荐
- vue-13-swiper组件的使用
vue-13-swiper 是一个滑动库, 非常丰富的滑动样式, 轮播图等 https://www.swiper.com.cn https://github.com/surmon-china/vue- ...
- Python机器学习笔记:常用评估指标的用法
在机器学习中,性能指标(Metrics)是衡量一个模型好坏的关键,通过衡量模型输出y_predict和y_true之间的某种“距离”得出的. 对学习器的泛化性能进行评估,不仅需要有效可行的试验估计方法 ...
- Dubbo 入门之二 ——- 项目结构解析
本文主要说明点 概述 背景 需求 架构 Dubbo源代码项目结构 概述 分享 Dubbo 的项目结构 ,通过本文可以大致了解到Dubbo整个项目的结构 背景 将一个项目进行拆分, 进行分布式架构. 需 ...
- Go语言学习笔记说明
参考书籍:<学习Go语言>.<Go语言编程> 程序运行环境:windows(64bit) Go语言版本:go1.0.2 资料: 1.Go语言半小时速成教程 http://w ...
- Python丢弃返回值
函数多个返回值 python的函数支持返回多个值.返回多个值时,默认以tuple的方式返回. 例如,下面两个函数的定义是完全等价的. def f(): return 1,2 def f(): retu ...
- GNU C 与 ANSI C(上)
Linux 上可用的 C 编译器是 GNU C 编译器,它建立在自由软件基金会的编程许可证的基础上,因此可以自由发布.GNU C 是对标准 C 进行的一系列扩展,以增强标准 C 的功能. 1. 零长度 ...
- 【原】KMeans与深度学习自编码AutoEncoder结合提高聚类效果
这几天在做用户画像,特征是用户的消费商品的消费金额,原始数据(部分)是这样的: id goods_name goods_amount 男士手袋 1882.0 淑女装 2491.0 女士手袋 345.0 ...
- [转]MySQL忘记root密码解决方法
本文转自:https://www.cnblogs.com/wxdblog/p/6864475.html 今天重新装了一遍MySQL,因为用的是免安装的,所以需要重新设置密码,然后我一通,结果搞得自己也 ...
- mybatis_09关联查询_一对一
复杂查询时,单表对应的po类已不能满足输出结果集的映射. 所以有些时候就需要关联查询_一对一:通过条件查询结果每个字段都唯一 一对一:模型里面有模型 一对多:模型里面有集合 多对多:集合里面有集合 方 ...
- javascript算法-插入排序
原理跟java那篇文章一样,只是语言不同而已 var InsertSort = function( _n ){ this.maxSize = _n; this.arr = []; this.init ...