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