web课程要点课件

,第,1,章,Web,前端开发技术综述,Page:,*,Click to edit Master text styles,Second level,Third level,Web,前端开发技术,清华大学出版社,第,1,章,Web,前端开发技术综述,建议课时：,1-2,课时,本章学习目标,Web,前端开发工程师应掌握以下内容：,了解,Web,发展史；,了解,Web,前端开发工程师职业需求,掌握,Web,网站相关的基本概念；,理解,Web,前端开发技术及其在,Web,网页中的作用；,了解常用的,Web,前端开发工具、浏览器工具，并学会使用。,1.1 Web,概述,1980,年,Tim Berners-Lee,（同义蒂姆,伯纳斯,李）在欧洲核子物理实验室工作时建议建立一个以超文本系统为基础的项目来使得科学家之间能够分享和更新他们的研究结果。他与,Robert,Cailliau,一起建立了一个叫做,ENQUIRE,的原型系统。,1984,年,Tim Berners-Lee,蒂姆,伯纳斯,李重返欧洲核子物理实验室创造了万维网。为此他写了世界上第一个网页浏览器（,World Wide Web,）和第一个网页服务器（,httpd,）。,Tim Berners-Lee,建立了第一个网站（也是世界上第一个网站）是,http:/,info.cern.ch,/,，它于,1991,年,8,月,6,日上网，它解释了万维网是什么，如何使用网页浏览器和如何建立一个网页服务器等等。,Tim Berners-Lee,后来在这个网站里列举了其它网站，因此它也是世界上第一个万维网目录。,1.1.1 Web,的起源,追溯到遥远的,1980,年,Tim Berners-Lee,构建的,ENQUIRE,项目。,1989,年,3,月，,Tim Berners-Lee,撰写了,关于信息化管理的建议,一文，文中提及,ENQUIRE,并且描述了一个更加精巧的管理模型。,1990,年,11,月,12,日他和,Robert,Cailliau,（罗伯特,卡里奥）合作提出了一个更加正式的关于万维网的建议。,在,1990,年,11,月,13,日他在一台,NeXT,工作站上写了第一个网页以实现他文中的想法。,1991,年,8,月,6,日，他在,alt.hypertext,新闻组上贴了万维网项目简介的文章。这一天也标志着因特网上万维网公共服务的首次亮相。,1.1.1 Web,的起源（续）,1994,年,10,月非赢利性的万维网联盟,W3C,（,World Wide Web Consortium,）在麻省理工学院计算机科学实验室成立。,W3C,负责,WWW,技术标准化的协议制定，并进一步推动,Web,技术的发展。,1.1.2 Web,的特点,1.Web,是易导航和图形化,2.Web,是具有平台无关性,3.Web,是支持分布式结构,4.Web,是具有动态性,5.Web,是具有交互性,1.1.3 Web,工作原理,1.2 Web,前端开发工程师职业需求,1.2.1 Web,前端开发的由来,我国互联网行业的发展呈现迅猛的增长势头，对网站开发、设计制作的人才需求随之大量增加。前端开发和后台开发人员的比例为,1,：,1,，而在我国目前依旧在,1,：,3,以下，人才缺口较大。,1.2.2 Web,前端开发工程师的职业要求,1.,必须掌握基本的,Web,前端开发技术，其中包括：,(X)HTML,、,CSS,、,JavaScript,、,DOM,、,BOM,、,Ajax,等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的,Bug,。,2.,必须掌握网站性能优化、搜索引擎优化（,SEO,）和服务器端技术的基础知识。,3.,必须学会运用各种,Web,前端开发与测试工具进行辅助开发。,4.,除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。,1.3 Web,前端开发技术,1.3.1 HTML,HTML,（,Hypertext Text Markup Language,）超文本标记语言是标准通用标记语言,SGML,（,Standard,Generalized Markup Language,是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源）下的一个应用，也是一种标准规范，它通过标记符号来标记要显示的网页中的各个部分。,HTML,是构成,Web,页面,(Page),的基础。,1.3.1 HTML,超文本标记语言的发展历史,HTML1.0,：,1993,年,6,月作为互联网工程工作小组（,IETF,）工作草案发布；,HTML2.0,：,1995,年,11,月作为,RFC 1866,发布，在,RFC 2854,于,2000,年,6,月发布之后被宣布已经过时；,HTML3.2,：,1996,年,1,月,14,日发布，,W3C,推荐标准；,HTML4.0,：,1997,年,12,月,18,日发布，,W3C,推荐标准；,HTML4.01,：,1999,年,12,月,24,日发布，,W3C,推荐标准；,HTML5,：,2008,年,1,月,22,日发布，仍继续完善。,2.Web,网页设计相关概念,统一资源定位符,统一资源定位符（,Uniform Resource Locator,，,URL,）也被称为网页地址，如同在网络上的门牌，是因特网上标准的资源的地址（,Address),。,协议类型,:/,服务器地址（端口号）,/,路径,/,文件名,http:/info.cern.ch/www20/0002 http:/ Link,）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。,百科,1.3.2 CSS,层叠样式表,CSS,（,Cascading Style Sheet,）级联样式表,1.CSS,作用,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制,。,1.3.2 CSS,（续）,2.CSS,发展历史,CSS1:1996,年,12,月,17,日发布，,W3C,推荐标准，,1999,年,1,月,11,日重新修订；,CSS2,：,1999,年,1,月,11,日发布，,W3C,推荐标准，,CSS2,添加了对媒介（打印机和听觉设备）、可下载字体的支持；,CSS3,：计划将,CSS,划分为更小的模块，这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。,1.3.3 JavaScript,JavaScript,的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。,1.JavaScript,由来,JavaScript,最初由网景公司（,Netscape,）的,Brendan,Eich,设计，是一种由,Netscape,的,LiveScript,发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。,2.JavaScript,组成,一个完整的,JavaScript,实现是由以下,3,个不同部分组成的：,核心（,ECMAScript,）,文档对象模型（,DOM,）,浏览器对象模型（,BOM,）,1.3.3 JavaScript,案例,1.3.4 HTML DOM,HTML DOM,是,Document Object Model,文档对象模,1.DOM,由来,DOM,的历史追溯至,1990,年以后代后期,Microsoft,与,Netscape,的“浏览器大战”，双方为了在,JavaScript,与,JScript,一决生死，于是大规模的赋予浏览器强大的功能。,2.DOM,结构,1.3.4 HTML DOM,（续）,3.HTML DOM Level,DOM Level 1,：,1998,年,10,月发布，,W3C,推荐规范。含有,DOM Core,和,DOM HTML,两个模块；,DOM Level 2,：引入,DOM,视图、,DOM,事件、,DOM,样式、,DOM,遍历和范围；用于处理新的接口类型；,DOM Level 3,：引入了以统一的方式载入和保持文档的方法,包含在新模块,DOM Load and Save,和,DOM Validation,方法，从而进一步扩展了,DOM,。,1.3.5 BOM,BOM(Browser,Object Model),，浏览器对象模型。浏览器对象模型定义了,JavaScript,可以进行操作的浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览历史记录等）的途径以及操作方法。,IE 3.0,和,Netscape Navigator3.0,浏览器提供了一个浏览器对象模型特性，可以对浏览器窗口进行访问和操作。,由于没有相关的,BOM,标准，每种浏览器都有自己的,BOM,实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。,常见,BOM,对象有,Window,对象、,Navigator,对象、,Screen,对象、,History,对象、,Location,对象等。,1.3.6 AJAX,1.AJAX,工作原理,Ajax,的核心是,JavaScript,对象,XMLHttpRequest,。该对象在,Internet Explorer 5,中首次引入，它是一种支持异步请求的技术。简而言之，,XMLHttpRequest,使您可以使用,JavaScript,向服务器提出请求并处理响应，而不阻塞用户。,2.AJAX,优点,AJAX,给我们带来的好处归纳起来有以下几点：,最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好；,使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力；,可以把服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。,AJAX,的原则是“按需取数据”，可以最大程度的减少冗余请求、响应对服务器造成的负担。,基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。,1.3.6 AJAX,（续）,3.AJAX,的缺点,因为平时大多注意的都是,AJAX,给我们所带来的好处诸如用户体验的提升。而对,AJAX,所带来的缺陷有所忽视。,下面所阐述的,AJAX,的缺陷：,AJAX,破坏浏览器的前进与后退功能，使得用户的习惯得不到延续；,安全问题；,对搜索引擎的支持比较弱；,破坏了程序的异常机制；,违背了,URL,和资源定位的初衷；,一些手持设备（如手机、,PDA,等）现在还不能很好的支持,AJAX,。,1.4 Web,前端开发工具,1.4.1,NotePad,1.4.2,EditPlus,1.4.3,TextPad,1.4.4 Dreamweaver,1.4.5,TopStyle,1.4.6 CSS3 Menu,1.4.7,Sothink,Tree Menu,1.4.8,ColorImpact,1.5,浏览器工具,1.5.1 Internet Explorer,1.5.2 Mozilla Firefox,1.5.3 Google Chrome,1.5.4,Oprea,1.5.5,手机浏览器,UC,1.6,综合案例,11.5,定义域和域标题,本章小结,本章从,Web,概述、,Web,前端开发工程师职业要求、,Web,前端开发技术、,Web,前端开发工具、,Web,浏览器等五大方面对,Web,前端开发技术进行综述。,重点阐述了,Web,概述、,Web,起源、,Web,特点、,Web,工作原理。为适应互联网行业迅速发展对,IT,开发人才的需要，介绍了,Web,前端