web前端概述.ppt

《web前端概述.ppt》由会员分享，可在线阅读，更多相关《web前端概述.ppt（47页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第1章章 Web前端开发技术综述前端开发技术综述 Page: 2Web前端开发技术前端开发技术清华大学出版社清华大学出版社考核方式考核方式第第1章章 Web前端开发技术综述前端开发技术综述 Page: 3Web前端开发技术前端开发技术清华大学出版社清华大学出版社延续教学安排延续教学安排l答疑和课外辅导（即延续教学安排）答疑和课外辅导（即延续教学安排）n面对面答疑面对面答疑17学时：双周的周五学时：双周的周五3-4节课，工节课，工2的的4层计层计算机系机房算机系机房n课后答疑课后答疑17学时：有问题请及时在学时：有问题请及时在BB平台论坛区发帖，平台论坛区发帖，因为我每天会浏览多次，肯定及时回

2、帖。因为我每天会浏览多次，肯定及时回帖。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 4Web前端开发技术前端开发技术清华大学出版社清华大学出版社课程资源课程资源第第1章章 Web前端开发技术综述前端开发技术综述 Page: 5Web前端开发技术前端开发技术清华大学出版社清华大学出版社1.1 Web1.1 Web概述概述lWeb的起源可以追溯到的起源可以追溯到1980年年Tim Berners-Lee构建的构建的ENQUIRE项目（项目（ 详细参见教材第详细参见教材第2-3页）。页）。英国计算机科学家万维网的发明者19941994年年1010月非赢利性的月非赢利性的万维网联盟

3、万维网联盟W3CW3C（World Wide Web ConsortiumWorld Wide Web Consortium）在麻）在麻省理工学院计算机科学实验室成立。省理工学院计算机科学实验室成立。负责负责WWWWWW技术标准化的协议制定技术标准化的协议制定第第1章章 Web前端开发技术综述前端开发技术综述 Page: 6Web前端开发技术前端开发技术清华大学出版社清华大学出版社WebWeb历史大事记录历史大事记录Web 1.0 纪元（纪元（1994-2001） Web 2.0 纪纪元元HTML5 纪元（纪元（2009-?）第第1章章 Web前端开发技术综述前端开发技术综述 Page: 7W

4、eb前端开发技术前端开发技术清华大学出版社清华大学出版社Web1.0Web1.0纪元纪元n 关键词：关键词：网页制作、三剑客、特效网页制作、三剑客、特效300300例例n 职业名称：职业名称：网页设计师、页面仔、搞前台的、网页编辑网页设计师、页面仔、搞前台的、网页编辑n 主要技术：主要技术：HTMLHTML、CSSCSS、DreamweaverDreamweaver、FireworksFireworks、FlashFlashn 市场需求：市场需求：门户网站、企业网站、个人网站门户网站、企业网站、个人网站网页作图软件网页作图软件第第1章章 Web前端开发技术综述前端开发技术综述 Page: 8W

5、eb前端开发技术前端开发技术清华大学出版社清华大学出版社Web1.0Web1.0纪元：前端与后端比较纪元：前端与后端比较n 前端与后端人员配比是前端与后端人员配比是1:61:6左右，薪水比是左右，薪水比是1:21:2第第1章章 Web前端开发技术综述前端开发技术综述 Page: 9Web前端开发技术前端开发技术清华大学出版社清华大学出版社Web1.0Web1.0纪元：前端的领域（纪元：前端的领域（20032003）FF浏览器：即Firefox第第1章章 Web前端开发技术综述前端开发技术综述 Page: 10Web前端开发技术前端开发技术清华大学出版社清华大学出版社Web2.0Web2.0纪元

6、纪元n 关键词：关键词：JavaScriptJavaScript、AjaxAjax、Div+CssDiv+Css、WebWeb标准标准n 职业名称：职业名称：网页制作工程师、前端开发工程师网页制作工程师、前端开发工程师n 主要技术：主要技术：HTMLHTML、CSSCSS、JavaScriptJavaScriptn 市场需求：市场需求：互联网公司、互联网公司、ITIT软件公司等软件公司等第第1章章 Web前端开发技术综述前端开发技术综述 Page: 11Web前端开发技术前端开发技术清华大学出版社清华大学出版社Web2.0Web2.0纪元：前端与后端比较纪元：前端与后端比较n 前端与后端人员配

7、比是前端与后端人员配比是1:31:3左右，薪水比是左右，薪水比是3:43:4第第1章章 Web前端开发技术综述前端开发技术综述 Page: 12Web前端开发技术前端开发技术清华大学出版社清华大学出版社Web2.0Web2.0纪元：前端的领域（纪元：前端的领域（20092009）2007年，WebKit开源项目催生了面向移动设备的现代 Web 应用程序，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 13Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTML5 HTML5 纪元纪元n 关键词：关键词

8、：JavaScriptJavaScript、AjaxAjax、WebWeb标准、标准、HTML5HTML5、CSS3CSS3、移动、移动WebWeb、多终端适配多终端适配n 职业名称：职业名称：前端开发工程师、全栈工程师前端开发工程师、全栈工程师n 主要技术：主要技术：HTMLHTML、CSSCSS、JavaScriptJavaScript、服务端脚本、服务端脚本n 市场需求：市场需求：互联网公司、互联网公司、ITIT软件公司、电商、金融、智能硬件软件公司、电商、金融、智能硬件全栈工程师，也叫全端工程全栈工程师，也叫全端工程师，英文师，英文Full Stack Full Stack devel

9、operdeveloper。是指掌握多种。是指掌握多种技能，并能利用多种技能独技能，并能利用多种技能独立完成产品的人立完成产品的人第第1章章 Web前端开发技术综述前端开发技术综述 Page: 14Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTML5 HTML5 纪元：前端与后端比较纪元：前端与后端比较n 前端与后端人员配比是前端与后端人员配比是2:32:3左右，薪水比略大于左右，薪水比略大于1:11:1第第1章章 Web前端开发技术综述前端开发技术综述 Page: 15Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTML5 HTML5 纪元：前端的领域（纪元：前

10、端的领域（20142014）第第1章章 Web前端开发技术综述前端开发技术综述 Page: 16Web前端开发技术前端开发技术清华大学出版社清华大学出版社前端行业未来发展前端行业未来发展n 云服务云服务n 微信平台微信平台n 智能硬件智能硬件n 移动移动HTML5HTML5n HTML5HTML5游戏游戏第第1章章 Web前端开发技术综述前端开发技术综述 Page: 17Web前端开发技术前端开发技术清华大学出版社清华大学出版社关于前端技术关于前端技术n 作为计算机作为计算机/ /软件程专业的一个方向软件程专业的一个方向n 教学目标：培养专业的前端开发工程师教学目标：培养专业的前端开发工程师n

11、 必修技能：必修技能：HTMLHTML、CSSCSS、JavaScriptJavaScriptn 扩展技能：扩展技能：HTTPHTTP协议协议前端性能优化前端性能优化网络安全与攻击防范网络安全与攻击防范服务端开发（基于服务端开发（基于Node.jsNode.js）WebWeb网页设计的网页设计的“三剑客三剑客”第第1章章 Web前端开发技术综述前端开发技术综述 Page: 18Web前端开发技术前端开发技术清华大学出版社清华大学出版社前端技术的参考书前端技术的参考书非常经典非常经典第第1章章 Web前端开发技术综述前端开发技术综述 Page: 19Web前端开发技术前端开发技术清华大学出版社清

12、华大学出版社第第1 1讲讲 WebWeb前端开发概述前端开发概述第第1章章 Web前端开发技术综述前端开发技术综述 Page: 20Web前端开发技术前端开发技术清华大学出版社清华大学出版社本讲学习目标本讲学习目标Web前端开发工程师应掌握以下内容：前端开发工程师应掌握以下内容：l了解了解Web发展史；发展史； l了解了解Web前端开发工程师职业需求前端开发工程师职业需求l掌握掌握Web网站相关的基本概念；网站相关的基本概念；l理解理解Web前端开发技术及其在前端开发技术及其在Web网页中的作用；网页中的作用；l了解常用的了解常用的Web前端开发工具、浏览器工具，并学会使用前端开发工具、浏览器

13、工具，并学会使用。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 21Web前端开发技术前端开发技术清华大学出版社清华大学出版社1.1 Web1.1 Web概述概述Web特点：特点： （ 详细参见教材第详细参见教材第3-4页）页）1.Web是易导航和图形化是易导航和图形化 2.Web是具有是具有平台无关性平台无关性3.Web是支持分布式结构是支持分布式结构4.Web是具有动态性是具有动态性5.Web是具有交互性是具有交互性移动应用开发优势移动应用开发优势第第1章章 Web前端开发技术综述前端开发技术综述 Page: 22Web前端开发技术前端开发技术清华大学出版社清华大学出版社

14、WebWeb工作原理工作原理第第1章章 Web前端开发技术综述前端开发技术综述 Page: 23Web前端开发技术前端开发技术清华大学出版社清华大学出版社WebWeb前端开发的三层结构前端开发的三层结构内容(HTML)外观(CSS)交互(Javascript)WebWeb网页设计的网页设计的“三剑客三剑客”。HTMLHTML是网页信息结构基础；是网页信息结构基础；CSSCSS是网页表现技术，对网页布局、是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施字体、颜色、背景和其它效果实施更加精确的控制；更加精确的控制；JavaScrptJavaScrpt和和HTMLDOMHTMLDOM是网页

15、行为，是网页行为，实现网页的动态、交互功能。实现网页的动态、交互功能。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 24Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTMLH Hyper yper T Text ext M Markup arkup L Languageanguage（超文本标记语言）（超文本标记语言）用来描述页面的用来描述页面的内容内容和和结构结构 HTMLHTML是构成是构成WebWeb页面页面(Page)(Page)的基础。最新版本是的基础。最新版本是HTML5HTML5。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 25

16、Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTMLHTML超文本标记语言的发展历史超文本标记语言的发展历史HTML5HTML5终于修成正果终于修成正果第第1章章 Web前端开发技术综述前端开发技术综述 Page: 26Web前端开发技术前端开发技术清华大学出版社清华大学出版社WebWeb网页设计相关概念网页设计相关概念l统一资源定位符统一资源定位符 统一资源定位符（统一资源定位符（Uniform Resource Locator，URL）也被）也被称为网页地址，如同在网络上的称为网页地址，如同在网络上的门牌，是因特网上标准的资源的门牌，是因特网上标准的资源的地址（地址（Addr

17、ess)。 协议类型协议类型:/服务器地址（端口服务器地址（端口号）号）/路径路径/文件名文件名 http:/info.cern.ch/www20/0002 http:/ 1http超文本传输协议资源超文本传输协议资源2 2https用加密传送的超文本传用加密传送的超文本传输协议输协议3 3ftp文件传输协议文件传输协议4 4mailto电子邮件地址电子邮件地址5 5ldap轻型目录访问协议搜索轻型目录访问协议搜索6 6newsUsenet新闻组新闻组7 7file本地电脑或网上分享的本地电脑或网上分享的文件文件8 8gopherGopher协议协议第第1章章 Web前端开发技术综述前端开发技

18、术综述 Page: 27Web前端开发技术前端开发技术清华大学出版社清华大学出版社WebWeb网页设计相关概念（续）网页设计相关概念（续）l网站：在因特网上，根据一定的规则，使用网站：在因特网上，根据一定的规则，使用HTML等工具制等工具制作的用于展示特定内容的相关网页的集合。作的用于展示特定内容的相关网页的集合。l网页：构成网站的基本元素。网页：构成网站的基本元素。l首页：也称主页。即一个网站的入口网页。首页：也称主页。即一个网站的入口网页。l超链接超链接 超链接（超链接（Hyper Link）是指从一个网页指向另一个目标的连接关）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个

19、网页，也可以是相同网页上的不同位置，还系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。网页或站点之间进行连接的元素。 例如：例如：百科百科第第1章章 Web前端开发技术综述前端开发技术综述 Page: 28Web前端开发技术前端开发技术清华大学出版社清华大学出版社一个简单的一个简单的HTMLHTML页面页面第第

20、1章章 Web前端开发技术综述前端开发技术综述 Page: 29Web前端开发技术前端开发技术清华大学出版社清华大学出版社l在文本编辑器在文本编辑器(例如：例如：Sublime Text3)中编写中编写.l保存为保存为.html结尾的文件结尾的文件l在浏览器（例如：在浏览器（例如：Goole Chrome）中打开查看效果）中打开查看效果如何编写如何编写HTMLHTML页面？页面？htmhtm、htmlhtml都是静态网页的后缀名。都是静态网页的后缀名。二者没有区别。二者没有区别。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 30Web前端开发技术前端开发技术清华大学出版社清华

21、大学出版社HTMLHTML标签标签Hello World!开始标签开始标签结束标签结束标签lHTML 标签是由标签是由尖括号包围尖括号包围的关键词，比如的关键词，比如 lHTML 标签通常是标签通常是成对出现成对出现的，比如的，比如 和和 l开始和结束标签也被称为开放标签和闭合标签开始和结束标签也被称为开放标签和闭合标签第第1章章 Web前端开发技术综述前端开发技术综述 Page: 31Web前端开发技术前端开发技术清华大学出版社清华大学出版社标签嵌套标签嵌套标题介绍文字l使用使用-标签定义标题标签定义标题, 定义一级标题，定义一级标题，定义二级标定义二级标题，以此类推。题，以此类推。标题体现

22、了网页的文档结构标题体现了网页的文档结构。l使用使用标签定义一个段落。标签定义一个段落。l 是一个块级元素。这意味着它的内容是一个块级元素。这意味着它的内容自动地开始一个新行自动地开始一个新行。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 32Web前端开发技术前端开发技术清华大学出版社清华大学出版社页面编码页面编码 META META标签是标签是HTMLHTML标记标记HEADHEAD区的一个关键标签区的一个关键标签，它位于，它位于HTMLHTML文档的文档的和和之间（有些也不是在之间（有些也不是在和和之间）。它提供之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元

23、信息。的信息虽然用户不可见，但却是文档的最基本的元信息。 除了提供文档字符集、使用语言除了提供文档字符集、使用语言、作者等基本信息外，还涉、作者等基本信息外，还涉及对关键词和网页等级的设定。及对关键词和网页等级的设定。 如果是如果是UTF8UTF8编码编码，则在外国人的英文，则在外国人的英文IEIE上也能显示中文，他们无需上也能显示中文，他们无需下载下载IEIE的中文语言支持包。的中文语言支持包。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 33Web前端开发技术前端开发技术清华大学出版社清华大学出版社属性属性 点击这里属性属性属性值属性值定义超链接定义超链接href=链接目

24、标的链接目标的 URL(即即web页的地址页的地址)title=锚文字锚文字target=_blank 转到空白页转到空白页第第1章章 Web前端开发技术综述前端开发技术综述 Page: 34Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTMLHTML注释注释 xxxxxx代表你要写的注释内容，注释不会在浏览器中显示。/和和/ /* * * */ /在在htmlhtml里也是常用的注释，但只能用在里也是常用的注释，但只能用在jsjs和和CSSCSS语言语言, ,不对不对HTMLHTML语言起作用！语言起作用！第第1章章 Web前端开发技术综述前端开发技术综述 Page: 35We

25、b前端开发技术前端开发技术清华大学出版社清华大学出版社l结构结构 , , , , , 等等l媒体媒体 , , 等等HTML 5 HTML 5 新标签新标签第第1章章 Web前端开发技术综述前端开发技术综述 Page: 36Web前端开发技术前端开发技术清华大学出版社清华大学出版社l表单类型表单类型 email, range, url, date, time, datetime, number, search等等l验证验证 required, patternl其它其它 placeholderHTML 5 HTML 5 新增表单属性新增表单属性第第1章章 Web前端开发技术综述前端开发技术综述 P

26、age: 37Web前端开发技术前端开发技术清华大学出版社清华大学出版社l不同的浏览器对于不同的浏览器对于HTML标准支持程度不同标准支持程度不同l查看浏览器支持情况可以访问如下网址：查看浏览器支持情况可以访问如下网址： http:/浏览器兼容性浏览器兼容性第第1章章 Web前端开发技术综述前端开发技术综述 Page: 38Web前端开发技术前端开发技术清华大学出版社清华大学出版社l清楚了解每一个标签和属性的语义清楚了解每一个标签和属性的语义lHTML中只描述内容和结构，样式留给中只描述内容和结构，样式留给CSSl手写手写HTML，避免使用生成工具，避免使用生成工具l推荐推荐2个个HTML学习

27、的参考网址：学习的参考网址： HTML: The Living Standard HTML Tutorials如何学习如何学习HTMLHTML？第第1章章 Web前端开发技术综述前端开发技术综述 Page: 39Web前端开发技术前端开发技术清华大学出版社清华大学出版社CSSCSSl层叠样式表层叠样式表CSS（Cascading Style Sheet）级联样式表）级联样式表 1.CSS作用作用 可以有效地对页面的布局、字体、颜色、背景和其它效可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制果实现更加精确的控制 。第第1章章 Web前端开发技术综述前端开发技术综述 Page

28、: 40Web前端开发技术前端开发技术清华大学出版社清华大学出版社CSSCSS（续）（续）第第1章章 Web前端开发技术综述前端开发技术综述 Page: 41Web前端开发技术前端开发技术清华大学出版社清华大学出版社JavaScriptJavaScript JavaScript的出现使得网页和用户之间实现了一种的出现使得网页和用户之间实现了一种实时性的、动态实时性的、动态的、交互性的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。的关系，使网页包含更多活跃元素和更加精彩的内容。 1.JavaScript由来由来 JavaScript最初由网景公司（最初由网景公司（Netscape）的）

29、的Brendan Eich设计，设计，是一种由是一种由Netscape的的LiveScript发展而来的客户端脚本语言，主要目的发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。是为了解决服务器端语言，提供数据验证的基本功能。 2.JavaScript组成一个完整的组成一个完整的JavaScript实现是由以下实现是由以下3个不同部分组成个不同部分组成的：的：l核心（核心（ECMAScript） l文档对象模型（文档对象模型（DOM） l浏览器对象模型（浏览器对象模型（BOM） 第第1章章 Web前端开发技术综述前端开发技术综述 Page: 42Web前端开发技

30、术前端开发技术清华大学出版社清华大学出版社JavaScriptJavaScript案例案例第第1章章 Web前端开发技术综述前端开发技术综述 Page: 43Web前端开发技术前端开发技术清华大学出版社清华大学出版社HTML DOMHTML DOMlHTML DOM是是Document Object Model文档对象模型文档对象模型lDOM结构：以层次结构组织节点或信息片段（教材第结构：以层次结构组织节点或信息片段（教材第13页页的例的例1-3-3的网页就展示了这样的一个目录树型结构）。的网页就展示了这样的一个目录树型结构）。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 4

31、4Web前端开发技术前端开发技术清华大学出版社清华大学出版社AJAX AJAX AJAX即即“Asynchronous Javascript + XML”（异步（异步JavaScript和和XML），是指一种创建），是指一种创建交互式网页应用交互式网页应用的网页开发技术。的网页开发技术。 传统的网页传统的网页（不使用（不使用 AJAX）如果需要）如果需要更新内容，必须重载整个网更新内容，必须重载整个网页面页面。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，器进行少量数据交换，AJAX 可以使网页实现异步更新可

32、以使网页实现异步更新。这意味着。这意味着可以可以在不重新加载整个网页的情况下，对网页的某部分进行更新在不重新加载整个网页的情况下，对网页的某部分进行更新。 有很多使用有很多使用 AJAX 的应用程序案例：新浪微博的应用程序案例：新浪微博Google地图、开心地图、开心网等等。网等等。第第1章章 Web前端开发技术综述前端开发技术综述 Page: 45Web前端开发技术前端开发技术清华大学出版社清华大学出版社1.6 1.6 综合案例综合案例第第1章章 Web前端开发技术综述前端开发技术综述 Page: 46Web前端开发技术前端开发技术清华大学出版社清华大学出版社1.6 1.6 综合案例（续）综合案例（续）47 结束语结束语