Web前端技术培训PPT课件.ppt

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