《web前端概述》PPT课件

计算机与信息工程学院,Web系统前端技术,考核方式,1.平时30%：编程训练：每周都有。综合训练：2次。1次4月份，为校级团体赛作准备。1次期末前，为下学期MITT团体赛作准备。考勤：不定期进行。其它：校级团体赛、课堂练习、提问情况等。2.期末考试70%：暂定闭卷,延续教学安排,答疑和课外辅导（即延续教学安排）面对面答疑17学时：双周的周五3-4节课，工2的4层计算机系机房课后答疑17学时：有问题请及时在BB平台论坛区发帖，因为我每天会浏览多次，肯定及时回帖。,课程资源,BB平台的课程文档目录。,1.1Web概述,Web的起源可以追溯到1980年TimBerners-Lee构建的ENQUIRE项目（详细参见教材第2-3页）。,英国计算机科学家万维网的发明者,1994年10月非赢利性的万维网联盟W3C（WorldWideWebConsortium）在麻省理工学院计算机科学实验室成立。,负责WWW技术标准化的协议制定,Web历史大事记录,Web1.0纪元（1994-2001）Web2.0纪元,HTML5纪元（2009-?）,Web1.0纪元,关键词：网页制作、三剑客、特效300例职业名称：网页设计师、页面仔、搞前台的、网页编辑主要技术：HTML、CSS、Dreamweaver、Fireworks、Flash市场需求：门户网站、企业网站、个人网站,网页作图软件,Web1.0纪元：前端与后端比较,前端与后端人员配比是1:6左右，薪水比是1:2,Web1.0纪元：前端的领域（2003）,FF浏览器：即Firefox,Web2.0纪元,关键词：JavaScript、Ajax、Div+Css、Web标准职业名称：网页制作工程师、前端开发工程师主要技术：HTML、CSS、JavaScript市场需求：互联网公司、IT软件公司等,Web2.0纪元：前端与后端比较,前端与后端人员配比是1:3左右，薪水比是3:4,Web2.0纪元：前端的领域（2009）,2007年，WebKit开源项目催生了面向移动设备的现代Web应用程序，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发。,HTML5纪元,关键词：JavaScript、Ajax、Web标准、HTML5、CSS3、移动Web、多终端适配职业名称：前端开发工程师、全栈工程师主要技术：HTML、CSS、JavaScript、服务端脚本市场需求：互联网公司、IT软件公司、电商、金融、智能硬件,全栈工程师，也叫全端工程师，英文FullStackdeveloper。是指掌握多种技能，并能利用多种技能独立完成产品的人,HTML5纪元：前端与后端比较,前端与后端人员配比是2:3左右，薪水比略大于1:1,HTML5纪元：前端的领域（2014）,前端行业未来发展,云服务微信平台智能硬件移动HTML5HTML5游戏,关于前端技术,作为计算机/软件程专业的一个方向教学目标：培养专业的前端开发工程师必修技能：HTML、CSS、JavaScript扩展技能：HTTP协议前端性能优化网络安全与攻击防范服务端开发（基于Node.js）,Web网页设计的“三剑客”,前端技术的参考书,非常经典,第1讲Web前端开发概述,本讲学习目标,Web前端开发工程师应掌握以下内容：了解Web发展史；了解Web前端开发工程师职业需求掌握Web网站相关的基本概念；理解Web前端开发技术及其在Web网页中的作用；了解常用的Web前端开发工具、浏览器工具，并学会使用。,1.1Web概述,Web特点：（详细参见教材第3-4页）1.Web是易导航和图形化2.Web是具有平台无关性3.Web是支持分布式结构4.Web是具有动态性5.Web是具有交互性,移动应用开发优势,Web工作原理,Web前端开发的三层结构,内容(HTML),外观(CSS),交互(Javascript),Web网页设计的“三剑客”。,HTML是网页信息结构基础；CSS是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施更加精确的控制；JavaScrpt和HTMLDOM是网页行为，实现网页的动态、交互功能。,HTML,HyperTextMarkupLanguage（超文本标记语言）用来描述页面的内容和结构,HTML是构成Web页面(Page)的基础。最新版本是HTML5。,HTML超文本标记语言的发展历史,HTML1.0：1993年6月作为互联网工程工作小组（IETF）工作草案发布；HTML2.0：1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时；HTML3.2：1996年1月14日发布，W3C推荐标准；HTML4.0：1997年12月18日发布，W3C推荐标准；HTML4.01：1999年12月24日发布，W3C推荐标准；HTML5：2008年1月22日发布草案，之后不断完善。2014年10月正式发布。,HTML5终于修成正果,Web网页设计相关概念,统一资源定位符统一资源定位符（UniformResourceLocator，URL）也被称为网页地址，如同在网络上的门牌，是因特网上标准的资源的地址（Address)。协议类型:/服务器地址（端口号）/路径/文件名http:/info.cern.ch/www20/0002,Web网页设计相关概念（续）,网站：在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。网页：构成网站的基本元素。首页：也称主页。即一个网站的入口网页。超链接超链接（HyperLink）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。例如：百科,一个简单的HTML页面,页面标题这是内容,在文本编辑器(例如：SublimeText3)中编写.保存为.html结尾的文件在浏览器（例如：GooleChrome）中打开查看效果,如何编写HTML页面？,htm、html都是静态网页的后缀名。二者没有区别。,HTML标签,HelloWorld!,开始标签,结束标签,HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和开始和结束标签也被称为开放标签和闭合标签,标签嵌套,标题介绍文字,使用-标签定义标题,定义一级标题，定义二级标题，以此类推。标题体现了网页的文档结构。使用标签定义一个段落。是一个块级元素。这意味着它的内容自动地开始一个新行。,页面编码,META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的和之间（有些也不是在和之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。如果是UTF8编码，则在外国人的英文IE上也能显示中文，他们无需下载IE的中文语言支持包。,属性,点击这里,属性,属性值,定义超链接href=链接目标的URL(即web页的地址)title=锚文字target=_blank转到空白页,HTML注释,xxxxxx代表你要写的注释内容，注释不会在浏览器中显示。,/和/*/在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用！,结构,等媒体,等,HTML5新标签,表单类型email,range,url,date,time,datetime,number,search等验证required,pattern其它placeholder,HTML5新增表单属性,不同的浏览器对于HTML标准支持程度不同查看浏览器支持情况可以访问如下网址：,浏览器兼容性,清楚了解每一个标签和属性的语义HTML中只描述内容和结构，样式留给CSS手写HTML，避免使用生成工具推荐2个HTML学习的参考网址：HTML:TheLivingStandardHTMLTutorials,如何学习HTML？,CSS,层叠样式表CSS（CascadingStyleSheet）级联样式表1.CSS作用可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。,CSS（续）,2.CSS发展历史CSS1:1996年12月17日发布，W3C推荐标准，1999年1月11日重新修订；CSS2：1999年1月11日发布，W3C推荐标准，CSS2添加了对媒介（打印机和听觉设备）、可下载字体的支持；CSS3：将CSS划分为更小的模块，这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。,JavaScript,JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。1.JavaScript由来JavaScript最初由网景公司（Netscape）的BrendanEich设计，是一种由Netscape的LiveScript发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。2.JavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的：核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM）,JavaScript案例,HTMLDOM,HTMLDOM是DocumentObjectModel文档对象模型DOM结构：以层次结构组织节点或信息片段（教材第13页的例1-3-3的网页就展示了这样的一个目录树型结构）。,AJAX,AJAX即“AsynchronousJavascript+XML”（异步Ja