HTML5+CSS3+JavaScript网页设计基础与实战（微课版）全套PPT课件.pptx

第1章初识Web前端1.1Web前端发展历程1.2Web开发的核心技术1.3Web开发工具

了解Web前端发展历程理解Web前端开发的3个核心技术的概念掌握HTML5、CSS3和JavaScript的基础知识熟练使用Web前端开发工具

引言1994年蒂姆·伯纳斯·李（Tim·Berners·Lee）创建万维网联盟（WorldWideWebConsortium，简称W3C），这是Web技术领域最具权威和影响力的国际中立性技术标准机构，它最重要的工作是制定Web规范，这些规范描述了Web的通信协议（比如HTML和XHTML）和其他的构建模块，有效促进了Web技术的互相兼容。Web前端因其开发效率高，网页效果美观，用户体验感好，现已被广泛应用。在学习Web前端之前，应该“知己知彼”了解其发展历程。在学习中需要掌握Web前端开发的3个核心技术HTML5、CSS3和JavaScript，这是Web前端必学的知识体系。在开发过程中熟练使用Web前端开发工具，可以快速且方便的编写网页代码。

1.1Web前端发展历程Web前端概述Web前端发展简史

1.1Web前端发展历程1.1.1Web前端概述万维网（WorldWideWeb，亦作Web、WWW、W3），是一种基于超文本和超文本传输协议（HyperTextTransferProtocol，简称HTTP）的，全球性的，动态交互的，跨平台的分布式图形信息系统。在这个系统中，每个有价值的事物被称为“资源”，并且由一个全局“统一资源标识符（UniformResourceLocator，简称URL）”标识，这些资源由超文本输协议传送给用户，而用户通过点击链接来获得资源。前端开发是创建Web页面或APP等前端界面呈现给用户的过程，通过HTML（HyperTextMark-upLanguage，超文本标记语言）、CSS（CascadingStyleSheets，层叠样式表）和JavaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。

1.1Web前端发展历程1.1.1Web前端概述Web1.0：网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主Web2.0：互联网进入Web2.0时代以后，涌现出大量的类似于桌面软件的Web应用，用户不仅能浏览网页，还能对网页上的内容进行操作。网站的前端因此发生变化，网页不再只是单一的承载文字和图片，各种媒体的应用使网页内容变得更丰富多彩，同时也提升了用户体验感在互联网的发展过程中，Web前端发展初期HTML技术只能展示简单的网页，当时被称为网页制作，十分不易于开发者维护与更新网站。

1.1Web前端发展历程1.1.2Web前端发展简史1.静态页面阶段1994年12月，W3C在伯纳斯·李的主持下成立，标志着万维网进入了标准化发展的阶段。这个阶段的网页还非常地原始，主要以HTML为主，是纯静态的只读网页，被称为Web1.0时代。2.JavaScript诞生1995年，网景通信公司（Netscape?CommunicationsCorporation，亦称Netscape）设计了JavaScript脚本语言，并集成到Navigator2.0版本中。JavaScript主导了W3C的官方标准，成功实现JavaScript的标准走向国际。

1.1Web前端发展历程1.1.2Web前端发展简史3.动态页面的发展JavaScript兴起以后，网页可以显示出浮动广告之类的动态效果，但这不是动态网页。以PHP、JSP和ASP为代表的后端动态页面技术的应用才实现动态交互。4.Ajax开启Web2.0时代2004年以前的动态页面是由后端技术驱动的，但频繁的页面刷新给用户带来极差的体验感。Ajax技术实现了异步HTTP请求，用户不用专门去等待请求的响应，就可以继续浏览或操作网页。Ajax技术开启了web2.0的时代。

1.1Web前端发展历程1.1.2Web前端发展简史5.前端兼容性框架的出现不同的浏览器之间，技术标准会有差异，这样不利于兼容开发，于是催生了Dojo、Mooltools、YUIExtJS、JQuery等前端兼容框架，其中2006年诞生的JQuery的应用最为广泛。6.HTML5的出现2007年，W3C采纳了HTML5规范草案，并在2008年1月22日正式发布草案。在HTML5新规范的指引下，各个浏览器厂商不断改进浏览器。2014年10月28日，W3C正式发布HTML5.0标准。

1.1Web前端发展历程1.1.2Web前端发展简史7.前端三大框架前端3大主流框架是Angular、Rect和Vue。Angular是一个比较完善的前端框架，