web前端概述课件.ppt

1、1学习交流PPT考核方式2学习交流PPT延续教学安排 答疑和课外辅导（即延续教学安排） 面对面答疑17学时：双周的周五3-4节课，工2的4层计算机系机房 课后答疑17学时：有问题请及时在BB平台论坛区发帖，因为我每天会浏览多次，肯定及时回帖。3学习交流PPT课程资源4学习交流PPT1.1 Web概述 Web的起源可以追溯到1980年Tim Berners-Lee构建的ENQUIRE项目（ 详细参见教材第2-3页）。英国计算机科学家万维网的发明者19941994年年1010月非赢利性的月非赢利性的万维网联盟万维网联盟W3CW3C（World Wide Web ConsortiumWorld Wi

2、de Web Consortium）在麻）在麻省理工学院计算机科学实验室成立。省理工学院计算机科学实验室成立。负责负责WWWWWW技术标准化的协议制定技术标准化的协议制定5学习交流PPTWeb历史大事记录Web 1.0 纪元（纪元（1994-2001） Web 2.0 纪纪元元HTML5 纪元（纪元（2009-?）6学习交流PPTWeb1.0纪元n 关键词：关键词： 网页制作、三剑客、特效网页制作、三剑客、特效300300例例n 职业名称：职业名称： 网页设计师、页面仔、搞前台的、网页编辑网页设计师、页面仔、搞前台的、网页编辑n 主要技术：主要技术： HTMLHTML、CSSCSS、Dream

3、weaverDreamweaver、FireworksFireworks、FlashFlashn 市场需求：市场需求： 门户网站、企业网站、个人网站门户网站、企业网站、个人网站网页作图软件网页作图软件7学习交流PPTWeb1.0纪元：前端与后端比较n 前端与后端人员配比是前端与后端人员配比是1:61:6左右，薪水比是左右，薪水比是1:21:28学习交流PPTWeb1.0纪元：前端的领域（2003）FF浏览器：即Firefox9学习交流PPTWeb2.0纪元n 关键词：关键词： JavaScriptJavaScript、AjaxAjax、Div+CssDiv+Css、WebWeb标准标准n 职业

4、名称：职业名称： 网页制作工程师、前端开发工程师网页制作工程师、前端开发工程师n 主要技术：主要技术： HTMLHTML、CSSCSS、JavaScriptJavaScriptn 市场需求：市场需求： 互联网公司、互联网公司、ITIT软件公司等软件公司等10学习交流PPTWeb2.0纪元：前端与后端比较n 前端与后端人员配比是前端与后端人员配比是1:31:3左右，薪水比是左右，薪水比是3:43:411学习交流PPTWeb2.0纪元：前端的领域（2009）2007年，WebKit开源项目催生了面向移动设备的现代 Web 应用程序，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发

5、。12学习交流PPTHTML5 纪元n 关键词：关键词： JavaScriptJavaScript、AjaxAjax、WebWeb标准、标准、HTML5HTML5、CSS3CSS3、移动、移动WebWeb、多终端适配多终端适配n 职业名称：职业名称： 前端开发工程师、全栈工程师前端开发工程师、全栈工程师n 主要技术：主要技术： HTMLHTML、CSSCSS、JavaScriptJavaScript、服务端脚本、服务端脚本n 市场需求：市场需求： 互联网公司、互联网公司、ITIT软件公司、电商、金融、智能硬件软件公司、电商、金融、智能硬件全栈工程师，也叫全端工程全栈工程师，也叫全端工程师，英文

6、师，英文Full Stack Full Stack developerdeveloper。是指掌握多种。是指掌握多种技能，并能利用多种技能独技能，并能利用多种技能独立完成产品的人立完成产品的人13学习交流PPTHTML5 纪元：前端与后端比较n 前端与后端人员配比是前端与后端人员配比是2:32:3左右，薪水比略大于左右，薪水比略大于1:11:114学习交流PPTHTML5 纪元：前端的领域（2014）15学习交流PPT前端行业未来发展n 云服务云服务n 微信平台微信平台n 智能硬件智能硬件n 移动移动HTML5HTML5n HTML5HTML5游戏游戏16学习交流PPT关于前端技术n 作为计算

7、机作为计算机/ /软件程专业的一个方向软件程专业的一个方向n 教学目标：培养专业的前端开发工程师教学目标：培养专业的前端开发工程师n 必修技能：必修技能：HTMLHTML、CSSCSS、JavaScriptJavaScriptn 扩展技能：扩展技能： HTTPHTTP协议协议 前端性能优化前端性能优化 网络安全与攻击防范网络安全与攻击防范 服务端开发（基于服务端开发（基于Node.jsNode.js）WebWeb网页设计的网页设计的“三剑客三剑客”17学习交流PPT前端技术的参考书非常经典非常经典18学习交流PPT第第1 1讲讲 WebWeb前端开发概述前端开发概述19学习交流PPT本讲学习目

8、标Web前端开发工程师应掌握以下内容： 了解Web发展史； 了解Web前端开发工程师职业需求 掌握Web网站相关的基本概念； 理解Web前端开发技术及其在Web网页中的作用； 了解常用的Web前端开发工具、浏览器工具，并学会使用。20学习交流PPT1.1 Web概述Web特点： （ 详细参见教材第3-4页）1.Web是易导航和图形化 2.Web是具有平台无关性3.Web是支持分布式结构4.Web是具有动态性5.Web是具有交互性移动应用开发优势移动应用开发优势21学习交流PPTWeb工作原理22学习交流PPTWeb前端开发的三层结构内容(HTML)外观(CSS)交互(Javascript)We

9、bWeb网页设计的网页设计的“三剑客三剑客”。1.1. HTMLHTML是网页信息结构基础；是网页信息结构基础；2.2. CSSCSS是网页表现技术，对网页布局、是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施字体、颜色、背景和其它效果实施更加精确的控制；更加精确的控制；3.3. JavaScrptJavaScrpt和和HTMLDOMHTMLDOM是网页行为，是网页行为，实现网页的动态、交互功能。实现网页的动态、交互功能。23学习交流PPTHTMLH Hyper yper T Text ext M Markup arkup L Languageanguage（超文本标记语言）（超文本

10、标记语言）用来描述页面的用来描述页面的内容内容和和结构结构 HTMLHTML是构成是构成WebWeb页面页面(Page)(Page)的基础。最新版本是的基础。最新版本是HTML5HTML5。24学习交流PPTHTML超文本标记语言的发展历史HTML5HTML5终于修成正果终于修成正果25学习交流PPTWeb网页设计相关概念 统一资源定位符 统一资源定位符（Uniform Resource Locator，URL）也被称为网页地址，如同在网络上的门牌，是因特网上标准的资源的地址（Address)。 协议类型:/服务器地址（端口号）/路径/文件名 序号序号服务（协议）类服务（协议）类型型含义含义1

11、 1http超文本传输协议资源超文本传输协议资源2 2https用加密传送的超文本传用加密传送的超文本传输协议输协议3 3ftp文件传输协议文件传输协议4 4mailto电子邮件地址电子邮件地址5 5ldap轻型目录访问协议搜索轻型目录访问协议搜索6 6newsUsenet新闻组新闻组7 7file本地电脑或网上分享的本地电脑或网上分享的文件文件8 8gopherGopher协议协议26学习交流PPTWeb网页设计相关概念（续） 网站：在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 网页：构成网站的基本元素。 首页：也称主页。即一个网站的入口网页。 超链

12、接 超链接（Hyper Link）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。 例如：百科27学习交流PPT一个简单的HTML页面28学习交流PPT 在文本编辑器(例如：Sublime Text3)中编写. 保存为.html结尾的文件 在浏览器（例如：Goole Chrome）中打开查看效果如何编写HTML页面？htmhtm、htmlhtml都是静态网页的后缀名。都是静态网页的后缀名。二者

13、没有区别。二者没有区别。29学习交流PPTHTML标签Hello World!开始标签开始标签结束标签结束标签 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 开始和结束标签也被称为开放标签和闭合标签30学习交流PPT标签嵌套标题介绍文字 使用-标签定义标题, 定义一级标题，定义二级标题，以此类推。标题体现了网页的文档结构。 使用标签定义一个段落。 是一个块级元素。这意味着它的内容自动地开始一个新行。31学习交流PPT页面编码 META META标签是标签是HTMLHTML标记标记HEADHEAD区的一个关键标签区的一个关键标签，它位于，它位于HTMLHT

14、ML文档的文档的和和之间（有些也不是在之间（有些也不是在和和之间）。它提供之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。的信息虽然用户不可见，但却是文档的最基本的元信息。 除了提供文档字符集、使用语言除了提供文档字符集、使用语言、作者等基本信息外，还涉、作者等基本信息外，还涉及对关键词和网页等级的设定。及对关键词和网页等级的设定。 如果是如果是UTF8UTF8编码编码，则在外国人的英文，则在外国人的英文IEIE上也能显示中文，他们无需上也能显示中文，他们无需下载下载IEIE的中文语言支持包。的中文语言支持包。32学习交流PPT属性 点击这里属性属性属性值属性值定义超链接定义超

15、链接href=链接目标的链接目标的 URL(即即web页的地址页的地址)title=锚文字锚文字target=_blank 转到空白页转到空白页33学习交流PPTHTML注释 xxxxxx代表你要写的注释内容，注释不会在代表你要写的注释内容，注释不会在浏览器中显示。浏览器中显示。/和和/ /* * * */ /在在htmlhtml里也是常用的注释，但只能用在里也是常用的注释，但只能用在jsjs和和CSSCSS语言语言, ,不对不对HTMLHTML语言起作用！语言起作用！34学习交流PPT 结构 , , , , , 等 媒体 , , 等HTML 5 新标签35学习交流PPT 表单类型 email

16、, range, url, date, time, datetime, number, search等 验证 required, pattern 其它 placeholderHTML 5 新增表单属性36学习交流PPT 不同的浏览器对于HTML标准支持程度不同l查看浏览器支持情况可以访问如下网址：浏览器兼容性37学习交流PPT 清楚了解每一个标签和属性的语义 HTML中只描述内容和结构，样式留给CSS 手写HTML，避免使用生成工具 推荐2个HTML学习的参考网址： HTML: The Living Standard HTML Tutorials如何学习HTML？38学习交流PPTCSS 层叠

17、样式表CSS（Cascading Style Sheet）级联样式表 1.CSS作用 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制 。39学习交流PPTCSS（续）40学习交流PPTJavaScript JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。 1.JavaScript由来 JavaScript最初由网景公司（Netscape）的Brendan Eich设计，是一种由Netscape的LiveScript发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。

18、 2.JavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM） 41学习交流PPTJavaScript案例42学习交流PPTHTML DOM HTML DOM是Document Object Model文档对象模型 DOM结构：以层次结构组织节点或信息片段（教材第13页的例1-3-3的网页就展示了这样的一个目录树型结构）。43学习交流PPTAJAX AJAX即“Asynchronous Javascript + XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 有很多使用 AJAX 的应用程序案例：新浪微博Google地图、开心网等等。44学习交流PPT1.6 综合案例45学习交流PPT1.6 综合案例（续）46学习交流PPT