Web前端技术培训

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

2、paragraph： p 无序列表 unordered list： p 列表项 list item：p 有序列表 ordered list：9W3C万维网联盟： The World Wide Web Consortium 创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。 W3C已发布了200多项影响深远的Web技术标准及实施指南如HTML、CSS、WCAG等。10p 把所有显示在网页中的内容放入body标签p 网页中的不可见部分放入head标签中p 将所有 HTML 代码放入 标签中p DOCTYPE：表示 HTML 的版本信息使用网页基本结构标签组织整个页面11H

3、TML 和 CSS 学习大纲02 - 开发工具12p UltraEdit、EditPlus：代码颜色、多文件编辑p Dreamweaver、Sublime、WebStorm：神器常用开发工具介绍13p 官方下载地址： http:/ 安装p 启动p 配置：字体大小和配色方案的设置p 使用WebStorm编写HTMLWebStorm 的安装、启动、配置和使用14HTML 和 CSS 学习大纲03 - 超链接15在浏览器中输入URL时发生了什么https:/ request服务器 标签：网页中可点击的超链接p href 属性：超链接指向的URL地址（hypertext reference）p tar

4、get 属性：当超链接被点击的时候，新页面打开的位置如何制作超链接_blank：在浏览器的新标签或新窗口中打开页面_self：在当前窗口中打开页面，替换原来的页面如果不添加 target 属性，那么默认值是 _self19p 绝对路径向一个特定的服务器上的文件发送请求绝对路径、相对路径和根路径HTMLp 相对路径不指定服务器，参照发送请求页面的URLHTMLp 根路径前面总是包含 “/“，在绝对路径的基础上去掉协议和主机名HTML04 CSS选择器21p HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开将内容和样式分离HTMLp 内容和样式分离：把表示样式的代码从ht

5、ml中分离出来，并且创建一种规则来定义html标签要显示成什么样子Cascading Style Sheets 层叠样式表22p 选择器：可以选择html标签p 类型选择器：不带尖括号的标签名p 派生选择器：作用在某些标签的子标签上选择器23p 添加CSS样式的位置：在head标签中添加style子标签p 使用标签将CSS和所有的html文件关联在一起把样式表放在什么地方？24p W3School http:/ MDN /zh-CN/docs/Web/Tutorials 网络平台：HTML 网络平台：CSS参考手册05 颜色black#F

6、F000026CSS颜色红色红色黑色黑色黄色黄色关键字颜色十六进制颜色rgb颜色27p 每个十六进制颜色由三部分组成十六进制色（Hexadecimal colors）#FFFF00红色的多少绿色的多少蓝色的数量p 取值范围：16进制的00-FF，10进制的0-25528p 使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值网页的颜色256256256 = 1677721606 盒模式30p 在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。盒HTML31marginborderpadding1. 内容区域 content area内容区域中包

7、含的是盒子中真正的内容（文本、图片等）2. 补白 或内边距 paddingpadding包围在内容区域的边缘，上右下左3. 边框 borderborder包围在padding的边缘，上右下左4. 边距 marginmargin包围在border的上右下左四个边缘盒模式32p width：宽p height：高p border：边框p padding：内补白p margin：外边距p display：显示盒模式相关属性p 计算盒子的尺寸p 属性设置的更多形式marginborderpadding33p block、inline、inline-block、nonedisplay属性display显

8、示位置显示位置默认宽高默认宽高可设置宽高可设置宽高可设置可设置padding可设置可设置marginblock换行父元素宽度内容高度是是是inline同行内容宽高否是左右inline-block同行内容宽高是是是none隐藏-34div布局入门divdivdivdiv07 图片36p 网页中出现的大部分图片都属于以下这三种类型内容图片布局图片用户交互图片三种网页图片37p 标签创建内容图片p src 属性：图片的路径p alt 属性：图片的简单描述 可访问性：搜索引擎、屏幕阅读器HTML38p 使用CSS中的background属性 background-color background-im

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

10、ine-heightfont-family43CSS使用字体列表优先使用的字体备用自体通用字体系列44通用字体系列无衬线字体p 笔画粗细一致有衬线字体p笔画末端有装饰性的线条或凸起45通用字体系列等宽字体p 每个字母宽度一致p 用于显示软件代码示例手写体装饰性字体设计感较强09 表单47表单的工作方式http:/ 表格51p 要创建一个最简单的表格，至少需要三个标签 table：表格标签 tr：表格行标签，table row td：数据单元格标签，table data表格基本标签tabletrtd52p 标签 table、tr、td、th thead、tbody、tfoot captionp

11、合并单元格属性 colspan：跨列单元格 rowspan：跨行单元格制作一个表格11 浮动54p 浏览器在页面上摆放HTML元素所用的方法文档流h1h2pp块元素的文档流55p 浏览器在页面上摆放HTML元素所用的方法文档流labelinputaimg内联元素的文档流img56p float 属性：left | rightp 浮动元素的特点 默认宽度是内容的宽度 向指定方向移动，排在前一个浮动元素的旁边，浮动在后面的元素的上面 半脱离文档流浮动57p clear 属性p 添加空元素p 定义 clearfix 类清除浮动的几种方法12 定位59p position 属性： static（默认值

12、） | relative | absolute | fixedp 精确控制标签在HTML文档中的位置（对static不起作用） top、right、bottom、left定位60定位p static：默认值：默认值元素在正常的文档流中显示p absolute：绝对定位宽度是内容的宽度脱离文档流，后面的元素会忽视绝对定位元素的存在参照物为第一个定位祖先，如果没有定位祖先则参照物是html元素p relative：相对定位在正常文档流中显示，相对于原来位置偏移参照物是元素本身通常作为绝对定位元素的参照物p fixed：固定定位 宽度为内容的宽度，脱离文档流 参照物是浏览器窗口，固定不动61z-in

13、dex62z-index: 9;z-index: 1;z-index13 iframe64HTMLp iframe：内联框架，在网页中任意的位置嵌入另一个网页iframe绝对路径或相对路径14 搜索引擎优化66HTML使用meta标签提高搜索排名67p 多使用标题标签： p 添加img标签的alt属性：p 一些标签的title属性：优化HTML文档HTMLHTML第二部分JavaScript69JavaScript 历史Brendan Eich为了解决浏览器与用户交互的问题，用了 10 天时间设计了JavaScript语言 借鉴C的基本语法 借鉴Java的数据类型和内存管理 借鉴Scheme的

14、函数式编程 借鉴Self的基于原型的继承机制p 1995年：JavaScript 1.070ECMAScriptp 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欧洲计算机制造联合会71JavaScript 学习大纲p 快速入门p 函数p 宿主对象p DO

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

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

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

18、空undefined 和 null83p 数组是一组按顺序排列的集合，集合的每个值称为元素p 可以使用 定义数组p 数组的元素可以通过索引来访问p 通过length属性访问数组的长度数组 Array84p JavaScript的对象是一组由属性-值组成的无序集合p 可以使用 定义对象p 对象的属性都是字符串类型，可以写引号，也可以不写p 对象的值可以是任意数据类型p 使用 . 属性名或 属性名 运算符访问对象的属性对象 Object85p 条件判断语句：if、switchp 循环迭代语句：while、do-while、for、for-inp 流程跳转语句：break、continue结构控制语

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

20、ndefinedNaNnull0booleantrue是1，false是0number不转换String空字符串转换为0，数值字符串转换为数值，其它是NaNObjectNaN89字符串环境的类型转换类型结果undefinedundefinednullnullbooleantrue 和 falsenumber0， 123，Infinity，NaN，String不转换Objectobject Object90p =只要数据类型不一致，则返回false，如果一致，再比较p =如果数据类型相同，则直接比较如果数据类型不同，则先转换成数值再比较，有时会得到非常诡异的结果例外规则：判断一个值是不是NaN要

21、使用 isNaN( )函数比较运算符JS91p x&y 如果 x 转换为boolean值时，结果为false，则不运行y，返回x的值 如果 x转换为boolean值时，结果为true，则运行y，返回y的值p x|y 如果 x 转换为boolean值时，结果为true，则不运行y，返回x的值 如果 x 转换为boolean值时，结果为false，则运行y，返回y的值逻辑运算符92HTML 和 CSS 学习大纲02 函数93p 函数的定义：function 关键字p 函数的调用： ( )p 函数的参数p 函数的返回值p 个数不定的参数：arguments关键字p 声明式函数：可以将函数赋值

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

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

24、window对象p 方法中的this关键字：当前对象p 严格模式与非严格模式中的this 严格模式中，函数中的this指向 undefined 非严格模式中，函数中的this指向 window方法100HTML 和 CSS 学习大纲03 宿主对象101p window对象的方法 alert() confirm() prompt() setInterval() setTimeout()BOM 浏览器对象模型p window对象的属性 location history screen navigator document102HTML 和 CSS 学习大纲04 DOM103p 文档对象模型：节点树

25、每个节点都是一个对象 结点关系DOM104p 文档对象模型：节点类型 元素节点 文本节点 属性节点DOM105p getElementById(id)p getElementsByTagName(tagName)p getElementsByClassName (className)p querySelector(selector)p querySelectorAll(selector)获取DOM结点106p 标准DOM用法 getAttribute(attr) setAttribute(attr, value) removeAttribute(attr)p DOM标准出现之前的写法 .（点）

26、 运算符 没办法删除一个属性获取和设置属性107p 遍历节点 childNodes nodeType nodeValue firstChild lastChild操作节点p 创建节点 innerHTML createElement(nodeName) createTextNode(text)p 插入节点 appendChild(child) insertBefore(new, ref)108p 操作 style 属性p 操作 classp 操作样式表文件CSS-DOM109p 内嵌事件处理函数p 分离事件处理函数和HTMLp DOM标准事件处理函数DOM事件110HTML 和 CSS 学习大纲05 表单111p HTML5表单验证 required、min、max、 number、email、url等p JavaScript表单验证表单