《Web前端技术培训课件.ppt》由会员分享，可在线阅读，更多相关《Web前端技术培训课件.ppt（123页珍藏版）》请在三一办公上搜索。
1、中国移动通信集团黑龙江有限公司2015.13,Web 前端技术培训,什么是 Web 前端,Web 系统,服务器,客户端,客户端,客户端,客户端,Web 前端三要素,HTML,CSS,JavaScript,课程大纲,HTML CSS JavaScript,第一部分HTML 和 CSS,HTML 标签开发工具超链接CSS 选择器颜色盒模式图片,HTML 和 CSS 学习大纲,字体表单表格浮动定位iframe搜索引擎优化,HTML 和 CSS 学习大纲,01 - HTML 标签,使用 HTML 标签组织网页结构,标题标签 heading tag： 段落标签 paragraph： 无序列表 unord
2、ered list： 列表项 list item：有序列表 ordered list：,W3C,万维网联盟： The World Wide Web Consortium,创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C已发布了200多项影响深远的Web技术标准及实施指南如HTML、CSS、WCAG等。,把所有显示在网页中的内容放入body标签网页中的不可见部分放入head标签中将所有 HTML 代码放入 标签中DOCTYPE：表示 HTML 的版本信息,使用网页基本结构标签组织整个页面,HTML 和 CSS 学习大纲,02 - 开发工具,UltraEdit、E
3、ditPlus：代码颜色、多文件编辑Dreamweaver、Sublime、WebStorm：神器,常用开发工具介绍,官方下载地址： http:/,WebStorm 的安装、启动、配置和使用,HTML 和 CSS 学习大纲,03 - 超链接,在浏览器中输入URL时发生了什么,https:/,服务器,请求request,响应response,/news,点击超链接，连接中有一个文件请求被发送给服务器,在浏览器中点击超链接时发生了什么,https:/,1,浏览器,请求 request,服务器,/resources,/news,服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件,在浏览器中点击超
4、链接时发生了什么,https:/,2,浏览器,响应response,新的页面地址,服务器,/resources,/news,标签：网页中可点击的超链接href 属性：超链接指向的URL地址（hypertext reference）target 属性：当超链接被点击的时候，新页面打开的位置,如何制作超链接,_blank：在浏览器的新标签或新窗口中打开页面,_self：在当前窗口中打开页面，替换原来的页面,如果不添加 target 属性，那么默认值是 _self,绝对路径向一个特定的服务器上的文件发送请求,绝对路径、相对路径和根路径,HTML,相对路径不指定服务器，参照发送请求页面的URL,HTM
5、L,根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名,HTML,04 CSS选择器,HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开,将内容和样式分离,HTML,内容和样式分离：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子,Cascading Style Sheets 层叠样式表,选择器：可以选择html标签类型选择器：不带尖括号的标签名派生选择器：作用在某些标签的子标签上,选择器,添加CSS样式的位置：在head标签中添加style子标签使用标签将CSS和所有的html文件关联在一起,把样式表放在什么地方？,
6、W3Schoolhttp:/,参考手册,05 颜色,black,#FF0000,CSS颜色,红色,黑色,黄色,关键字颜色,十六进制颜色,rgb颜色,每个十六进制颜色由三部分组成,十六进制色（Hexadecimal colors）,#FFFF00,红色的多少,绿色的多少,蓝色的数量,取值范围：16进制的00-FF，10进制的0-255,使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值,网页的颜色,256256256 = 16777216,06 盒模式,在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。,盒,HTML,margin,border
7、,padding,内容区域 content area内容区域中包含的是盒子中真正的内容（文本、图片等）补白 或内边距 paddingpadding包围在内容区域的边缘，上右下左边框 borderborder包围在padding的边缘，上右下左边距 marginmargin包围在border的上右下左四个边缘,盒模式,width：宽height：高border：边框padding：内补白margin：外边距display：显示,盒模式相关属性,计算盒子的尺寸属性设置的更多形式,margin,border,padding,block、inline、inline-block、none,display
8、属性,div布局入门,div,div,div,div,07 图片,网页中出现的大部分图片都属于以下这三种类型内容图片布局图片用户交互图片,三种网页图片,标签,创建内容图片,src 属性：图片的路径alt 属性：图片的简单描述可访问性：搜索引擎、屏幕阅读器,HTML,使用CSS中的background属性background-colorbackground-imagebackground-repeatbackground-position,创建布局图片,图片精灵 sprite：把小图标放在同一个文件中，提高性能用户交互图片很多都是小图标，适合使用用户交互图片,图片精灵,JPEG、PNG和GIF,
9、复杂颜色的图像和照片则要使用JPEG格式动态图像要使用GIF格式PNG格式的透明图片要比GIF格式的更平滑这三种图像相对于其他格式的图像文件比较小，适合Web页面,Web上最常用的三种图像格式,08 字体,CSS,可以指定和改变字体外观的常用CSS属性,使用CSS改变字体,CSS,font-style,font-weight,font-size,line-height,font-family,CSS,使用字体列表,优先使用的字体,备用自体,通用字体系列,通用字体系列,无衬线字体笔画粗细一致,有衬线字体笔画末端有装饰性的线条或凸起,通用字体系列,等宽字体每个字母宽度一致用于显示软件代码示例,手写
10、体,装饰性字体设计感较强,09 表单,表单的工作方式,http:/,hp、jsp、node.js等等,服务器,脚本,用户名：Helen密码：*是否自动登录,处理数据,表单的工作方式,http:/,HTML,服务器,hp、jsp、node.js等等,脚本,处理数据,用户名：Helen密码：*是否自动登录,美食网表单,10 表格,要创建一个最简单的表格，至少需要三个标签table：表格标签tr：表格行标签，table rowtd：数据单元格标签，table data,表格基本标签,table,tr,td,标签table、tr、td、ththead、tbody、tfootcaption合并单元格属性
11、colspan：跨列单元格rowspan：跨行单元格,制作一个表格,11 浮动,浏览器在页面上摆放HTML元素所用的方法,文档流,h1,h2,p,p,块元素的文档流,浏览器在页面上摆放HTML元素所用的方法,文档流,label,input,a,img,内联元素的文档流,img,float 属性：left | right浮动元素的特点默认宽度是内容的宽度向指定方向移动，排在前一个浮动元素的旁边，浮动在后面的元素的上面半脱离文档流,浮动,clear 属性添加空元素定义 clearfix 类,清除浮动的几种方法,12 定位,osition 属性：static（默认值） | relative | ab
12、solute | fixed精确控制标签在HTML文档中的位置（对static不起作用）top、right、bottom、left,定位,定位,static：默认值元素在正常的文档流中显示,absolute：绝对定位宽度是内容的宽度脱离文档流，后面的元素会忽视绝对定位元素的存在参照物为第一个定位祖先，如果没有定位祖先则参照物是html元素,relative：相对定位在正常文档流中显示，相对于原来位置偏移参照物是元素本身通常作为绝对定位元素的参照物,fixed：固定定位宽度为内容的宽度，脱离文档流参照物是浏览器窗口，固定不动,z-index,z-index: 9;,z-index: 1;,z-i
13、ndex,13 iframe,HTML,iframe：内联框架，在网页中任意的位置嵌入另一个网页,iframe,绝对路径或相对路径,14 搜索引擎优化,HTML,使用meta标签提高搜索排名,多使用标题标签： 添加img标签的alt属性：一些标签的title属性：,优化HTML文档,HTML,HTML,第二部分JavaScript,JavaScript 历史,Brendan Eich,为了解决浏览器与用户交互的问题，用了 10 天时间设计了JavaScript语言,借鉴C的基本语法借鉴Java的数据类型和内存管理借鉴Scheme的函数式编程借鉴Self的基于原型的继承机制,1995年：Java
14、Script 1.0,ECMAScript,1997年6月：JavaScript 1.11998年6月：ECMAScript 21999年12月：ECMAScript 32009年12月：ECMAScript 5（从IE10开始完美支持）2015年6月：ECAMAScript 6,ECMAScript 1,ECMAScript 2015,European Computer Manufactures Association欧洲计算机制造联合会,JavaScript 学习大纲,快速入门函数宿主对象DOM,表单面向对象编程内置对象AJAX,HTML 和 CSS 学习大纲,01 快速入门,第一个程序：
15、 和 alert()JavaScript的工作方式：中和中标签中 和 内联事件中JavaScript是一门解释型语言控制台输出：console.log();,准备工作,语句多条语句可以写在同一行，也可以写在不同的行中同一行中的两条语句之间要用分号分隔不同行中的语句末尾可以不用分号，建议使用分号注释：注释是给开发人员看到，JavaScript引擎会自动忽略单行： /注释内容 可以独立成行，可以在行尾多行： /* 注释内容 */ 可以独立，可以在行中，不可以嵌套,基本语法,变量的声明：var变量的定义：=变量的使用：不要使用引号,变量,区分大小写MOOD 和 mood 是不同的变量变量名只允许包含
16、字母、数字、美元符号、下划线如：my mood = happy; 不合法第一个字符不能是数字如：2mood = happy; 不合法变量名不能使用关键字和保留字如：alert，if，class 都是不合法的变量名命名规范：首写字母小写mood、myMood 或 my_mood 的形式,变量的命名规则,可以不使用var声明变量是JavaScript的设计缺陷ES5中的严格模式启用严格模式：在JavaScript代码第一行写上use strict,严格模式,JS,JavaScript：弱类型语言，可以在任何阶段改变数据类型字符串数值布尔值undefined、null对象函数,数据类型,由零和或多个
17、字符构成，必须写在引号里可以使用单引号或双引号使用转义字符：注意：不管使用双引号还是单引号，请在脚本中保持一致多行字符串,字符串 String,JavaScript不区分整数和浮点数以下都是合法的number类型,数值 number,JS,两个可选值：true 或 false,布尔值 boolean,JS,undefined：未定义null：空,undefined 和 null,数组是一组按顺序排列的集合，集合的每个值称为元素可以使用 定义数组数组的元素可以通过索引来访问通过length属性访问数组的长度,数组 Array,JavaScript的对象是一组由属性-值组成的无序集合可以使用 定义
18、对象对象的属性都是字符串类型，可以写引号，也可以不写对象的值可以是任意数据类型使用 . 属性名或 属性名 运算符访问对象的属性,对象 Object,条件判断语句：if、switch循环迭代语句：while、do-while、for、for-in流程跳转语句：break、continue,结构控制语句,布尔环境的类型转换,算数运算（+、-、*、/、%、+、-）关系运算（、=、）赋值运算（=、 +=、-=、*=、/=、%=、=、=）条件运算（?:）逗号运算（,）对象运算（new、delete、.、instanceof）,运算符,算数环境的类型转换,字符串环境的类型转换,=只要数据类型不一致，则返回
19、false，如果一致，再比较=如果数据类型相同，则直接比较如果数据类型不同，则先转换成数值再比较，有时会得到非常诡异的结果例外规则：判断一个值是不是NaN要使用 isNaN( )函数,比较运算符,JS,x&y如果 x 转换为boolean值时，结果为false，则不运行y，返回x的值如果 x转换为boolean值时，结果为true，则运行y，返回y的值x|y如果 x 转换为boolean值时，结果为true，则不运行y，返回x的值如果 x 转换为boolean值时，结果为false，则运行y，返回y的值,逻辑运算符,HTML 和 CSS 学习大纲,02 函数,函数的定义：function 关键
20、字函数的调用： ( )函数的参数函数的返回值个数不定的参数：arguments关键字声明式函数：可以将函数赋值给变量,基本概念,函数内声明的变量，作用域在函数内部，叫做局部变量不同函数内部的同名变量互相独立，互不影响内部函数可以访问外部函数定义的变量，反过来则不行如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量注意：非严格模式下不使用var声明的变量，将自动变为全局变量,变量的作用域 函数作用域,所有函数内声明的变量会“提升”到函数顶部建议：先声明函数内部用到的所有变量,函数作用域中的变量提升,函数外声明的变量，作用域在全局范围内，叫做全局变量任何变量（函数也视
21、为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误命名冲突：不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突定义名称空间,变量作用域 - 全局作用域,在浏览器环境中的JavaScript有一个全局对象 window全局作用域的变量实际上被绑定到window的一个属性,全局作用域中的window对象,ES6之前没有块级作用域ES6中引入 let 关键字替代 var 声明块级作用域ES6种引入 const 关键字定义块级别常量,变量作用域 - 块级作用域,绑定到对象
22、上的函数称为方法函数中的this关键字：window对象方法中的this关键字：当前对象严格模式与非严格模式中的this严格模式中，函数中的this指向 undefined非严格模式中，函数中的this指向 window,方法,HTML 和 CSS 学习大纲,03 宿主对象,window对象的方法alert()confirm()prompt()setInterval()setTimeout(),BOM 浏览器对象模型,window对象的属性locationhistoryscreennavigatordocument,HTML 和 CSS 学习大纲,04 DOM,文档对象模型：节点树每个节点都是
23、一个对象结点关系,DOM,文档对象模型：节点类型元素节点文本节点属性节点,DOM,getElementById(id)getElementsByTagName(tagName)getElementsByClassName(className)querySelector(selector)querySelectorAll(selector),获取DOM结点,标准DOM用法getAttribute(attr)setAttribute(attr, value)removeAttribute(attr)DOM标准出现之前的写法 .（点） 运算符没办法删除一个属性,获取和设置属性,遍历节点childNo
24、desnodeTypenodeValuefirstChildlastChild,操作节点,创建节点innerHTMLcreateElement(nodeName)createTextNode(text)插入节点appendChild(child)insertBefore(new, ref),操作 style 属性操作 class操作样式表文件,CSS-DOM,内嵌事件处理函数分离事件处理函数和HTMLDOM标准事件处理函数,DOM事件,HTML 和 CSS 学习大纲,05 表单,HTML5表单验证required、min、max、 number、email、url等JavaScript表单验证
25、,表单验证,HTML 和 CSS 学习大纲,06 面向对象编程,类和实例是大多数面向对象编程语言的基本概念类：学生实例：小红、小刚、小军、小明JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程_protoES5：Object.create(),创建基于原型的对象,xiaoming 的原型链数组的原型链函数的原型链,原型链,利用 function 创建构造函数new 关键字调用构造函数，创建新对象constructor 属性,使用构造函数创建基于原型的对象,优化,HTML 和 CSS 学习大纲,07 内置对象,String、Number、Boolean
26、构造函数：将原始值变为对象new String()、new Number()、new Boolean()类型转换函数：数据类型转换String()、Number()、Boolean(),包装对象,使用 typeof() 方法 和 typeof 运算符判断数据类型值类型和引用类型的比较,值类型和引用类型,JS,Object、Array、FunctionDate 时间日期对象RegExp 正则表达式对象Math 数学函数JSON,其它常用对象,http:/www.ecma-international.org/ecma-262/6.0/index.html,HTML 和 CSS 学习大纲,08 AJAX,创建 XMLHttpRequest 对象：new监听 xhr 的onreadystatechange 事件，创建回调函数初始化 xhr 对象：open( )发送请求：send( ) 获取服务器响应处理响应,AJAX的实现步骤,核心apply 和 call高阶函数原型继承闭包,其它主题,浏览器端cookie 和 storagecanvasanimationvideo 和 audio,
