Web前端技术培训PPT课件

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： 段落标签 paragrap

2、h： 无序列表 unordered 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

3、- 开发工具,UltraEdit、EditPlus：代码颜色、多文件编辑 Dreamweaver、Sublime、WebStorm：神器,常用开发工具介绍,官方下载地址： 安装 启动 配置：字体大小和配色方案的设置 使用WebStorm编写HTML,WebStorm 的安装、启动、配置和使用,HTML 和 CSS 学习大纲,03 - 超链接,在浏览器中输入URL时发生了什么,服务器 ,请求 request,响应 response,/news,点击超链接，连接中有一个文件请求被发送给服务器,在浏览器中点击超链接时发生了什么,1,浏览器,请求 request,服务器 ,/resources,/ne

4、ws,服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件,在浏览器中点击超链接时发生了什么,2,浏览器,响应 response,新的页面地址,服务器 ,/resources,/news,标签：网页中可点击的超链接 href 属性：超链接指向的URL地址（hypertext reference） target 属性：当超链接被点击的时候，新页面打开的位置,如何制作超链接,_blank：在浏览器的新标签或新窗口中打开页面,_self：在当前窗口中打开页面，替换原来的页面,如果不添加 target 属性，那么默认值是 _self,绝对路径向一个特定的服务器上的文件发送请求,绝对路径、相对路径和根

5、路径,HTML,相对路径不指定服务器，参照发送请求页面的URL,HTML,根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名,HTML,04 CSS选择器,HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开,将内容和样式分离,HTML,内容和样式分离：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子,Cascading Style Sheets 层叠样式表,选择器：可以选择html标签 类型选择器：不带尖括号的标签名 派生选择器：作用在某些标签的子标签上,选择器,添加CSS样式的位置：在head标签中添加style子标

6、签 使用标签将CSS和所有的html文件关联在一起,把样式表放在什么地方？,W3School MDN /zh-CN/docs/Web/Tutorials 网络平台：HTML 网络平台：CSS,参考手册,05 颜色,black,#FF0000,CSS颜色,红色,黑色,黄色,关键字颜色,十六进制颜色,rgb颜色,每个十六进制颜色由三部分组成,十六进制色（Hexadecimal colors）,#FFFF00,红色的多少,绿色的多少,蓝色的数量,取值范围：16进制的00-FF，10进制的0-255,使用十六进制数来设置颜色，三个部分，每个颜色有

7、256种可能的取值,网页的颜色,256256256 = 16777216,06 盒模式,在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。,盒,HTML,margin,border,padding,内容区域 content area 内容区域中包含的是盒子中真正的内容（文本、图片等） 补白 或内边距 padding padding包围在内容区域的边缘，上右下左 边框 border border包围在padding的边缘，上右下左 边距 margin margin包围在border的上右下左四个边缘,盒模式,width：宽 height：高 border：边

8、框 padding：内补白 margin：外边距 display：显示,盒模式相关属性,计算盒子的尺寸 属性设置的更多形式,margin,border,padding,block、inline、inline-block、none,display属性,div布局入门,div,div,div,div,07 图片,网页中出现的大部分图片都属于以下这三种类型 内容图片 布局图片 用户交互图片,三种网页图片,标签,创建内容图片,src 属性：图片的路径 alt 属性：图片的简单描述 可访问性：搜索引擎、屏幕阅读器,HTML,使用CSS中的background属性 background-color bac

9、kground-image background-repeat background-position,创建布局图片,图片精灵 sprite：把小图标放在同一个文件中，提高性能 用户交互图片很多都是小图标，适合使用用户交互图片,图片精灵,JPEG、PNG和GIF,复杂颜色的图像和照片则要使用JPEG格式 动态图像要使用GIF格式 PNG格式的透明图片要比GIF格式的更平滑 这三种图像相对于其他格式的图像文件比较小，适合Web页面,Web上最常用的三种图像格式,08 字体,CSS,可以指定和改变字体外观的常用CSS属性,使用CSS改变字体,CSS,font-style,font-weight,f

10、ont-size,line-height,font-family,CSS,使用字体列表,优先使用的字体,备用自体,通用字体系列,通用字体系列,无衬线字体 笔画粗细一致,有衬线字体 笔画末端有装饰性的线条或凸起,通用字体系列,等宽字体 每个字母宽度一致 用于显示软件代码示例,手写体,装饰性字体 设计感较强,09 表单,表单的工作方式,php、jsp、node.js等等,服务器,脚本,用户名：Helen 密码：* 是否自动登录,处理数据,表单的工作方式,HTML,服务器,php、jsp、node.js等等,脚本,处理数据,用户名：Helen 密码：* 是否自动登录,美食网表单,10 表格,要创建一

11、个最简单的表格，至少需要三个标签 table：表格标签 tr：表格行标签，table row td：数据单元格标签，table data,表格基本标签,table,tr,td,标签 table、tr、td、th thead、tbody、tfoot caption 合并单元格属性 colspan：跨列单元格 rowspan：跨行单元格,制作一个表格,11 浮动,浏览器在页面上摆放HTML元素所用的方法,文档流,h1,h2,p,p,块元素的文档流,浏览器在页面上摆放HTML元素所用的方法,文档流,label,input,a,img,内联元素的文档流,img,float 属性：left | righ

12、t 浮动元素的特点 默认宽度是内容的宽度 向指定方向移动，排在前一个浮动元素的旁边，浮动在后面的元素的上面 半脱离文档流,浮动,clear 属性 添加空元素 定义 clearfix 类,清除浮动的几种方法,12 定位,position 属性： static（默认值） | relative | absolute | fixed 精确控制标签在HTML文档中的位置（对static不起作用） top、right、bottom、left,定位,定位,static：默认值 元素在正常的文档流中显示,absolute：绝对定位 宽度是内容的宽度 脱离文档流，后面的元素会忽视绝对定位元素的存在 参照物为第一

13、个定位祖先，如果没有定位祖先则参照物是html元素,relative：相对定位 在正常文档流中显示，相对于原来位置偏移 参照物是元素本身 通常作为绝对定位元素的参照物,fixed：固定定位 宽度为内容的宽度，脱离文档流 参照物是浏览器窗口，固定不动,z-index,z-index: 9;,z-index: 1;,z-index,13 iframe,HTML,iframe：内联框架，在网页中任意的位置嵌入另一个网页,iframe,绝对路径或相对路径,14 搜索引擎优化,HTML,使用meta标签提高搜索排名,多使用标题标签： 添加img标签的alt属性： 一些标签的title属性：,优化HTML

14、文档,HTML,HTML,第二部分 JavaScript,JavaScript 历史,Brendan Eich,为了解决浏览器与用户交互的问题，用了 10 天时间设计了JavaScript语言,借鉴C的基本语法 借鉴Java的数据类型和内存管理 借鉴Scheme的函数式编程 借鉴Self的基于原型的继承机制,1995年：JavaScript 1.0,ECMAScript,1997年6月：JavaScript 1.1 1998年6月：ECMAScript 2 1999年12月：ECMAScript 3 2009年12月：ECMAScript 5（从IE10开始完美支持） 2015年6月：ECAM

15、AScript 6,ECMAScript 1,ECMAScript 2015,European Computer Manufactures Association 欧洲计算机制造联合会,JavaScript 学习大纲,快速入门 函数 宿主对象 DOM,表单 面向对象编程 内置对象 AJAX,HTML 和 CSS 学习大纲,01 快速入门,第一个程序： 和 alert() JavaScript的工作方式： 中和中 标签中 和 内联事件中 JavaScript是一门解释型语言 控制台输出：console.log();,准备工作,语句 多条语句可以写在同一行，也可以写在不同的行中 同一行中的两条语句

16、之间要用分号分隔 不同行中的语句末尾可以不用分号，建议使用分号 注释：注释是给开发人员看到，JavaScript引擎会自动忽略 单行： /注释内容 可以独立成行，可以在行尾 多行： /* 注释内容 */ 可以独立，可以在行中，不可以嵌套,基本语法,变量的声明：var 变量的定义：= 变量的使用：不要使用引号,变量,区分大小写 MOOD 和 mood 是不同的变量 变量名只允许包含字母、数字、美元符号、下划线 如：my mood = happy; 不合法 第一个字符不能是数字 如：2mood = happy; 不合法 变量名不能使用关键字和保留字 如：alert，if，class 都是不合法的变

17、量名 命名规范：首写字母小写 mood、myMood 或 my_mood 的形式,变量的命名规则,可以不使用var声明变量是JavaScript的设计缺陷 ES5中的严格模式 启用严格模式：在JavaScript代码第一行写上use strict,严格模式,JS,JavaScript：弱类型语言，可以在任何阶段改变数据类型 字符串 数值 布尔值 undefined、null 对象 函数,数据类型,由零和或多个字符构成，必须写在引号里 可以使用单引号或双引号 使用转义字符： 注意：不管使用双引号还是单引号，请在脚本中保持一致 多行字符串,字符串 String,JavaScript不区分整数和浮点

18、数 以下都是合法的number类型,数值 number,JS,两个可选值：true 或 false,布尔值 boolean,JS,undefined：未定义 null：空,undefined 和 null,数组是一组按顺序排列的集合，集合的每个值称为元素 可以使用 定义数组 数组的元素可以通过索引来访问 通过length属性访问数组的长度,数组 Array,JavaScript的对象是一组由属性-值组成的无序集合 可以使用 定义对象 对象的属性都是字符串类型，可以写引号，也可以不写 对象的值可以是任意数据类型 使用 . 属性名或 属性名 运算符访问对象的属性,对象 Object,条件判断语句：

19、if、switch 循环迭代语句：while、do-while、for、for-in 流程跳转语句：break、continue,结构控制语句,布尔环境的类型转换,算数运算（+、-、*、/、%、+、-） 关系运算（、=、） 赋值运算（=、 +=、-=、*=、/=、%=、=、=） 条件运算（?:） 逗号运算（,） 对象运算（new、delete、.、instanceof）,运算符,算数环境的类型转换,字符串环境的类型转换,= 只要数据类型不一致，则返回false，如果一致，再比较 = 如果数据类型相同，则直接比较 如果数据类型不同，则先转换成数值再比较，有时会得到非常诡异的结果 例外规则： 判断

20、一个值是不是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关键字 声明式函数：可以将函数赋值给变量

21、,基本概念,函数内声明的变量，作用域在函数内部，叫做局部变量 不同函数内部的同名变量互相独立，互不影响 内部函数可以访问外部函数定义的变量，反过来则不行 如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量 注意：非严格模式下不使用var声明的变量，将自动变为全局变量,变量的作用域 函数作用域,所有函数内声明的变量会“提升”到函数顶部 建议：先声明函数内部用到的所有变量,函数作用域中的变量提升,函数外声明的变量，作用域在全局范围内，叫做全局变量 任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报Ref

22、erenceError错误 命名冲突：不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突 定义名称空间,变量作用域 - 全局作用域,在浏览器环境中的JavaScript有一个全局对象 window 全局作用域的变量实际上被绑定到window的一个属性,全局作用域中的window对象,ES6之前没有块级作用域 ES6中引入 let 关键字替代 var 声明块级作用域 ES6种引入 const 关键字定义块级别常量,变量作用域 - 块级作用域,绑定到对象上的函数称为方法 函数中的this关键字：window对象 方法中的this关键字：当前对象

23、严格模式与非严格模式中的this 严格模式中，函数中的this指向 undefined 非严格模式中，函数中的this指向 window,方法,HTML 和 CSS 学习大纲,03 宿主对象,window对象的方法 alert() confirm() prompt() setInterval() setTimeout(),BOM 浏览器对象模型,window对象的属性 location history screen navigator document,HTML 和 CSS 学习大纲,04 DOM,文档对象模型：节点树 每个节点都是一个对象 结点关系,DOM,文档对象模型：节点类型 元素节点

24、文本节点 属性节点,DOM,getElementById(id) getElementsByTagName(tagName) getElementsByClassName (className) querySelector(selector) querySelectorAll(selector),获取DOM结点,标准DOM用法 getAttribute(attr) setAttribute(attr, value) removeAttribute(attr) DOM标准出现之前的写法 .（点） 运算符 没办法删除一个属性,获取和设置属性,遍历节点 childNodes nodeType nodeValue firstChild lastChild,操作节点,创建节点 innerHTML createElement(nodeName) createTextNode(text) 插入节点 appendChild(child) insertBefore(new, ref),操作 style 属性 操作 class 操作样式表文件,CSS-DOM,内嵌事件处理函数 分离事件处理函数和HTML DOM标准事件处理函数,DOM事件,HTML 和 CSS 学习大纲,05 表单,HTML5表单验证 required、min、max、 number、email、url等 JavaScri