web前端概述分析

第1章Web前端开发技术综述Page:1Web前端开发技术清华大学出版社第1章Web前端开发技术综述Page:2Web前端开发技术清华大学出版社考核方式1.平时30%：编程训练：每周都有。综合训练：2次。1次4月份，为校级团体赛作准备。1次期末前，为下学期MITT团体赛作准备。考勤：不定期进行。其它：校级团体赛、课堂练习、提问情况等。2.期末考试70%：暂定闭卷第1章Web前端开发技术综述Page:3Web前端开发技术清华大学出版社延续教学安排答疑和课外辅导（即延续教学安排）面对面答疑17学时：双周的周五3-4节课，工2的4层计算机系机房课后答疑17学时：有问题请及时在BB平台论坛区发帖，因为我每天会浏览多次，肯定及时回帖。第1章Web前端开发技术综述Page:4Web前端开发技术清华大学出版社课程资源BB平台的课程文档目录。第1章Web前端开发技术综述Page:5Web前端开发技术清华大学出版社1.1Web概述Web的起源可以追溯到1980年TimBerners-Lee构建的ENQUIRE项目（详细参见教材第2-3页）。英国计算机科学家万维网的发明者1994年10月非赢利性的万维网联盟W3C（WorldWideWebConsortium）在麻省理工学院计算机科学实验室成立。负责前端开发技术清华大学出版社Web历史大事记录Web1.0纪元（1994-2001）Web2.0纪元HTML5纪元（2009-?）第1章Web前端开发技术综述Page:7Web前端开发技术清华大学出版社Web1.0纪元关键词：•网页制作、三剑客、特效300例职业名称：•网页设计师、页面仔、搞前台的、网页编辑主要技术：•HTML、CSS、Dreamweaver、Fireworks、Flash市场需求：•门户网站、企业网站、个人网站网页作图软件第1章Web前端开发技术综述Page:8Web前端开发技术清华大学出版社Web1.0纪元：前端与后端比较前端与后端人员配比是1:6左右，薪水比是1:2第1章Web前端开发技术综述Page:9Web前端开发技术清华大学出版社Web1.0纪元：前端的领域（2003）FF浏览器：即Firefox第1章Web前端开发技术综述Page:10Web前端开发技术清华大学出版社Web2.0纪元关键词：•JavaScript、Ajax、Div+Css、Web标准职业名称：•网页制作工程师、前端开发工程师主要技术：•HTML、CSS、JavaScript市场需求：•互联网公司、IT软件公司等第1章Web前端开发技术综述Page:11Web前端开发技术清华大学出版社Web2.0纪元：前端与后端比较前端与后端人员配比是1:3左右，薪水比是3:4第1章Web前端开发技术综述Page:12Web前端开发技术清华大学出版社Web2.0纪元：前端的领域（2009）2007年，WebKit开源项目催生了面向移动设备的现代Web应用程序，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发。第1章Web前端开发技术综述Page:13Web前端开发技术清华大学出版社HTML5纪元关键词：•JavaScript、Ajax、Web标准、HTML5、CSS3、移动Web、多终端适配职业名称：•前端开发工程师、全栈工程师主要技术：•HTML、CSS、JavaScript、服务端脚本市场需求：•互联网公司、IT软件公司、电商、金融、智能硬件……全栈工程师，也叫全端工程师，英文FullStackdeveloper。是指掌握多种技能，并能利用多种技能独立完成产品的人第1章Web前端开发技术综述Page:14Web前端开发技术清华大学出版社HTML5纪元：前端与后端比较前端与后端人员配比是2:3左右，薪水比略大于1:1第1章Web前端开发技术综述Page:15Web前端开发技术清华大学出版社HTML5纪元：前端的领域（2014）第1章Web前端开发技术综述Page:16Web前端开发技术清华大学出版社前端行业未来发展云服务微信平台智能硬件移动HTML5HTML5游戏第1章Web前端开发技术综述Page:17Web前端开发技术清华大学出版社关于前端技术作为计算机/软件程专业的一个方向教学目标：培养专业的前端开发工程师必修技能：HTML、CSS、JavaScript扩展技能：•HTTP协议•前端性能优化•网络安全与攻击防范•服务端开发（基于Node.js）Web网页设计的“三剑客”第1章Web前端开发技术综述Page:18Web前端开发技术清华大学出版社前端技术的参考书非常经典第1章Web前端开发技术综述Page:19Web前端开发技术清华大学出版社第1讲Web前端开发概述第1章Web前端开发技术综述Page:20Web前端开发技术清华大学出版社本讲学习目标Web前端开发工程师应掌握以下内容：了解Web发展史；了解Web前端开发工程师职业需求掌握Web网站相关的基本概念；理解Web前端开发技术及其在Web网页中的作用；了解常用的Web前端开发工具、浏览器工具，并学会使用。第1章Web前端开发技术综述Page:21Web前端开发技术清华大学出版社1.1Web概述Web特点：（详细参见教材第3-4页）1.Web是易导航和图形化2.Web是具有平台无关性3.Web是支持分布式结构4.Web是具有动态性5.Web是具有交互性移动应用开发优势第1章Web前端开发技术综述Page:22Web前端开发技术清华大学出版社Web工作原理第1章Web前端开发技术综述Page:23Web前端开发技术清华大学出版社Web前端开发的三层结构Web网页设计的“三剑客”。1.HTML是网页信息结构基础；2.CSS是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施更加精确的控制；3.JavaScrpt和HTMLDOM是网页行为，实现网页的动态、交互功能。第1章Web前端开发技术综述Page:24Web前端开发技术清华大学出版社HTMLHyperTextMarkupLanguage（超文本标记语言）用来描述页面的内容和结构HTML是构成Web页面(Page)的基础。最新版本是HTML5。第1章Web前端开发技术综述Page:25Web前端开发技术清华大学出版社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终于修成正果第1章Web前端开发技术综述Page:26Web前端开发技术清华大学出版社Web网页设计相关概念统一资源定位符统一资源定位符（UniformResourceLocator，URL）也被称为网页地址，如同在网络上的门牌，是因特网上标准的资源的地址（Address)。协议类型://服务器地址（端口号）/路径/文件名://序号服务（协议）类型含义1http超文本传输协议资源2https用加密传送的超文本传输协议3ftp文件传输协议4mailto电子邮件地址5ldap轻型目录访问协议搜索6newsUsenet新闻组7file本地电脑或网上分享的文件8gopherGopher协议第1章Web前端开发技术综述Page:27Web前端开发技术清华大学出版社Web网页设计相关概念（续）网站：在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。网页：构成网站的基本元素。首页：也称主页。即一个网站的入口网页。超链接超链接（HyperLink）是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。例如：ahref=百科/a第1章Web前端开发技术综述Page:28Web前端开发技术清华大学出版社一个简单的HTML页面!doctypehtmlhtmlheadmetacharset=UTF-8title页面标题/title/headbodyh1这是内容/h1/body/html第1章Web前端开发技术综述Page:29Web前端开发技术清华大学出版社在文本编辑器(例如：SublimeText3)中编写.保存为.html结尾的文件在浏览器（例如：GooleChrome）中打开查看效果如何编写HTML页面？htm、html都是静态网页的后缀名。二者没有区别。第1章Web前端开发技术综述Page:30Web前端开发技术清华大学出版社HTML标签pHelloWorld!/p开始标签结束标签HTML标签是由尖括号包围的关键词，比如htmlHTML标签通常是成对出现的，比如b和/b开始和结束标签也被称为开放标签和闭合标签第1章Web前端开发技术综述Page:31Web前端开发技术清华大学出版社标签嵌套divh1标题/h1p介绍文字/p/div使用h1-h6标签定义标题,h1定义一级标题，h2定义二级标题，以此类推。标题体现了网页的文档结构。使用p标签定义一个段落。div是一个块级元素。这意味着它的内容自动地开始一个新行。第1章Web前端开发技术综述Page:32Web前端开发技术清华大学出版社页面编码metacharset=UTF-8META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的head和title之间（有些也不是在head和title之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。如果是UTF8编码，则在外国人的英文IE上也能显示中文，他们无需下载IE的中文语言支持包。第1章Web前端开发技术综述Page:33Web前端开发技术清华大学出版社属性ahref=点击这里/a属性属性值a定义超链接href=链接目标的URL(即web页的地址)title=锚文字target=_blank{转到空白页}第1章Web前端开发技术综述Page:34Web前端开发技术清华大学出版社HTML注释!--xxxxxxxx--xxxxxx代表你要写的注释内容，注释不会在浏览器中显示。//和/**/在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用！第1章Web前端开发技术综述Page:35Web前端开发技术清华大学出版社结构‾header,footer,nav,article,main,aside等媒体‾figure,audio,video等HTML5新标签第1章Web前端开发技术综述Page:36Web前端开发技术清华大学出版社表单类型‾email,range,url,date,time,datetime,number,search等验证‾required,pattern其它‾p