web前端概述总结

1、计算机与信息工程学院,Web系统前端技术,考核方式,1. 平时30%： 编程训练：每周都有。 综合训练：2次。1次4月份，为校级团体赛作准备。1次期末前，为下学期MITT团体赛作准备。 考勤：不定期进行。 其它：校级团体赛、课堂练习、提问情况等。 2 . 期末考试70%： 暂定闭卷,延续教学安排,答疑和课外辅导（即延续教学安排） 面对面答疑17学时：双周的周五3-4节课，工2的4层计算机系机房 课后答疑17学时：有问题请及时在BB平台论坛区发帖，因为我每天会浏览多次，肯定及时回帖。,课程资源,BB平台的课程文档目录。,1.1 Web概述,Web的起源可以追溯到1980年Tim Berners-

2、Lee构建的ENQUIRE项目（ 详细参见教材第2-3页）。,英国计算机科学家 万维网的发明者,1994年10月非赢利性的万维网联盟W3C（World Wide Web Consortium）在麻省理工学院计算机科学实验室成立。,负责WWW技术标准化的协议制定,Web历史大事记录,Web 1.0 纪元（1994-2001） Web 2.0 纪元,HTML5 纪元（2009-?）,Web1.0纪元,关键词： 网页制作、三剑客、特效300例 职业名称： 网页设计师、页面仔、搞前台的、网页编辑 主要技术： HTML、CSS、Dreamweaver、Fireworks、Flash 市场需求： 门户网站

3、、企业网站、个人网站,网页作图软件,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开源项目催生了面向移动设备的现代 We

4、b 应用程序，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发。,HTML5 纪元,关键词： JavaScript、Ajax、Web标准、HTML5、CSS3、移动Web、多终端适配 职业名称： 前端开发工程师、全栈工程师 主要技术： HTML、CSS、JavaScript、服务端脚本 市场需求： 互联网公司、IT软件公司、电商、金融、智能硬件,全栈工程师，也叫全端工程师，英文Full Stack developer。是指掌握多种技能，并能利用多种技能独立完成产品的人,HTML5 纪元：前端与后端比较,前端与后端人员配比是2:3左右，薪水比略大于1:1,HTML5 纪元：前端

5、的领域（2014）,前端行业未来发展,云服务 微信平台 智能硬件 移动HTML5 HTML5游戏,关于前端技术,作为计算机/软件程专业的一个方向 教学目标：培养专业的前端开发工程师 必修技能：HTML、CSS、JavaScript 扩展技能： HTTP协议 前端性能优化 网络安全与攻击防范 服务端开发（基于Node.js）,Web网页设计的“三剑客”,前端技术的参考书,非常经典,第1讲 Web前端开发概述,本讲学习目标,Web前端开发工程师应掌握以下内容： 了解Web发展史； 了解Web前端开发工程师职业需求 掌握Web网站相关的基本概念； 理解Web前端开发技术及其在Web网页中的作用； 了

6、解常用的Web前端开发工具、浏览器工具，并学会使用。,1.1 Web概述,Web特点： （ 详细参见教材第3-4页） 1.Web是易导航和图形化 2.Web是具有平台无关性 3.Web是支持分布式结构 4.Web是具有动态性 5.Web是具有交互性,移动应用开发优势,Web工作原理,Web前端开发的三层结构,内容 (HTML),外观 (CSS),交互(Javascript),Web网页设计的“三剑客”。,HTML是网页信息结构基础； CSS是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施更加精确的控制； JavaScrpt和HTMLDOM是网页行为，实现网页的动态、交互功能。,HTM

7、L,Hyper Text Markup Language （超文本标记语言） 用来描述页面的内容和结构,HTML是构成Web页面(Page)的基础。最新版本是HTML5。,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

8、：2008年1月22日发布草案，之后不断完善。2014年10月正式发布。,HTML5终于修成正果,Web网页设计相关概念,统一资源定位符 统一资源定位符（Uniform Resource Locator，URL）也被称为网页地址，如同在网络上的门牌，是因特网上标准的资源的地址（Address)。 协议类型:/服务器地址（端口号）/路径/文件名 http:/info.cern.ch/www20/0002 ,Web网页设计相关概念（续）,网站：在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。 网页：构成网站的基本元素。 首页：也称主页。即一个网站的入口网页。

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

10、 World!,开始标签,结束标签,HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 开始和结束标签也被称为开放标签和闭合标签,标签嵌套, 标题 介绍文字 ,使用-标签定义标题, 定义一级标题，定义二级标题，以此类推。标题体现了网页的文档结构。 使用标签定义一个段落。 是一个块级元素。这意味着它的内容自动地开始一个新行。,页面编码,META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的和之间（有些也不是在和之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。 除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等

11、级的设定。 如果是UTF8编码，则在外国人的英文IE上也能显示中文，他们无需下载IE的中文语言支持包。,属性, 点击这里 ,属性,属性值,定义超链接 href=链接目标的 URL(即web页的地址) title=锚文字 target=_blank 转到空白页,HTML注释, xxxxxx代表你要写的注释内容，注释不会在浏览器中显示。,/和/* */在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用！,结构 , , , , , 等 媒体 , , 等,HTML 5 新标签,表单类型 email, range, url, date, time, datetime, num

12、ber, search等 验证 required, pattern 其它 placeholder,HTML 5 新增表单属性,不同的浏览器对于HTML标准支持程度不同 查看浏览器支持情况可以访问如下网址： ,浏览器兼容性,清楚了解每一个标签和属性的语义 HTML中只描述内容和结构，样式留给CSS 手写HTML，避免使用生成工具 推荐2个HTML学习的参考网址： HTML: The Living Standard HTML Tutorials,如何学习HTML？,CSS,层叠样式表CSS（Cascading Style Sheet）级联样式表 1.CSS作用 可以有效地对页面的布局、字体、颜色、

13、背景和其它效果实现更加精确的控制 。,CSS（续）,2.CSS发展历史 CSS1: 1996年12月17日发布，W3C推荐标准，1999年1月11日重新修订； CSS2：1999年1月11日发布，W3C推荐标准，CSS2添加了对媒介（打印机和听觉设备）、可下载字体的支持； CSS3：将 CSS 划分为更小的模块，这些模块包括：盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。,JavaScript,JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃元素和更加精彩的内容。 1.JavaScript由来 Jav

14、aScript最初由网景公司（Netscape）的Brendan Eich设计，是一种由Netscape的LiveScript发展而来的客户端脚本语言，主要目的是为了解决服务器端语言，提供数据验证的基本功能。 2.JavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的： 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM）,JavaScript案例,HTML DOM,HTML DOM是Document Object Model文档对象模型 DOM结构：以层次结构组织节点或信息片段（教材第13页的例1-3-3的网页就展示了这样的一个目录树型结构）。,AJAX,AJAX即“Asynchronous Javascript + XML”（异步J