web前端发展历程

总览前端发展史

    • 前言
    • 浏览器的发展史
    • 走进前端
      • HTML
      • CSS
      • javaScript
    • 小前端时代
    • 大前端时代
    • 写在最后

前言

目前在IT公司中前端的岗位越来越成为不可或缺的,前端的地位也愈见明显,很多学校已经体系的传授前端课程,众多培训机构也将前端知识作为了主流课程,也有越来越多的同学加入到前端学习的行列中,作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。那么首先让我们来了解一下浏览器的发展历程。

浏览器的发展史

在这里插入图片描述

在中享思途的行业资讯中看到了他对浏览器的发展史总结如下:
1、1991年,WorldWideWeb浏览器发布,这款可以说是祖父级别的,它是全球用户最早注册的WEB浏览器,WorldWideWeb开发始于20世纪80年代末,之后10年间经过MTV的宣传以及Commodore 64的完善,终于在1991年这个有跨时代意义的Web浏览器发布了。WorldWideWeb原理很简单,可以显示基本的样式表。

2、1992年,Erwise发布,他被称为世界上第一个图形网页浏览器,它是由赫尔辛基科技大学的4个芬兰学生开发,主要是针对在Unix上运行 XWindows的需要。ViolaWWW,它是最高老的浏览器之一,在1992年5月份发布,它的开发者是美国加州大学的学生Pei-Yuan Wei,他的目的和Erwise一样是针对在Unix上运行 X Windows的需要。MidasWWW也是1992年发表的,它是由托尼约翰逊在斯坦福线型加速器中心研发的。Lynx首发也是在1992年,它提供了一个语音转换接口为视觉和听觉障碍的人群提供了很好的功能。

3、1993年,Mosaic1.0发布,Mosaic可以说在一定程度上升华了Erwise的图形化,并且将图形化浏览器推向了万维网的主流。Arena浏览器是第一个支持背景图片,表格、文字绕流图片和内嵌数学表达式的浏览器,支持背景图片,表格等。

4、1994年,Cello发布,他支持的就比较多了,WorldWideWeb、Gopher、FTP、CSO/ph/qi、Usenet News retrieval以及其他的一些协议,他当时成为了Windows平台上第一款浏览器。IBM WebExplorer也在同年发布,IBM推出自己的操作系统,WebExplorer也是强行捆绑在了他的系统系统上。Netscape Navigator它是一款独立的浏览器,而其在当时他的市场份额远远超过了微软的Internet Explorer。

5、1995年,IE发布,浏览器之战也就此爆发。微软的Internet Explorer在此年首次推出,为了打造最好的浏览器,微软的源代码从Mosaic上获益匪浅,学习并迅速开始调整自己的浏览器,IE早期并没有捆绑在Window95上,而是作为Window95插件包的一部分进行捆绑,当时他只有1M大小。IE2在同年晚些时间发布,微软当时声称这是一个跨平台的浏览器,支持Window和Mac,IE2也加入了支持JavaScript的潮流中,它支持安全套接字层(SSL),Cookie和包括英语在内的12种语言。IE3正式捆绑在了Windows 95OSR2中,它是第一个支持CSS的主流浏览器,IE3摆脱了Spyglass源代码的局限,开始支持ActiveX控件,Java小程序,和Internet邮件。

6、1996年,Opera发布,Telenor是挪威最大的通讯公司,他们推出了Opera,并在两年后进军移动市场,推出了Opera的移动版。

7、1997年,IE4伴随着Windows 98操作系统一起发布。在发布Window Xp之前发布了IE6,并且新系统中包括了浏览器的最新升级补丁。随后IE逐渐占据了市场绝大部分份额。其他浏览器败下阵来。

8、1998年,Netscape浏览器走向开源,和IE之争最后以失败告终。

9、2003年,苹果Safari浏览器发布,苹果进入浏览器市场推出了自己的Webkit引擎,该引擎非常优秀,后来被Google,Nokia之类的厂商用于手机浏览器。

10、2004年,Firefox引发了第二场浏览器之争。

11、2006年,IE7发布,IE6发布的第六年,迫于Firefox的压力,微软匆匆推出IE7应战,吸取了Firefox的一些设计思想。

12、2008年,Google的Chrome参战,Google发布了他们自己的浏览器,以轻量级,快,异常的稳固让这款浏览器成为了一个不可轻视的对手。
以上就是浏览器的一个大致发展历程了。接下来看看HTML的一个发展史。

走进前端

首先前端是什么呢?这个好像大家没有对他一个最完美的诠释,记得在上家公司,有一天与我们公司老板做了同一趟电梯,老板问道你是做什么的,我回答在咱们公司做前端开发,能不能跟我说一下什么是前端开发?老板随和的问道,毫无准备的我脑海中飘出很多词汇!你能看到的所有东西都是我们前端来做的。。。后端为我们提供逻辑、数据我们来给用户做展示,老板说能不能用一个词来涵盖,嗯。。。。数据可视化。老板说好,我明白了。其实我也不知道这样表述是否准确,但是在我的理解中是没有问题的哈,94将数据展示出来嘛哈哈!看到一篇文章中他是这样解释的:
前端指的就是浏览器端,后端指的就是为浏览器提供服务和数据的服务器端。这是比较准确的描述,如果往大了讲,你所有看到的一切,网页、移动端网页、小程序、甚至某些APP,都是属于前端的范畴。下面博主就带领大家见证前端是如何发展到今天的!

上个世纪90 年代初,第一个网站便诞生,当时的网页完完全全是由文本所构成,除了一些小图片就是毫无布局可言的标题与段落。但是发展到今天来看我们各种用户操作逻辑的变更,我们各种炫酷样式的迭代,以及各种用户行为的理想化其实这些界面的变革都是我们前端的进步!

下面介绍的三位就是我们前端重中之重,最重要的三门技术,如果我们把前端比喻成一部手机,那么HTML可以说成是我们手机的硬件、CSS他就是我们手机的外观色彩、javaScript则是我们手机的功能!即使前端出现更多的高级框架,其实也都是在不同程度的去封装我们这三门基础语言。

HTML

HTML(超文本标记语言——HyperText Markup Language)是构成 Web
世界的基石。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

在这里插入图片描述

1、HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

2、HTML 2.0 – 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时

3、HTML 3.2 – 1996年1月14日,W3C推荐标准

4、HTML 4.0 – 1997年12月18日,W3C推荐标准

5、HTML 4.0(微小改进) – 1999年12月24日,W3C推荐标准

6、XHTML 1.0 – 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布

7、XHTML 1.1 – 于2001年5月31日发布

8、HTML5.0 2014年10月28日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成

CSS

层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

在这里插入图片描述

1994 年,Hkon Wium Lie 最初提出了 CSS 的想法,联合当时正在设计 Argo 的浏览器的Bert Bos,他们决定一起合作设计 CSS,于是创造了 CSS 的最初版本。

紧接着,他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议,1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立,W3C 对 CSS 很感兴趣,为此专门组织了一次讨论会。

1996 年 12 月,W3C 推出了 CSS 规范的第一版本。

1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注,随即微软和网景公司的浏览器均能支持 CSS1.0,这为 CSS 的发展奠定了基础。

1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月,W3C 开始 CSS3 标准的制定

javaScript

JavaScript作为赋予网页生命的前端基础技术,它可以实现相应的效果和交互,是前端开发不可或缺的基本配置之一。因此,今天小编就来带家了解一下JavaScript的前世今生,具体内容包括JavaScript 的诞生、语言版本的更迭以及应用领域等等。让大家在入门开始学习JavaScript之前,对JavaScript的发展历史有一个大致的了解。

在这里插入图片描述

JavaScript诞生于1995年,当时,它的主要目的是处理以前由服务器端需要负责的一些没有输入验证操作。在JavaScript问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值。Netscape Navigator希望通过JavaScript来解决这个问题。在人们普遍使用电话拨号上网的时代,能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟,拨号上网速度之慢,导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。由此诞生了JavaScript!

年份版本更新内容
1997ECMAScript1第一版本
1998ECMAScript2版本变更
1999ECMAScript3添加正则表达式 try/catch
1997ECMAScript4没有正式发布
2009ECMAScript5添加‘strict mode‘ 严格添加 JSON支持
2011ECMAScript5.1版本变更
2015ECMAScript6添加类和模块
2016ECMAScript7添加指数运算符(**)Array.prototype.includes
2018ECMAScript8添加rest/spread属性、异步迭代、promise.finally()、RegExp

小前端时代

其实在小前端时代之前还有更加惨淡的阶段,甚至都么有前端的概念哈,这里呢就不来给大家大篇幅的来说了,不是因为不想说而是因为博主不太专业哈,就是我们的PHP嵌套前端代码以及JSP搭建网站等等;

1995年,这是个好年份,又是这个搞事的网景公司,拜托一位叫布兰登-艾奇的大佬,希望开发出一个类似 Java 的脚本语言,用来提升浏览器的展示效果,增强动态交互能力。结果大佬喝着啤酒抽着烟,十来天就把这个脚本语言写出来了,功能很强大,就是语法一点都不像Javao 这样就渐渐形成了前端的雏形:HTML为骨架,CSS 为外貌,JavaScript 为交互。

同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门,虽然有了比较统一的 ECMA 标准,但是浏览器先于标准在市场上流行开来,成为了事实标准。导致,现在前端工程师还要在做一些政府古老项目的时候,还要去处理浏览器兼容(万恶的IE系列)哈哈 不过现在距离IE还有半个月就退出舞台啦,前端人的噩梦结束了

随着时代的不断进步,接下来就出现了表格布局,随后是 Flash,最后是基于 css的网页设计。简单来说,前端页面重构技术经历着这样的一个过程:table布局页面DIV+CSS =》HTML5+CSS3, 并且面对众多的浏览器与平合,web 前端己不再是以前那样简单的重复性工作。

不管怎么说,前端开发也算是能写点逻辑代码了,不再是只能画画页面的低端开发了。随着1998年 ajax 的出现,前端开发从 web1.0迈向了web2.0,甚至目前渐渐转向了web3.0;前端从纯内容的静态展示,发展到了动态网页,富交互,前端数据处理的新时期。这一时期,比较知名的两个富交互动态的浏览器产品是:
• Gmail (2004年)
• Google 地图 (2005年)
由于动态交互、数据异步 请求的需求增多,还衍生出了jQuery (2006) 这样优秀的跨浏览器的 js 工具库,主要用于 DOM操作,数据交互。有些古老的项目现在还在使用 jQuery。

大前端时代

在这里插入图片描述

前端开发的前身是 “网页制作”,随着移动端的兴起和4G、5G技术的普及,互联网产品业务越来越复杂,在 2011年前后,逐步脱变为前端开发;

在2011之前,前端后端是不分家的,2011后智能手机普及了,场景也越来越丰富复杂了,不得不把前端独立出来,也是目前主流的前后端分离开发模式。2016年前后,前端开发突然迎来了技术井喷期,开发形式突然发生了翻天覆地的变化。

nodejs 突然火了,2009年诞生,2015到2016左右在中国就火起来了,node火了之后带来了连锁反应

2016年前后,以 webpack为代表的 Node.js 工作流工具使前端开发的开发形式产生了翻天覆地的变化,并且,随着 Vue / React 的诞生,使前端开发进入了框架时代,工程化时代;甚至具备了微前端的概念。

写在最后

其实今天跟大家聊的并不是很多,而是大概的来梳理了一下前端发展大的节点,等后面博主会出一期更加细致的前端发展的历程,利用语言出现的使命环环相扣!以及我们的开发模式的MVC、MVP、MVVM的变革我们放到后期来说;

其实我们回首 web 前端开发的过去和现在,对于我们岗位的称呼也相应地不断发生着改变:页面小工、切图小工、美工、页面制作,再到现在的“前端开发”,由于 html 与css入门起点较低,小公司里的“美工们”也许至今还干着这样的工作:出图 (Photoshop/Firework)切图(HTML/CSS),现在而言前端开发并非如此了,随着越来越多的前端框架的兴起,我们如今的前端PC、APP、H5、xiao cheng xu、公众号、百度、支付宝小程序等多端应用一名前端开发工程师足以,利用不同的技术框架更加专业的编写出不同应用端的代码,以及前端甚至可以利用node脱离后端,我们一些框架甚至直接可以基于云进行开发,在当前云原生火爆之时,云函数、云存储甚至不用任何后端语言皆可进行开发!总结一下就是:Web 前端开发其实是很牛的职位!

很多前端伙伴问题有没有体系的面试题?
今天为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

本期图书鉴赏

(1)零基础也能快速入门。本书从最基础的高等数学基础讲起,由浅入深,层层递进,在巩固固有知识的同时深入讲解人工智能的算法原理,无论读者是否从事计算机相关行业,是否接触过人工智能,都能通过本书实现快速入门。
(2)全新视角介绍数学知识。采用计算机程序模拟数学推论的介绍方法,使数学知识更为清晰易懂,更容易让初学者深入理解数学定理、公式的意义,从而激发起读者的学习兴趣。
(3)理论和实践相结合。每章最后提供根据所在章的理论知识点精心设计的“综合性实例”,读者可以通过综合案例进行实践操作,为以后的算法学习奠定基础。
(4)大量范例源码+习题答案,为学习排忧解难。本书所有示例都有清晰完整的源码,每章之后设有习题并配套题目答案,讲解清晰,解决读者在学习中的所有困惑。

在这里插入图片描述

本书以零基础讲解为宗旨,面向学习数据科学与人工智能的读者,通俗地讲解每一个知识点,旨在帮助读者快速打下数学基础。

全书分为 4 篇,共 17 章。其中第 1 篇为数学知识基础篇,主要讲述了高等数学基础、微积分、泰勒公式与拉格朗日乘子法;第 2 篇为数学知识核心篇,主要讲述了线性代数基础、特征值与矩阵分解、概率论基础、随机变量与概率估计;第 3 篇为数学知识提高篇,主要讲述了数据科学的几种分布、核函数变换、熵与激活函数;第 4 篇为数学知识应用篇,主要讲述了回归分析、假设检验、相关分析、方差分析、聚类分析、贝叶斯分析等内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改wordpress上传文件大小限制

1. 登陆wordpress使用的数据库,切换到使用的database 2. 操作如下: > select meta_key from wp_sitemeta; > select meta_key,meta_value from wp_sitemeta where meta_keyfileupload_maxk; 修改为20M: > update wp_sitemeta set meta_value204…

php的符号的排序大小

转载于:https://www.cnblogs.com/cjjjj/p/10433334.html

浅谈 HTTP 和 HTTPS

很多前端伙伴问题有没有体系的面试题? 今天为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 浅谈 HTTP 和 …

Ubuntu 搭建 GitLab 笔记 ***

简介 GitLab 社区版可以提供许多与 GitHub 相同的功能,且部署在属于自己的机器上,我们会因为网络及其他一些问题而不便使用 GitHub ,这时部署一个 GitLab 是最好的选择。 下载 GitLab 并安装 我的环境是 Ubuntu 16.04 下进行部署操作。 GitLa…

在浏览器输入URL到页面展示发生了什么?

输入URL后查询缓存DNS服务器TCP三次握手HTTP协议包浏览器处理HTML文档TCP 和 UDP 的区别写在最后很多前端伙伴问题有没有体系的面试题? 今天为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有&#…

iOS 高级去水印,涂鸦去水印

目前在研究一下图像的处理,看了一下相关的软件,比如:《去水印大师》,究竟去水印是怎么处理的呢?看图分析。 一共是三个功能:快速去水印、高级去水印、涂鸦去水印 快速去水印:暂时没找到好的处理…

Failed to execute goal maven-gpg-plugin 1.5 Sign

问题描述&#xff1a; 解决办法&#xff1a;跳过maven-gpg-plugin <build> <pluginManagement><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-gpg-plugin</artifactId><configuration&g…

一文搞懂this指向

前言 那你说一下 js 中的 this 指向吧&#xff01;这句话已经成为面试官口中的高频面试题&#xff0c;作为前端开发的我们&#xff0c;你真的搞懂了 this 指向了吗&#xff1f;快来跟我一起来查漏补缺吧&#xff01;通过几个小案例让大家更能直白的理解 this 指向。 很多前端伙…

难怪大家丢掉了postman而选择 Apifox

前言 当下采用前后端分离模式开发Web应用已经成为气候&#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们&#xff0c;难道在搭建完页面后只能等待后端的接口么&#xff1f;这样的话我们则完全被后端开发限制住了。在前面跟大家介绍…

mvc 模式和mtc 模式的区别

首先说说Web服务器开发领域里著名的MVC模式&#xff0c;所谓MVC就是把Web应用分为模型(M)&#xff0c;控制器(C)和视图(V)三层&#xff0c;他们之间以一种插件式的、松耦合的方式连接在一起&#xff0c;模型负责业务对象与数据库的映射(ORM)&#xff0c;视图负责与用户的交互(页…

HP LaserJet MFP M227_M231双面打印

双面打印设置 转载于:https://www.cnblogs.com/xiexiaokui/p/9261577.html

万木成林,我种了“Vue技能树”

初衷 作为Vue技能树的构建者&#xff0c;一直拖延到现在才来写这篇文章&#xff0c;主要还是心里没有底&#xff0c;前面殊不知这颗“树”是否促进了大家学习的热情&#xff0c;也不知它给大家带来了多少收获。说到我们的Vue技能树&#xff0c;我作为尤大大的忠实粉丝自就业后…

poj 3525

多边形内最大半径圆。 哇没有枉费了我自闭了这么些天&#xff0c;大概五天前我看到这种题可能毫无思路抓耳挠腮举手投降什么的&#xff0c;现在已经能1A了哇。 还是先玩一会计算几何&#xff0c;刷个几百道 嗯这个半平面交二分就阔以解决。虽然队友说他施展三分套三分***** 想象…

尤雨溪对 2022 Web前端生态趋势是这样看的

文章目录前言开发范式&底层框架方面趋势基于依赖追踪范式基于依赖追踪范式—共同点基于编译的响应式系统统一模型的优势和代价基于编译的运行是优化Vue Vapor Mode&#xff08;input&#xff09;工具链原生语言在前端工具链中的使用工具链的抽象层次基于 Vite 的上层框架上…

bzoj4919 [Lydsy1706月赛]大根堆

Description 给定一棵n个节点的有根树&#xff0c;编号依次为1到n&#xff0c;其中1号点为根节点。每个点有一个权值v_i。你需要将这棵树转化成一个大根堆。确切地说&#xff0c;你需要选择尽可能多的节点&#xff0c;满足大根堆的性质&#xff1a;对于任意两个点i,j&#xff0…

众多mock工具,这一次我选对了

文章目录写在前面Mock介绍Mock能解决什么问题?传统Mock解决方案Postman接口测试工具Mock js第三方库Eolink解决方案全局Mock高级Mock返回结果Mock智能内置Mock智能自定义Mock约束条件MockEolink的Mock解决方案的优势:写在最后写在前面 交战之前&#xff0c;战士必先利其兵器&…

高并发的理解和使用场景-----特意区别和多线程的关系

一&#xff0c;高并发的理解 1.概念&#xff1a;就是短时间内遇到大量操作请求&#xff0c;导致站点服务器/db服务器资源被占满甚至严重时直接导致宕 2.影响&#xff1a;没有做高并发预处理的系统会给用户很差的体验感&#xff1b; 3.系统好坏的衡量&#xff1a;衡量一个系统的…

async 和 await 原来这么简单

前言 前端同学们可能都知道 async 和 await 的使用&#xff0c;当被面试官问到 async 和 await 的是什么&#xff1f;或者说一说你对 async、await 的理解&#xff1f;如果我们还是仅仅去阐述我是如何使用的就显得格外的苍白无力。今天博主就来带大家进一步认识我们的 async 和…

我为何在 CSDN 乐在其中

文章目录写在前面成为博主究竟能得到什么&#xff1f;内在提升耀眼名片丰富眼界提升知名度博客》变现写在最后写在前面 各位伙伴大家好&#xff0c;我是几何心凉&#xff0c;一位不是很大的也不是很小的博主&#xff0c;今天想要跟大家去聊一些比较实在的内容&#xff1b;大家能…

10分钟设置免费远程桌面

文章目录前言远程桌面设置教程启动Amazon Lightsail实例配置远程桌面启动远程桌面使用远程桌面前言 “你见过洛杉矶凌晨4点的样子吗&#xff1f;” 没有也没关系&#xff0c;你可以轻松配置一台位于洛杉矶的免费远程桌面。 利用Amazon全球可用区&#xff0c;甚至可以在世界各…