Web前端技术培训课件.ppt

1、中国移动通信集团黑龙江有限公司2015.13Web 前端技术培训什么是 Web 前端Web 系统服务器客户端客户端客户端客户端Web 前端三要素HTMLCSSJavaScript课程大纲 HTML CSS JavaScript第一部分HTML 和 CSS HTML 标签 开发工具 超链接 CSS 选择器 颜色 盒模式 图片HTML 和 CSS 学习大纲p字体p表单p表格p浮动p定位piframep搜索引擎优化HTML 和 CSS 学习大纲01-HTML 标签使用 HTML 标签组织网页结构 标题标签 heading tag：段落标签 paragraph：无序列表 unordered list：

2、列表项 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、EditPlus：代码颜色、多文件编

3、辑 Dreamweaver、Sublime、WebStorm：神器常用开发工具介绍 官方下载地址：http:/ 安装 启动 配置：字体大小和配色方案的设置 使用WebStorm编写HTMLWebStorm 的安装、启动、配置和使用HTML 和 CSS 学习大纲03-超链接在浏览器中输入URL时发生了什么https:/ request服务器 标签：网页中可点击的超链接 href 属性：超链接指向的URL地址（hypertext reference）target 属性：当超链接被点击的时候，新页面打开的位置如何制作超链接_blank：在浏览器的新标签或新窗口中打开页面_self：在当前窗口中打开页

4、面，替换原来的页面如果不添加 target 属性，那么默认值是 _self绝对路径向一个特定的服务器上的文件发送请求绝对路径、相对路径和根路径HTMLp 相对路径不指定服务器，参照发送请求页面的URLHTMLp 根路径前面总是包含“/“，在绝对路径的基础上去掉协议和主机名HTML04 CSS选择器 HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开将内容和样式分离HTMLp 内容和样式分离：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子Cascading Style Sheets 层叠样式表 选择器：可以选择html标签 类型选

5、择器：不带尖括号的标签名 派生选择器：作用在某些标签的子标签上选择器 添加CSS样式的位置：在head标签中添加style子标签 使用标签将CSS和所有的html文件关联在一起把样式表放在什么地方？W3School http:/ https:/developer.mozilla.org/zh-CN/docs/Web/Tutorials 网络平台：HTML 网络平台：CSS参考手册05 颜色black#FF0000CSS颜色红色黑色黄色关键字颜色十六进制颜色rgb颜色 每个十六进制颜色由三部分组成十六进制色（Hexadecimal colors）#FFFF00红色的多少绿色的多少蓝色的数量p 取

6、值范围：16进制的00-FF，10进制的0-255 使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值网页的颜色256256256=1677721606 盒模式 在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。盒HTMLmarginborderpadding内容区域 content area内容区域中包含的是盒子中真正的内容（文本、图片等）补白 或内边距 paddingpadding包围在内容区域的边缘，上右下左边框 borderborder包围在padding的边缘，上右下左边距 marginmargin包围在border的上右下左四个边

7、缘盒模式 width：宽 height：高 border：边框 padding：内补白 margin：外边距 display：显示盒模式相关属性p 计算盒子的尺寸p 属性设置的更多形式marginborderpadding block、inline、inline-block、nonedisplay属性display显示位置默认宽高可设置宽高可设置padding可设置marginblock换行父元素宽度内容高度是是是inline同行内容宽高否是左右inline-block同行内容宽高是是是none隐藏-div布局入门divdivdivdiv07 图片 网页中出现的大部分图片都属于以下这三种类型

8、内容图片 布局图片 用户交互图片三种网页图片 标签创建内容图片p src 属性：图片的路径p alt 属性：图片的简单描述 可访问性：搜索引擎、屏幕阅读器HTML 使用CSS中的background属性 background-color background-image background-repeat background-position创建布局图片 图片精灵 sprite：把小图标放在同一个文件中，提高性能 用户交互图片很多都是小图标，适合使用用户交互图片图片精灵 JPEG、PNG和GIF 复杂颜色的图像和照片则要使用JPEG格式 动态图像要使用GIF格式 PNG格式的透明图片要比GI

9、F格式的更平滑 这三种图像相对于其他格式的图像文件比较小，适合Web页面 Web上最常用的三种图像格式08 字体CSS 可以指定和改变字体外观的常用CSS属性使用CSS改变字体CSSfont-stylefont-weightfont-sizeline-heightfont-familyCSS使用字体列表优先使用的字体备用自体通用字体系列通用字体系列无衬线字体p 笔画粗细一致有衬线字体p笔画末端有装饰性的线条或凸起通用字体系列等宽字体p 每个字母宽度一致p 用于显示软件代码示例手写体装饰性字体设计感较强09 表单表单的工作方式http:/ 表格 要创建一个最简单的表格，至少需要三个标签 tabl

10、e：表格标签 tr：表格行标签，table row td：数据单元格标签，table data表格基本标签tabletrtd 标签 table、tr、td、th thead、tbody、tfoot caption 合并单元格属性 colspan：跨列单元格 rowspan：跨行单元格制作一个表格11 浮动 浏览器在页面上摆放HTML元素所用的方法文档流h1h2pp块元素的文档流 浏览器在页面上摆放HTML元素所用的方法文档流labelinputaimg内联元素的文档流img float 属性：left|right 浮动元素的特点 默认宽度是内容的宽度 向指定方向移动，排在前一个浮动元素的旁边，

11、浮动在后面的元素的上面 半脱离文档流浮动 clear 属性 添加空元素 定义 clearfix 类清除浮动的几种方法12 定位 position 属性：static（默认值）|relative|absolute|fixed 精确控制标签在HTML文档中的位置（对static不起作用）top、right、bottom、left定位定位p static：默认值元素在正常的文档流中显示p absolute：绝对定位宽度是内容的宽度脱离文档流，后面的元素会忽视绝对定位元素的存在参照物为第一个定位祖先，如果没有定位祖先则参照物是html元素p relative：相对定位在正常文档流中显示，相对于原来位置

12、偏移参照物是元素本身通常作为绝对定位元素的参照物p fixed：固定定位宽度为内容的宽度，脱离文档流参照物是浏览器窗口，固定不动z-indexz-index:9;z-index:1;z-index13 iframeHTML iframe：内联框架，在网页中任意的位置嵌入另一个网页iframe绝对路径或相对路径14 搜索引擎优化HTML使用meta标签提高搜索排名 多使用标题标签：添加img标签的alt属性：一些标签的title属性：优化HTML文档HTMLHTML第二部分JavaScriptJavaScript 历史Brendan Eich为了解决浏览器与用户交互的问题，用了 10 天时间设计

13、了JavaScript语言 借鉴C的基本语法 借鉴Java的数据类型和内存管理 借鉴Scheme的函数式编程 借鉴Self的基于原型的继承机制p 1995年：JavaScript 1.0ECMAScriptp 1997年6月：JavaScript 1.1p 1998年6月：ECMAScript 2p 1999年12月：ECMAScript 3p 2009年12月：ECMAScript 5（从IE10开始完美支持）p 2015年6月：ECAMAScript 6ECMAScript 1ECMAScript 2015European Computer Manufactures Association

14、欧洲计算机制造联合会JavaScript 学习大纲 快速入门 函数 宿主对象 DOMp 表单p 面向对象编程p 内置对象p AJAXHTML 和 CSS 学习大纲01 快速入门 第一个程序：和 alert()JavaScript的工作方式：中和中 标签中 和 内联事件中 JavaScript是一门解释型语言 控制台输出：console.log();准备工作 语句 多条语句可以写在同一行，也可以写在不同的行中 同一行中的两条语句之间要用分号分隔 不同行中的语句末尾可以不用分号，建议使用分号 注释：注释是给开发人员看到，JavaScript引擎会自动忽略 单行：/注释内容 可以独立成行，可以在行尾

15、 多行：/*注释内容*/可以独立，可以在行中，不可以嵌套基本语法 变量的声明：var 变量的定义：=变量的使用：不要使用引号变量 区分大小写 MOOD 和 mood 是不同的变量 变量名只允许包含字母、数字、美元符号、下划线 如：my mood=happy;不合法 第一个字符不能是数字 如：2mood=happy;不合法 变量名不能使用关键字和保留字 如：alert，if，class 都是不合法的变量名 命名规范：首写字母小写 mood、myMood 或 my_mood 的形式变量的命名规则 可以不使用var声明变量是JavaScript的设计缺陷 ES5中的严格模式 启用严格模式：在Java

16、Script代码第一行写上use strict严格模式JS JavaScript：弱类型语言，可以在任何阶段改变数据类型 字符串 数值 布尔值 undefined、null 对象 函数数据类型 由零和或多个字符构成，必须写在引号里 可以使用单引号或双引号 使用转义字符：注意：不管使用双引号还是单引号，请在脚本中保持一致 多行字符串字符串 String JavaScript不区分整数和浮点数 以下都是合法的number类型数值 numberJS 两个可选值：true 或 false布尔值 booleanJS undefined：未定义 null：空undefined 和 null 数组是一组按顺

17、序排列的集合，集合的每个值称为元素 可以使用 定义数组 数组的元素可以通过索引来访问 通过length属性访问数组的长度数组 Array JavaScript的对象是一组由属性-值组成的无序集合 可以使用 定义对象 对象的属性都是字符串类型，可以写引号，也可以不写 对象的值可以是任意数据类型 使用.属性名或 属性名 运算符访问对象的属性对象 Object 条件判断语句：if、switch 循环迭代语句：while、do-while、for、for-in 流程跳转语句：break、continue结构控制语句类型结果undefinedfalsenullfalseboolean不转换number如

18、果值为 0或 NaN，则结果为 false；否则为 trueString如果值为空字符串，则结果为 false；否则为 trueObjecttrue布尔环境的类型转换 算数运算（+、-、*、/、%、+、-）关系运算（、=、=、=、!=）逻辑运算（!、&、|）位运算（&、|、）赋值运算（=、+=、-=、*=、/=、%=、=、=）条件运算（?:）逗号运算（,）对象运算（new、delete、.、instanceof）运算符算数环境的类型转换类型结果undefinedNaNnull0booleantrue是1，false是0number不转换String空字符串转换为0，数值字符串转换为数值，其它是

19、NaNObjectNaN字符串环境的类型转换类型结果undefinedundefinednullnullbooleantrue 和 falsenumber0，123，Infinity，NaN，String不转换Objectobject Object=只要数据类型不一致，则返回false，如果一致，再比较=如果数据类型相同，则直接比较 如果数据类型不同，则先转换成数值再比较，有时会得到非常诡异的结果 例外规则：判断一个值是不是NaN要使用 isNaN()函数比较运算符JS x&y 如果 x 转换为boolean值时，结果为false，则不运行y，返回x的值 如果 x转换为boolean值时，结果

20、为true，则运行y，返回y的值 x|y 如果 x 转换为boolean值时，结果为true，则不运行y，返回x的值 如果 x 转换为boolean值时，结果为false，则运行y，返回y的值逻辑运算符HTML 和 CSS 学习大纲02 函数 函数的定义：function 关键字 函数的调用：()函数的参数 函数的返回值 个数不定的参数：arguments关键字 声明式函数：可以将函数赋值给变量基本概念 函数内声明的变量，作用域在函数内部，叫做局部变量 不同函数内部的同名变量互相独立，互不影响 内部函数可以访问外部函数定义的变量，反过来则不行 如果内部函数定义了与外部函数重名的变量，则内部函数

21、的变量将“屏蔽”外部函数的变量 注意：非严格模式下不使用var声明的变量，将自动变为全局变量变量的作用域 函数作用域 所有函数内声明的变量会“提升”到函数顶部 建议：先声明函数内部用到的所有变量函数作用域中的变量提升 函数外声明的变量，作用域在全局范围内，叫做全局变量 任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误 命名冲突：不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突 定义名称空间变量作用域-全局作用域 在浏览器环境中的JavaScr

22、ipt有一个全局对象 window 全局作用域的变量实际上被绑定到window的一个属性全局作用域中的window对象 ES6之前没有块级作用域 ES6中引入 let 关键字替代 var 声明块级作用域 ES6种引入 const 关键字定义块级别常量变量作用域-块级作用域 绑定到对象上的函数称为方法 函数中的this关键字：window对象 方法中的this关键字：当前对象 严格模式与非严格模式中的this 严格模式中，函数中的this指向 undefined 非严格模式中，函数中的this指向 window方法HTML 和 CSS 学习大纲03 宿主对象 window对象的方法 alert(

23、)confirm()prompt()setInterval()setTimeout()BOM 浏览器对象模型p window对象的属性 location history screen navigator documentHTML 和 CSS 学习大纲04 DOM 文档对象模型：节点树 每个节点都是一个对象 结点关系DOM 文档对象模型：节点类型 元素节点 文本节点 属性节点DOM getElementById(id)getElementsByTagName(tagName)getElementsByClassName(className)querySelector(selector)query

24、SelectorAll(selector)获取DOM结点 标准DOM用法 getAttribute(attr)setAttribute(attr,value)removeAttribute(attr)DOM标准出现之前的写法 .（点）运算符 没办法删除一个属性获取和设置属性 遍历节点 childNodes nodeType nodeValue firstChild lastChild操作节点p 创建节点 innerHTML createElement(nodeName)createTextNode(text)p 插入节点 appendChild(child)insertBefore(new,r

25、ef)操作 style 属性 操作 class 操作样式表文件CSS-DOM 内嵌事件处理函数 分离事件处理函数和HTML DOM标准事件处理函数DOM事件HTML 和 CSS 学习大纲05 表单 HTML5表单验证 required、min、max、number、email、url等 JavaScript表单验证表单验证HTML 和 CSS 学习大纲06 面向对象编程 类和实例是大多数面向对象编程语言的基本概念 类：学生 实例：小红、小刚、小军、小明 JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程 _proto ES5：Object.creat

26、e()创建基于原型的对象 xiaoming 的原型链 数组的原型链 函数的原型链原型链 利用 function 创建构造函数 new 关键字调用构造函数，创建新对象 constructor 属性使用构造函数创建基于原型的对象优化HTML 和 CSS 学习大纲07 内置对象 String、Number、Boolean 构造函数：将原始值变为对象 new String()、new Number()、new Boolean()类型转换函数：数据类型转换 String()、Number()、Boolean()包装对象 使用 typeof()方法 和 typeof 运算符判断数据类型 值类型和引用类型的

27、比较值类型和引用类型JS Object、Array、Function Date 时间日期对象 RegExp 正则表达式对象 Math 数学函数 JSON其它常用对象http:/www.ecma-international.org/ecma-262/6.0/index.htmlHTML 和 CSS 学习大纲08 AJAX 创建 XMLHttpRequest 对象：new 监听 xhr 的 onreadystatechange 事件，创建回调函数 初始化 xhr 对象：open()发送请求：send()获取服务器响应 处理响应AJAX的实现步骤 核心 apply 和 call 高阶函数 原型继承 闭包其它主题p 浏览器端 cookie 和 storage canvas animation video 和 audio