Web前端技术培训课件_第1页
Web前端技术培训课件_第2页
Web前端技术培训课件_第3页
Web前端技术培训课件_第4页
Web前端技术培训课件_第5页
已阅读5页，还剩118页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

中国移动通信集团黑龙江有限公司2015.13Web前端技术培训中国移动通信集团黑龙江有限公司2015.13Web前端技术什么是Web前端Web系统服务器客户端客户端客户端客户端什么是Web前端Web系统服务器客户端客户端客户端客户Web前端三要素HTMLCSSJavaScriptWeb前端三要素HTMLCSSJavaScript课程大纲

HTML

CSSJavaScript课程大纲HTML第一部分HTML和CSS第一部分HTML标签开发工具超链接CSS选择器颜色盒模式图片HTML和CSS学习大纲字体表单表格浮动定位iframe搜索引擎优化HTML标签HTML和CSS学习大纲字体HTML和CSS学习大纲01-HTML标签HTML和CSS学习大纲01-HTML标签使用HTML标签组织网页结构标题标签headingtag：<h1>–<h6>段落标签paragraph：<p>无序列表unorderedlist：<ul>列表项listitem：<li>有序列表orderedlist：<ol>使用HTML标签组织网页结构标题标签headingtW3C万维网联盟：

TheWorldWideWebConsortium创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C已发布了200多项影响深远的Web技术标准及实施指南如HTML、CSS、WCAG等。W3C万维网联盟：创建于1994年，是Web技术领域最具权把所有显示在网页中的内容放入body标签网页中的不可见部分放入head标签中将所有HTML代码放入<html>标签中DOCTYPE：表示HTML的版本信息使用网页基本结构标签组织整个页面把所有显示在网页中的内容放入body标签使用网页基本结构标签HTML和CSS学习大纲02-开发工具HTML和CSS学习大纲02-开发工具UltraEdit、EditPlus：代码颜色、多文件编辑Dreamweaver、Sublime、WebStorm：神器常用开发工具介绍UltraEdit、EditPlus：代码颜色、多文件编辑常官方下载地址：http:///webstorm安装启动配置：字体大小和配色方案的设置使用WebStorm编写HTMLWebStorm的安装、启动、配置和使用官方下载地址：http://www.jetbrains.cHTML和CSS学习大纲03-超链接HTML和CSS学习大纲03-超链接在浏览器中输入URL时发生了什么/news服务器请求request响应response/news在浏览器中输入URL时发生了什么https://www.ja点击超链接，连接中有一个文件请求被发送给服务器在浏览器中点击超链接时发生了什么/news1浏览器请求

request服务器/resources/news点击超链接，连接中有一个文件请求被发送给服务器在浏览器中点击服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件在浏览器中点击超链接时发生了什么/resources2浏览器响应response新的页面地址服务器/resources/news服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件在浏览<a>标签：网页中可点击的超链接href属性：超链接指向的URL地址（hypertextreference）target属性：当超链接被点击的时候，新页面打开的位置如何制作超链接_blank：在浏览器的新标签或新窗口中打开页面_self：在当前窗口中打开页面，替换原来的页面如果不添加target属性，那么默认值是_self<a>标签：网页中可点击的超链接如何制作超链接_blank：绝对路径向一个特定的服务器上的文件发送请求绝对路径、相对路径和根路径HTML相对路径不指定服务器，参照发送请求页面的URLHTML根路径前面总是包含“/“，在绝对路径的基础上去掉协议和主机名HTML绝对路径向一个特定的服务器上的文件发送请求绝对路径、相对路径04–CSS选择器04–CSS选择器HTML考古：当Web开发还是一项新技术时，html的内容和样式没有被分开将内容和样式分离HTML内容和样式分离：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子CascadingStyleSheets

层叠样式表HTML考古：当Web开发还是一项新技术时，html的内容和选择器：可以选择html标签类型选择器：不带尖括号的标签名派生选择器：作用在某些标签的子标签上选择器选择器：可以选择html标签选择器添加CSS样式的位置：在head标签中添加style子标签使用<link>标签将CSS和所有的html文件关联在一起把样式表放在什么地方？添加CSS样式的位置：在head标签中添加style子标签把W3School/MDN/zh-CN/docs/Web/Tutorials网络平台：HTML网络平台：CSS参考手册W3School参考手册05–颜色black#FF000005–颜色black#FF0000CSS颜色红色黑色黄色关键字颜色十六进制颜色rgb颜色CSS颜色红色黑色黄色关键字颜色十六进制颜色rgb颜色每个十六进制颜色由三部分组成十六进制色（Hexadecimalcolors）#FFFF00红色的多少绿色的多少蓝色的数量取值范围：16进制的00-FF，10进制的0-255每个十六进制颜色由三部分组成十六进制色（Hexadecima使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的取值网页的颜色256ⅹ256ⅹ256=16777216使用十六进制数来设置颜色，三个部分，每个颜色有256种可能的06–盒模式06–盒模式在body中的每个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。盒HTML在body中的每个HTML标签实际上都被包围在一个看不见的矩marginborderpadding内容区域–contentarea内容区域中包含的是盒子中真正的内容（文本、图片等）补白或内边距–paddingpadding包围在内容区域的边缘，上右下左边框–borderborder包围在padding的边缘，上右下左边距–marginmargin包围在border的上右下左四个边缘盒模式marginborderpadding内容区域–contwidth：宽height：高border：边框padding：内补白margin：外边距display：显示盒模式相关属性计算盒子的尺寸属性设置的更多形式marginborderpaddingwidth：宽盒模式相关属性计算盒子的尺寸marginborblock、inline、inline-block、nonedisplay属性display显示位置默认宽高可设置宽高可设置padding可设置marginblock换行父元素宽度内容高度是是是inline同行内容宽高否是左右inline-block同行内容宽高是是是none隐藏--------block、inline、inline-block、nonediv布局入门divdivdivdivdiv布局入门divdivdivdiv07–图片07–图片网页中出现的大部分图片都属于以下这三种类型内容图片布局图片用户交互图片三种网页图片网页中出现的大部分图片都属于以下这三种类型三种网页图片<img>标签创建内容图片src属性：图片的路径alt属性：图片的简单描述可访问性：搜索引擎、屏幕阅读器HTML<img>标签创建内容图片src属性：图片的路径HTML使用CSS中的background属性background-colorbackground-imagebackground-repeatbackground-position创建布局图片使用CSS中的background属性创建布局图片图片精灵sprite：把小图标放在同一个文件中，提高性能用户交互图片很多都是小图标，适合使用用户交互图片图片精灵图片精灵sprite：把小图标放在同一个文件中，提高性能图JPEG、PNG和GIF复杂颜色的图像和照片则要使用JPEG格式动态图像要使用GIF格式PNG格式的透明图片要比GIF格式的更平滑这三种图像相对于其他格式的图像文件比较小，适合Web页面Web上最常用的三种图像格式JPEG、PNG和GIF复杂颜色的图像和照片则要使用JPE08–字体08–字体CSS可以指定和改变字体外观的常用CSS属性使用CSS改变字体CSSfont-stylefont-weightfont-sizeline-heightfont-familyCSS可以指定和改变字体外观的常用CSS属性使用CSS改变字CSS使用字体列表优先使用的字体备用自体通用字体系列CSS使用字体列表优先使用的字体备用自体通用字体系列通用字体系列无衬线字体笔画粗细一致有衬线字体笔画末端有装饰性的线条或凸起通用字体系列无衬线字体有衬线字体通用字体系列等宽字体每个字母宽度一致用于显示软件代码示例手写体装饰性字体设计感较强通用字体系列等宽字体手写体装饰性字体09–表单09–表单表单的工作方式/...php、jsp、node.js等等服务器脚本用户名：Helen密码：******是否自动登录处理数据表单的工作方式/..表单的工作方式/...HTML服务器php、jsp、node.js等等脚本处理数据用户名：Helen密码：******是否自动登录表单的工作方式/..美食网表单美食网表单10–表格10–表格要创建一个最简单的表格，至少需要三个标签table：表格标签tr：表格行标签，tablerowtd：数据单元格标签，tabledata表格基本标签tabletrtd要创建一个最简单的表格，至少需要三个标签表格基本标签tabl标签table、tr、td、ththead、tbody、tfootcaption合并单元格属性colspan：跨列单元格rowspan：跨行单元格制作一个表格标签制作一个表格11–浮动11–浮动浏览器在页面上摆放HTML元素所用的方法文档流h1h2pp块元素的文档流浏览器在页面上摆放HTML元素所用的方法文档流h1h2pp块浏览器在页面上摆放HTML元素所用的方法文档流labelinputaimg内联元素的文档流img浏览器在页面上摆放HTML元素所用的方法文档流labelinfloat属性：left|right浮动元素的特点默认宽度是内容的宽度向指定方向移动，排在前一个浮动元素的旁边，浮动在后面的元素的上面半脱离文档流浮动float属性：left|right浮动clear属性添加空元素定义clearfix类清除浮动的几种方法clear属性清除浮动的几种方法12–定位12–定位position属性：static（默认值）|relative|absolute|fixed精确控制标签在HTML文档中的位置（对static不起作用）top、right、bottom、left定位position属性：定位定位static：默认值元素在正常的文档流中显示absolute：绝对定位宽度是内容的宽度脱离文档流，后面的元素会忽视绝对定位元素的存在参照物为第一个定位祖先，如果没有定位祖先则参照物是html元素relative：相对定位在正常文档流中显示，相对于原来位置偏移参照物是元素本身通常作为绝对定位元素的参照物fixed：固定定位宽度为内容的宽度，脱离文档流参照物是浏览器窗口，固定不动定位static：默认值absolute：绝对定位relatz-indexz-indexz-index:9;z-index:1;z-indexz-index:9;z-index:1;z-index13–iframe13–iframeHTMLiframe：内联框架，在网页中任意的位置嵌入另一个网页iframe绝对路径或相对路径HTMLiframe：内联框架，在网页中任意的位置嵌入另一个14–搜索引擎优化14–搜索引擎优化HTML使用meta标签提高搜索排名HTML使用meta标签提高搜索排名多使用标题标签：<h1>–<h6>添加img标签的alt属性：一些标签的title属性：优化HTML文档HTMLHTML多使用标题标签：<h1>–<h6>优化HTML文档HTM第二部分JavaScript第二部分JavaScript历史BrendanEich为了解决浏览器与用户交互的问题，用了10天时间设计了JavaScript语言借鉴C的基本语法借鉴Java的数据类型和内存管理借鉴Scheme的函数式编程借鉴Self的基于原型的继承机制1995年：JavaScript1.0JavaScript历史BrendanEich为了解决浏ECMAScript1997年6月：JavaScript1.11998年6月：ECMAScript21999年12月：ECMAScript32009年12月：ECMAScript5（从IE10开始完美支持）2015年6月：ECAMAScript6ECMAScript1ECMAScript2015EuropeanComputerManufacturesAssociation欧洲计算机制造联合会ECMAScript1997年6月：JavaScript1JavaScript学习大纲快速入门函数宿主对象DOM表单面向对象编程内置对象AJAXJavaScript学习大纲快速入门表单HTML和CSS学习大纲01–快速入门HTML和CSS学习大纲01–快速入门第一个程序：<script>和alert()JavaScript的工作方式：<head>中和<body>中<script>标签中和内联事件中JavaScript是一门解释型语言控制台输出：console.log();准备工作第一个程序：<script>和alert()准备工作语句多条语句可以写在同一行，也可以写在不同的行中同一行中的两条语句之间要用分号分隔不同行中的语句末尾可以不用分号，建议使用分号注释：注释是给开发人员看到，JavaScript引擎会自动忽略单行：//注释内容可以独立成行，可以在行尾多行：/*

注释内容

*/可以独立，可以在行中，不可以嵌套基本语法语句基本语法变量的声明：var变量的定义：=变量的使用：不要使用引号变量变量的声明：var变量区分大小写MOOD和mood是不同的变量变量名只允许包含字母、数字、美元符号、下划线如：mymood=‘happy’;不合法第一个字符不能是数字如：2mood=‘happy’;不合法变量名不能使用关键字和保留字如：alert，if，class都是不合法的变量名命名规范：首写字母小写mood、myMood或my_mood的形式变量的命名规则区分大小写变量的命名规则可以不使用var声明变量是JavaScript的设计缺陷ES5中的严格模式启用严格模式：在JavaScript代码第一行写上'usestrict'严格模式JS可以不使用var声明变量是JavaScript的设计缺陷严格JavaScript：弱类型语言，可以在任何阶段改变数据类型字符串数值布尔值undefined、null对象函数数据类型JavaScript：弱类型语言，可以在任何阶段改变数据类型由零和或多个字符构成，必须写在引号里可以使用单引号或双引号使用转义字符：\注意：不管使用双引号还是单引号，请在脚本中保持一致多行字符串字符串String由零和或多个字符构成，必须写在引号里字符串StringJavaScript不区分整数和浮点数以下都是合法的number类型数值numberJSJavaScript不区分整数和浮点数数值numberJS两个可选值：true或false布尔值booleanJS两个可选值：true或false布尔值booleanJundefined：未定义null：空undefined和nullundefined：未定义undefined和null数组是一组按顺序排列的集合，集合的每个值称为元素可以使用[]定义数组数组的元素可以通过索引来访问通过length属性访问数组的长度数组Array数组是一组按顺序排列的集合，集合的每个值称为元素数组ArrJavaScript的对象是一组由属性-值组成的无序集合可以使用{}定义对象对象的属性都是字符串类型，可以写引号，也可以不写对象的值可以是任意数据类型使用.属性名或

['属性名']运算符访问对象的属性对象ObjectJavaScript的对象是一组由属性-值组成的无序集合对象条件判断语句：if、switch循环迭代语句：while、do-while、for、for-in流程跳转语句：break、continue结构控制语句条件判断语句：if、switch结构控制语句类型结果undefinedfalsenullfalseboolean不转换number如果值为0或NaN，则结果为false；否则为trueString如果值为空字符串，则结果为false；否则为trueObjecttrue布尔环境的类型转换类型结果undefinedfalsenullfalseboo算数运算（+、-、*、/、%、++、--）关系运算（>、<、==、!=、>=、<=、===、!==）逻辑运算（!、&&、||）位运算（&、|、^、~、<<、>>、>>>）赋值运算（=、

+=、-=、*=、/=、%=、<<=、>>=、>>>=）条件运算（?:）逗号运算（,）对象运算（new、delete、.、[]、instanceof）运算符算数运算（+、-、*、/、%、++、--）运算符算数环境的类型转换类型结果undefinedNaNnull0booleantrue是1，false是0number不转换String空字符串转换为0，数值字符串转换为数值，其它是NaNObjectNaN算数环境的类型转换类型结果undefinedNaNnull0字符串环境的类型转换类型结果undefined‘undefined’null‘null’boolean‘true’和‘false’number‘0’，‘123’，’Infinity’，’NaN’，String不转换Object'[objectObject]'字符串环境的类型转换类型结果undefined‘undefi===只要数据类型不一致，则返回false，如果一致，再比较==如果数据类型相同，则直接比较如果数据类型不同，则先转换成数值再比较，有时会得到非常诡异的结果例外规则：判断一个值是不是NaN要使用

isNaN()函数比较运算符JS===比较运算符JSx&&y如果x转换为boolean值时，结果为false，则不运行y，返回x的值如果x转换为boolean值时，结果为true，则运行y，返回y的值x||y如果x转换为boolean值时，结果为true，则不运行y，返回x的值如果x转换为boolean值时，结果为false，则运行y，返回y的值逻辑运算符x&&y逻辑运算符HTML和CSS学习大纲02–函数HTML和CSS学习大纲02–函数函数的定义：function关键字函数的调用：()函数的参数函数的返回值个数不定的参数：arguments关键字声明式函数：可以将函数赋值给变量基本概念函数的定义：function关键字基本概念函数内声明的变量，作用域在函数内部，叫做局部变量不同函数内部的同名变量互相独立，互不影响内部函数可以访问外部函数定义的变量，反过来则不行如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量注意：非严格模式下不使用var声明的变量，将自动变为全局变量变量的作用域–函数作用域函数内声明的变量，作用域在函数内部，叫做局部变量变量的作用域所有函数内声明的变量会“提升”到函数顶部建议：先声明函数内部用到的所有变量函数作用域中的变量提升所有函数内声明的变量会“提升”到函数顶部函数作用域中的变量提函数外声明的变量，作用域在全局范围内，叫做全局变量任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误命名冲突：不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突定义名称空间变量作用域-全局作用域函数外声明的变量，作用域在全局范围内，叫做全局变量变量作用域在浏览器环境中的JavaScript有一个全局对象window全局作用域的变量实际上被绑定到window的一个属性全局作用域中的window对象在浏览器环境中的JavaScript有一个全局对象windES6之前没有块级作用域ES6中引入let关键字替代var声明块级作用域ES6种引入const关键字定义块级别常量变量作用域-块级作用域ES6之前没有块级作用域变量作用域-块级作用域绑定到对象上的函数称为方法函数中的this关键字：window对象方法中的this关键字：当前对象严格模式与非严格模式中的this严格模式中，函数中的this指向undefined非严格模式中，函数中的this指向window方法绑定到对象上的函数称为方法方法HTML和CSS学习大纲03–宿主对象HTML和CSS学习大纲03–宿主对象window对象的方法alert()confirm()prompt()setInterval()setTimeout()BOM–浏览器对象模型window对象的属性locationhistoryscreennavigatordocumentwindow对象的方法BOM–浏览器对象模型windowHTML和CSS学习大纲04–DOMHTML和CSS学习大纲04–DOM文档对象模型：节点树每个节点都是一个对象结点关系DOM文档对象模型：节点树DOM文档对象模型：节点类型元素节点文本节点属性节点DOM文档对象模型：节点类型DOMgetElementById(id)getElementsByTagName(tagName)getElementsByClassName

(className)querySelector(selector)querySelectorAll(selector)获取DOM结点getElementById(id)获取DOM结点标准DOM用法getAttribute(attr)setAttribute(attr,value)removeAttribute(attr)DOM标准出现之前的写法

.（点）

运算符没办法删除一个属性获取和设置属性标准DOM用法获取和设置属性遍历节点childNodesnodeTypenodeValuefirstChildlastChild操作节点创建节点innerHTMLcreateElement(nodeName)createTextNode(text)插入节点appendChild(child)insertBefore(new,ref)遍历节点操作节点创建节点操作style属性操作class操作样式表文件CSS-DOM操作style属性CSS-DOM内嵌事件处理函数分离事件处理函数和HTMLDOM标准事件处理函数DOM事件内嵌事件处理函数DOM事件HTML和CSS学习大纲05–

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论