00 关于Web前端

Web 前端是指呈现给用户的 Web 页面或 APP 前端界面,是通过 HTML、CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。

在互联网的演化进程中,网页制作是 Web1.0 时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。

2005 年以后,互联网进入 Web2.0 时代,各种类似桌面软件的 Web 应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

随着手机成为人们生活中不可或缺的一部分,成为人们身体的延伸,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表甚至人工智能领域。

前端核心技术

HTML、CSS 和 JavaScript 三者被称为前端三要素,在一个基本的网站中包含许多网页,每个网页都是由 HTML、CSS 和 JavaScript 组成,三者相辅相成。HTML 是结构层,从语义的角度去搭建网页结构;CSS 是样式层(表现层),从美观的角度去修饰页面样式,JavaScript 是行为层,从交互的角度去描述页面行为。

HTML

HTML(Hyper Text Markup Language)是超文本标记语言,并不是编程语言,它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的网络资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本,HTML 命令用来说明文字、图像、视频、表格、链接等,目前广泛使用的是 HTML5。

HTML5 作为 HTML 的最新版本,引入了多项新技术,大大增强了对于应用的支持能力,使得 Web 技术不再局限于呈现网页内容。

HTML5 可以使开发者的工作大大简化,理论上单次开发就可以在不同平台借助浏览器运行,降低开发的成本,这也是产业界普遍认为 HTML5 技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator 等公司均已推出了较为成熟的开发工具,支持HTML5应用的发展。

CSS

CSS(Cascading Style Sheets)是层叠样式表,用来表现 HTML 文件样式的标准语言。CSS 用于定义网页的样式,包括针对不同设备和屏幕尺寸的设计和布局,描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题,通常保存在外部 .css 文件中,目前广泛使用的是 CSS3。

JavaScript

JavaScript (简称 Js)是一种解释性脚本语言,Js 主要用来向 HTML 页面添加交互行为,通常通过嵌入 HTML 中来实现自身功能,但写成独立的 Js 文件更有利于结构和行为的分离。

JavaScript 包括以下三部分:

  • ECMAScript:描述了该语言的语法和基本对象,JavaScript 的语法标准,比如 ES5、ES6、ES7 等;

  • 文档对象模型(DOM):描述处理网页内容的方法和接口,比如 HTML 各类标签;

  • 浏览器对象模型(BOM):描述与浏览器进行交互的方法和接口,比如浏览器前进、后退、刷新、关闭等。

Web发展简史

万维网(World Wide Web)通常指的是网页和网站,现在已经是互联网的代名词,也是互联网中重要的核心部分。到目前为止,Web 发展已经有将近30年的历史了,万维网也经历了 Web1.0 到 Web3.0 的发展。从最初的商业用途到现在的人人皆用,人类时代已经到了互联网时代。

WEB发展简史,Web1.0到Web3.0的发展历程

Web1.0

Web1.0 是万维网发展的第一代模式,Brian (2007)指出:“根据 Berners-Lee,web1.0 是只读模式的网络”

Web1.0 一开始是为大型企业、商业公司服务,将企业的信息搬运到网上,向人们宣传企业。Web1.0 是静态的、单项的网络。大型商业公司通过网络把他们的产品发布到网上,然后人们可以通过网络浏览信息,如果客户有中意的商品,便可以和公司取得联系。此外,第一代 Web 用途相当有限,只是简单的信息检索。

19世纪中期(1996年)HTML 的出现推动了家用计算机的普及以技术创新为主导,注重点击浏览,通过门户整合,用户以流量为主,以网页制作为主,大多是静态页面,也有动态页面。

Web1.0 的主要协议是 HTTP、HTML and URI。

Web 1.0 只解决了人对信息搜索、聚合的需求,而没有解决人与人之间沟通、互动和参与的需求。”因此,为了满足广大网民的需求,对于二代网络的开发已迫在眉睫。

Web 2.0

1990年,伯纳斯李发布构架万维网(WWW)的三大基本技术,互联网自此进入了Web时代。由于 Web的内容让网民耳目一新,它结合音频、视频、图像,运用多媒体模式,给网民带来了一种空前的视觉享受,因此,自从面世以来,很快引起了人们的广泛关注,发展异常迅猛。到了1997年全球互联网数量已达到100万个,2000年更突破1000万。Web2.0是相对于web1.0 提出的一个新概念,是2003/4年的热词。

大约在2004年左右,诞生了WEB2.0的概念,更注重用户的交互作用,用户既是浏览者,也是内容的制造者,在模式上有单纯的“读”向“写”以及共同建设发展。

较之1.0,web 2.0 的最大改变是,web 2.0不再是单维的,逐渐发展为双向交流,另一特征是社交网络的兴起。Web1.0 主要依赖于 html 语言,最大的缺陷是交互性差,用户每提交一次数据,都要停下来等待互联网的响应,在网站出现响应之前,用户至能看到一个空白网页无所事事,这一缺陷在 web2.0 上市后得以很好的解决。

Web3.0

WEB3.0 是一个正在尝试概念,用户拥有自己的数据,并能在不同平台交互共享,强化虚拟货币及网络安全和网络财富的共识,以及语义化的实现

Web历史事记

Tim Berners-Lee(蒂姆·伯纳斯·李),英国科学家,万维网之父,于1989 年在欧洲核子研究组织(CERN)正式提出万维网的设想。该网络最初是为了满足世界各地大学和研究所的科学家之间对自动信息共享的需求而设计和开发的,这也是为什么 HTML 的顶层声明是 ,标签名、文档对象模型的名称也是由此而来。

  • 1990 年12 月,Tim Berners-Lee(蒂姆·伯纳斯·李)开发出了世界上第一个网页浏览器。

  • 蒂姆·伯纳斯-李建立的第一个网站(也是世界上第一个网站)是 http: //info. cern. ch/,它于1991年8月6日上网,它解释了万维网是什么,如何使用网页浏览器和如何建立一个网页服务器等等。蒂姆·伯纳斯-李后来在这个网站里列举了其它网站,因此它也是世界上第一个万维网目录。

  • 1993 年 4 月 30 日,欧洲核子研究组织将万维网软件置于公共领域,把万维网推广到全世界,让万维网科技获得迅速的发展,深深改变了人类的生活面貌。

  • 1994 年,万维网联盟(W3C,World Wide Web Consortium)成立,超文本标记语言(HTML,Hyper Text Markup Language)正式确立为网页标准语言,我们的旅途从此开始。

  • 1994年,Hkon Wium Lie 最初提出了 CSS 的想法。

  • 1994 年,网景公司发布了 Navigator 浏览器,但他们急需一种网页脚本语言,以使浏览器可以与网页互动。

  • 1995 年,网景公司的 Brendan Eich 迫于公司的压力,只花了十天就设计了 JS 的最初版本,并命名为 Mocha。后来网景公司为了蹭 Java 的热度,把 JS 最终改名为 JavaScript。但实际情况是,网景公司和 Sun 公司结成联盟,才更名为 JavaScript。

  • 在网景公司推出 JavaScript 的时候,微软以 JS 为基础,编写了 JScript 和 VBScript 作为浏览器语言,并在 1995 年的 8 月推出了 IE 1.0。(第一次浏览器大战)

  • 1995 年,Rasmus Lerdof 创造的 PHP 开始活跃在各大网站,它让 Web 可以访问数据库了,PHP 实现了人们渴望的动态网页。

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

  • 1997年,DHTML(Dynamic HTML,动态HTML)发布,允许动态改变网页内容。这标志着 DOM 模式(Document Object Model,文档对象模型)正式应用。

  • 网景公司最终在第一次浏览器大战中落败,于 1998 年,被美国在线(AOL)以42亿美元收购。

    在1998 年网景公司被收购前,网景公司公开了 Navigator 源代码,想通过广大程序员的参与重新获得市场份额。Navigator 改名为 Mozilla。这也是火狐浏览器的由来,也是第二次浏览器大战的伏笔。

  • AJAX(Async JavaScript And XML)于 1998 年开始初步应用,2005 年开始普及。AJAX 的广泛使用,标志着Web2.0 时代的开启。这同时也是各大浏览器争锋的时代。

  • 2001年,微软公司时隔 5 年之后,发布了 IE 浏览器的下一个版本 Internet Explorer 6。这是当时最先进的浏览器,它后来统治了浏览器市场多年。

  • 2002年,Mozilla 项目发布了它的浏览器的第一版,后来起名为 Firefox。

  • 2003年,苹果公司发布了 Safari 浏览器的第一版。

  • 2004 年 Firefox 发布,拉开了第二次浏览器大战的序幕。同期市面上诞生的各种新兴浏览器,如 Safari、Chrome 等,也加入了战争。

  • 2006 年,JQuery 函数库诞生,作者为 John Resig。JQuery 为操作网页 DOM 结构提供了非常强大易用的接口,成为了使用最广泛的函数库,并且让 JavaScript 语言的应用难度大大降低,推动了这种语言的流行。

  • 2006年,微软公司发布 IE 7,标志重新开始启动浏览器的开发。

  • 2008年,V8 编译器诞生。这是 Google 公司为 Chrome 浏览器而开发的,它的特点是让 JavaScript 的运行变得非常快。它提高了 JavaScript 的性能,推动了语法的改进和标准化,改变外界对 JavaScript 的不佳印象。同时,V8 是开源的,任何人想要一种快速的嵌入式脚本语言,都可以采用 V8,这拓展了 JavaScript 的应用领域。

  • 2009 年,Node.js 项目诞生,创始人为 Ryan Dahl,它标志着 JavaScript 可以用于服务器端编程,从此网站的前端和后端可以使用同一种语言开发。并且,Node.js 可以承受很大的并发流量,使得开发某些互联网大规模的实时应用变得容易。

  • 2009 年,Jeremy Ashkenas 发布了 CoffeeScript 的最初版本。CoffeeScript 可以被转化为JavaScript运行,但是语法要比JavaScript简洁。

  • 2016年,Chrome 浏览器份额超越 IE,第二次浏览器大战结束。

  • 2008 年 HTML5 草案提出,各大浏览器开启良性竞争,争先实现 HTML5 功能。由于 HTML5 带来前端代码复杂度的增加,前端为了寻求良好的可维护性和可复用性,也不得不参考后端 MVC 进行了设计和拆分,后来出现了三大前端框架:Vue(2014)、React(2010)、AngularJS(2009)。

  • 2009年,PhoneGap 项目诞生,它将 HTML5 和 JavaScript 引入移动设备的应用程序开发,主要针对 iOS 和 Android 平台,使得 JavaScript 可以用于跨平台的应用程序开发。

  • 2009年,Google 发布 Chrome OS,号称是以浏览器为基础发展成的操作系统,允许直接使用 JavaScript 编写应用程序。类似的项目还有 Mozilla 的 Firefox OS。

  • 2012 年,单页面应用程序框架(single-page app framework)开始崛起,AngularJS 项目和 Ember 项目都发布了 1.0 版本。

  • 2012 年,微软发布 TypeScript 语言。该语言被设计成 JavaScript 的超集,这意味着所有 JavaScipt 程序,都可以不经修改地在 TypeScript 中运行。同时,TypeScript 添加了很多新的语法特性,主要目的是为了开发大型程序,然后还可以被编译成 JavaScript 运行

  • 2013 年,ECMA 正式推出 JSON 的国际标准,这意味着 JSON 格式已经变得与 XML 格式一样重要和正式了。

  • 2013 年 5 月,Facebook 发布 UI 框架库 React,引入了新的 JSX 语法,使得 UI 层可以用组件开发。

  • 2014 年,微软推出 JavaScript 的 Windows 库 WinJS,标志微软公司全面支持 JavaScript 与 Windows 操作系统的融合。

  • 2014 年 11 月,由于对 Joyent 公司垄断 Node 项目、以及该项目进展缓慢的不满,一部分核心开发者离开了Node.js,创造了 io.js 项目,这是一个更开放、更新更频繁的 Node.js 版本,很短时间内就发布到了 2.0 版。三个月后,Joyent 公司宣布放弃对 Node 项目的控制,将其转交给新成立的开放性质的 Node 基金会。随后,io.js 项目宣布回归 Node,两个版本将合并。

  • 2015 年 3 月,Facebook 公司发布了 React Native 项目,将 React 框架移植到了手机端,可以用来开发手机App。它会将 JavaScript 代码转为 iOS 平台的 Objective-C 代码,或者 Android 平台的 Java 代码,从而为 JavaScript 语言开发高性能的原生 App 打开了一条道路。

  • 2015 年 5 月,Google 公司的 Polymer 框架发布 1.0 版。该项目的目标是生产环境可以使用 WebComponent 组件,如果能够达到目标,Web 开发将进入一个全新的以组件为开发基础的阶段。

  • 2015 年 6 月,ECMA 标准化组织正式批准了 ECMAScript 6 语言标准,定名为《ECMAScript 2015 标准》。JavaScript 语言正式进入了下一个阶段,成为一种企业级的、开发大规模应用的语言。这个标准从提出到批准,历时 10 年,而 JavaScript 语言从诞生至今也已经 20 年了。

  • 2015 年 6 月,Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。这是一种 JavaScript 语言编译后的二进制格式,类似于 Java 的字节码,有利于移动设备加载 JavaScript 脚本,解析速度提高了 20+ 倍。这意味着将来的软件,会发布 JavaScript 二进制包。

  • 2016 年 6 月,《ECMAScript 2016 标准》发布。与前一年发布的版本相比,它只增加了两个较小的特性。

  • 2017 年 6 月,《ECMAScript 2017 标准》发布,正式引入了 async 函数,使得异步操作的写法出现了根本的变化。

  • 2017 年 11月,所有主流浏览器全部支持 WebAssembly,这意味着任何语言都可以编译成 JavaScript,在浏览器运行。

前端技能树

image-20211017003237687

指南和教程

MDN Web 开发技术

w3school HTML 教程

w3school CSS 参考手册

阮一峰 JavaScript 标准参考教程(alpha)

阮一峰 ECMAScript 6 入门

印记中文

API Reference Document

优秀技术网站

https://www.kancloud.cn/zhangqh/front/937678

最后更新于