兄弟连最新HTML5培训课程大纲.docx

兄弟连最新HTML5培训课程大纲一、重大更新：兄弟连教育根据公司和行业发展的实际需要设计教学内容，现行的课程体系包括四大阶段和特级课：“基础网页布局与响应式布局”、“前端核心技术：Javascript”、HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全栈框架开发”，”特级课：微信开发”。二、课程介绍： 随着移动通信技术的革新及互联网产业的迅猛发展，以移动互联网为代表的移动数据业务呈现出快速增长的势头，尤其是近两年，移动通信带宽大幅提高，移动终端存储和处理能力不断增强，单一的语音服务和传统的移动增值服务已经不能满足商务活动、互动交流和多媒体服务等多元化的用户需求。作为下一代网页文本核心技术的 HTML5，它的出现成为移动互联网应用的又一选择。HTML5培训 是最近十年来 Web 开发标准最巨大的飞跃，目前苹果、谷歌、微软世界三大移动互联网巨头都支持了 HTML5，HTML5 的发展给移动互联网应用带来了全新的变化。HTML5 的出现，给移动互联网带来了新的变革，为移动互联网中富媒体的应用提供了新的思路，并具有广阔的应用前景。所以HTML5培训适应了目前的移动互联网应用潮流。本课程共88天，涉及到HTML5开发必备技术。课程内容上包括以下八个方面：Web页面制作基础，UI网站设计，编程基础技术，后端开发技术，移动互联网应用，特效开发高级实战，企业级应用开发以及网页游戏开发。课堂实例丰富，由浅入深，学习内容全面丰富。另外，目前的课程根据市场需求，每月一更新，经过许多htmlHTML5培训大牛参与修订，已达到和目前市场接轨，提供人才需求的目的，以达到真正实用的目的，能够与大型软件开发公司所需要的开发技术相吻合。课程中的每个知识点都是程序开发人员必不可少的内容，都可以提高开发人员的开发效率，开发出安全、稳定的Web系统。三、课程特点：1. 利用HTML5的多平台适应性，快速入门各种平台程序的开发。2. 上手比起源生ios和安卓开发较为容易。3. 采用案例式教学，通过实例理解掌握所学内容。4. 适合开发像微博，论坛等二次开发之类的HTML5项目。5. 课程的技术点完全采用公司规范，为了使学生熟练应用，降低入行难度。6. 学习周期短，以保证最短的时间可以达到HTML5应用开发的水平。7. 适合各种HTML5应用所需求的特效，就业面广。8. 对学员基础要求低。9. 采用公司规范，全程按照标准化进行学习，学员毕业即可上手工作。四、预期目标：1. 掌握HTML5应用开发技能。2. 符合企业需求的HTML5应用开发工程师。3. 精通HTML5前端技术，能够编写合格的应用。4. 能够独立自主开发具有个性化的HTML5应用。5. 通过这部分学习内容，可以融会贯通之前的基础部分。6. 熟悉HTML5应用的开发，管理，维护，优化流程，精通HTML5开发流程。7. 通过这部分课程可以加强HTML5开发部分学习，学员能够熟练进行HTML5应用开发。8. 掌握所有HTML5开发的高级技能，积累大型项目开发经验。9. 通过框架技术的学习，可以提高开发效率和应用质量。10. 熟悉应用的维护，优化，安全设置等。11. 通过MVC可以将表现和业务分离。12. 通过AJAX，jQuery等精通HTML5前台技术，编写出合格的界面。六、HTML5课程表阶段天数主要内容详细内容课时数可实现效果第一阶段基础网页布局与响应式布局25HTML CSSPS操作，网页切图基本网页布局HTML5 语义标签HTML5 智能表单CSS3Media Query响应式布局WEB开发构件系统及文件基本操作基本的快捷键描述WindowsMac OS编辑菜单Alt + ECtrl + F2 + F文件菜单Alt + FCtrl + F2 + E视图菜单Alt + VCtrl + F2 + V全选文本Ctrl + ACmd + A复制文本Ctrl + CCmd + C查找文本Ctrl + FCmd + F查找替换文本Ctrl + HCmd + F新建文档Ctrl + NCmd + N打开文件Ctrl + OCmd + O打印选项Ctrl + PCmd + P保存文件Ctrl + SCmd + S粘贴文本Ctrl + VCmd + V剪切文本Ctrl + XCmd + X重做文本Ctrl + YShift + Cmd + Z撤销文本Ctrl + ZCmd + Z文本编辑描述WindowsMac OS 光标移动操作文本编辑操作Web 浏览器操作 标签/窗口管理打印当前网页保存当前网页 地址栏操作书签操作屏幕截图WEB开发构件C/S结构B/S结构HTTP协议传输数据方式：post,getHTTP消息类型：2xx,4xx,5xxURL组成HTML介绍HTML发展史HTML5简介新标准引入原生多媒体支持引入可编程内容引入予以Webhttp协议HTTP消息类型：2xx,4xx,5xx开发软件nodepad+sublimedreamweaverHTML介绍HTML发展史HTML5介绍HTML基本语法与规范标签属性固有属性自定义属性通用属性元素父元素（理解）子元素兄弟元素后代元素主体结构长度单位颜色单位基础标签文本类标签文本格式化标签定义粗体文本定义加重语气定义着重文字定义斜体字 换行标签定义下标字定义上标字定义插入字定义删除字定义计算机代码定义键盘码定义计算机代码样本定义变量定义预格式文本定义缩写定义地址定义文字方向定义长的引用定义短的引用语定义引用、引证定义一个定义项目。计算机输出类语义，引用及标签定义链接标题HnHTML框架iframe段落P列表标签字符实体 空格  大于号>>&和号&&引号""撇号 ' (IE不支持)'分¢¢镑££日元¥¥欧元€€小节§§版权©©注册商标®®商标™™乘号××除号÷÷表格标签colgroupcaptiontabletheadcolspanthtbodytrtdcolspanrowspantfoot头部标签定义了文档的信息定义了文档的标题定义了页面链接标签的默认链接地址定义了一个文档和外部资源之间的关系定义了HTML文档中的元数据charsetNewcharacter_set定义文档的字符编码。contenttext定义与 http-equiv 或 name 属性相关的元信息。http-equivcontent-typedefault-stylerefresh把 content 属性关联到 HTTP 头部。nameapplication-nameauthordescriptiongeneratorkeywords把 content 属定义了客户端的脚本文件定义了HTML文档的样式文件多媒体标签1. img 1.1 导入一张图片1.2 属性src 图片地址width 设置图片宽height 设置图片高border 设置图片边框alt 不显示图片时的提示信息title 鼠标放上时显示的图片描述信息usemap map标签的name #name2. map2.1 给图片划分区域 配合area2.2 属性name 给map指定一个name3. area3.1 在map的配合下给图片划分指定形状的区域3.2 属性shape 划分的形状coords 形状的坐标href 要链接的地址target 新网页打开方式4. audio 4.1 导入音频的标签 HTML5新标签 4.2 属性 src 音频源的路径 必备controls 显示控制按钮 必备autoplay 自动播放loop 是否循环 preload 预加载 不能跟autoplay属性混用 4.3 audio标签内部加文字，如果浏览器支持这个标签则文字不会显示 ，如果不支持就会显示 4.4 audio标签的两个格式 简单格式 您的破浏览器不支持，请升级浏览器 完整格式 视频源单独放到source标签中 您的破浏览器不支持，请升级浏览器 5. video5.1 导入视频的标签 HTML5新标签5.2 属性src 路径controls 显示控制按钮autoplay 自动播放 属性值 auto noneloop 是否循环播放width 视频的宽 height 视频的高poster 缩略图地址6. source6.1 配合video标签 导入不同格式的视频 HTML5新标签6.2 属性src 视频地址7. canvas 用于画图的标签 8. embed 8.1 导入多媒体文件 音频 视频 HTML5新标签8.2 属性src 多媒体文件地址widthheightHTML表单及智能表单1. 表单相关标签1.1 form 客户端跟服务器端进行交互，常用语 登录 注册 调查问卷. 定义表单 所有的表单控件放在form中 属性 action 表单要提交的地址 method 提交方法 get（默认）提交的值会显示在url上 不安全而且传递的值数量有限 post 提交的内容不会显示 在url上，传递的值范围也比get方式的大，相对安全 target 打开新网页的方式 _self _blank _top _parent enctype=multipart/form-data 传文件必须加上1.2 input 定义输入框密码框单选框复选框. 属性 type input的类型 name input的名字 value input的值 checked 默认radio和checkbox size input框的大小 type:text password textarea maxlength input最大输入长度 type:text password1.3 button 以标签形式定义按钮 属性 type 设置submit（默认值）， 按钮具有提交功能 设置为button，普通按钮 reset 重置1.4 textarea 文本域 双标签 属性 name 指定名字 rows 指定行数 决定文本域高度 cols 指定列数 决定文本域宽度1.5 select 选择框 下拉框 单选框 属性 name 指定名字 multiple 设置为多选1.6 option 定义select中的的选项 属性 value 指定真正的值 selected 默认值1.7 optgroup 给option分组 不常用1.8 fieldset 套在form的外部 添加边框 不常用1.9 legend 在边框定义form的标题 不常用1.20 input select textarea button 称作表单控件元素1.21 通用属性 所有的表单控件元素都具有属性 disabled enabled(默认)2. form表单input中type类型text 文本框 value设置默认值password 密码框 value设置默认值radio 单选框 所有的redio name相同才能单选 value设置真正提交的值 默认的按钮可以设置checkedcheckbox 复选框 value设置真正提交的值 设置默认添加checked属性image 提交按钮，按钮样式来自图片 配合src属性submit 提交按钮， value指定按钮上的文字reset 重置按钮 value指定按钮上的文字button button按钮 value指定按钮上的文字file 上传框hidden 隐藏域 name value 3. label标签用来嵌套input， 点击label嵌套的任何元素都可以激活label内的input属性 for 指定 input的id语义标签定义了文档的头部区域定义运行中的进度（进程）。定义页面独立的内容区域。规定独立的流内容（图像、图表、照片、代码等等）。定义 元素的标题定义页面的侧边栏内容。定义文档中的节（section、区段）。定义 section 或 document 的页脚。定义文档作者或拥有者的联系信息允许您设置一段文本，使其脱离其父元素的文本方向设置。定义命令按钮，比如单选按钮、复选框或按钮用于描述文档或文档某个部分的细节标签包含 details 元素的标题定义对话框，比如提示框dtdd定义带有记号的文本。定义度量衡。仅用于已知最大和最小值的度量。定义任何类型的任务的进度。定义 ruby 注释（中文注音或字符）。定义字符（中文注音或字符）的解释或发音。在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。定义日期或时间。规定在文本中的何处适合添加换行符。CSS基础与规范知识1. CSS的定义 Cascading Style Sheets 层叠样式表（级联样式表）2. CSS的作用 定义网页外观，如字体、背景、颜色等3. CSS特点 精确的定位 准确的控制页面的任何元素 精细的控制 可以做到像素级别的调整 样式与内容的分离 便于维护，便于重用4. 发展历程 CSS1作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。 CSS2 作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。 CSS3 CSS3 计划将 CSS 划分为更小的模块。2001年至今 HTML5+CSS3CSS选择器HTML tagClass包含选择器：div span aID组合选择 div,span,a任意选择器（通配符选择器）*关系选择器包含选择符子选择符相邻选择符兄弟选择符属性选择器伪类选择器伪对象选择器CSS3属性尺寸边框背景内补白外补白布局定位字体文本列表表格用户界面多栏2D变换过渡动画Photoshop网页设计基础I设计介绍photoshop安装与设置位图与矢量图网页常用图片格式图像大小与分辨率选区创建和编辑选区的创建选区工具M套锁工具L快速选区工具W和魔术棒W钢笔选区创建矢量路径锚点操作钢笔工具形状转选区ctrl+Enter选区的编辑选区的存储应用辅助功能使用标尺ctrl+R设置网格：视图显示网格ctrl+应用变换功能选择可变换选区ctrlT缩放旋转扭曲透视变形水平翻转垂直翻转应用内容识别比例功能操控变形裁剪图像裁剪工具 基础绘画了解绘画和绘画修饰工具画笔颜色替换涂抹工具绘画的基本技巧绘制直线,按住shift绘制曲线 定义颜色使用拾色器渐变工具填充前景色：altdelete填充背景色：controldelete为图像填充颜色shift+f5图形、路径计算网页布局规范Web设计规范banner设计网页栅格系统网页构成命名规范导航设计版式设计网页配色Photoshop网页切图网页切图及切图常见问题精灵图片技术专题页设计W3C盒子模型div+css网页布局HTML5兼容性处理使用 HTML5布局元素的布局Media Query响应式布局原生响应式布局媒体查询+尺寸属性：百分比，max-width,max-height,min-width,min-height200表格制作个人简历使用表单制作注册页面div+css基本网页布局PS网页设计精灵图片技术语义化标签布局智能表单验证多媒体播放css3:圆角边框、边框九宫格特效、多图背景、动画、渐变和倒影、多列属性布局、服务器端字体响应式网页实现第二阶段前端核心技术：Javascript30JavascriptAjaxJQueryJS高级特效JavaScript 脚本语言 什么是JavaScript？ 1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。 2. JavaScript 通常被直接嵌入 HTML 页面。 3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 特点： 1. 弱类型 2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOMJavaScript是基于对象的脚本语言。在HTML中如何使用JavaScript1. 使用标签： 属性： charset（可选）字符集设置、 defer（可选执行顺序）值：defer、 language(已废除)、 src（可选）使用外部的js脚本文件 type(必选)类型：值：text/javascript 2. 在html标签的事件中，超级链接里。 点击3. 外部导入方式（推荐）： JavaScript的语法：1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。2.他和php一样属于弱类型语言。3.每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是;分号(推荐)4.脚本注释： / 单行注释 /* 多行注释 */5.括号表示代码块:6.变量的定义：使用var关键字来声明。 变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。 变量名不可以使用关键字. typeof函数获取一个变量的类型： 7.JavaScript的数据类型： undefined 类型 null 类型（对象） boolean 类型 number 类型 object引用类型 8. 类型转换：JavaScript的运算符1. 一元运算符 delete：用于删除对象中属性的 如：delete ; /删除o对象中的name属性 void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。 + - 一元加法和一元减法2. 位运算符 位运算 NOT 位运算 AND & 位运算 OR | 位运算 XOR (不同为1，相同则为0) 左移运算 3. 逻辑运算符 逻辑 NOT ! 运算符 非 逻辑 AND & 运算符 与 逻辑 OR | 运算符 或4. 乘性运算符：*（ 乘） /(除) %（取模）求余5. 加性运算符： + - *其中+号具有两重意思：字串连接和数值求和。 就是加号”+“两侧都是数值则求和，否则做字串连接 6. 关系运算符 = = =10 逗号运算符 用逗号运算符可以在一条语句中执行多个运算。 var iNum1=1, iNum2=2, iNum3=3; javaScript（语句流程控制）1. 判断语句 if语句； if. else . if . else if . else.2. 多分支语句： switch（）。 case ：。 switch (i) case 20: alert(20); break; case 30: alert(30); break; case 40: alert(40); break; default: alert(other); 3. 循环语句（迭代语句） for： while do.while *for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。 var a = 10,20,30,40,50; /迭代的是数组的下标。 for(i in a) document.write(ai); /输出： 1020304050 4. break 和 continue 语句对循环中的代码执行提供了更严格的控制。 5. *with 语句用于设置代码在特定对象中的作用域。/扩充知识： 1. 在网页文档中获取一个节点对象（HTML标签） document.getElementById(mid); /获取标签id属性值为mid的节点对象2. 定时相关函数： setTimeout(vCode, iMilliSeconds , sLanguage) - 单次定时执行指定函数 clearTimeout(iTimeoutID) - 取消上面的单次定时 setInterval(vCode, iMilliSeconds , sLanguage) -无限次定时执行指定函数 clearInterval(iIntervalID)- 取消上面的多次定时一、JavaScript的函数：标准格式： function 函数名（参数列表.） 函数体。 return 返回值; JavaScript三种定义函数方法：*第一种是使用function语句定义函数 如上面格式 第二种是使用Function()构造函数来定义函数（不常用） var 函数名 = new Function(“参数1”，”参数2”，”参数3”函数体”); 如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);*第三种是在表达式中定义函数 var 函数名 = function(参数1，参数2，)函数体; /例如： /定义 var add = function(a,b) return a+b; /调用函数 document.write(add(50,20); arguments 对象 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。 例如，在函数 sayHi() 中，第一个参数是 message。用 arguments0 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0， 第二个参数位于位置 1，依此类推）。 关于变量和参数问题： 函数外面定义的变量是全局变量，函数内可以直接使用。 在函数内部没有使用var定义的=变量则为全局变量， *在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。 js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持） 二、系统中常用的内置函数： escape() /字串编码unescape() /字串反编码*eval() /将参数字符串作为脚本代码来执行。*isNaN() / is not a number (不是一个数值)*parseInt()*parseFloat() 三、JavaScript的对象的定义和使用1.使用构造函数创建内置对象 var myObject = new Object(); myO = “lijie”; myObject.age = 20; myObject.say = function().2.直接创建自定义对象 var 对象名 = 属性名1：属性值，属性名2：属性值2，.*3.使用自定义构造函数创建对象 function pen(name,color,price) /对象的name属性 = name; /对象的color属性 this.color = color; /对象的piece属性 this.price = price; /对象的say方法 this.say = function(); var pen = new pen(“铅笔”,”红色”,20); pen.say();一、forin语句- for(var i in window) document.write(i+”-”+windowi); 这种语句可以遍历对象中的所有属性或数组中的所有元素。二、with语句- 如果使用with语句，就可以简化对象属性调用的层次。 document.write(test1); document.write(test2); document.write(test3); 可以使用with来简化： with(document) write(test1); write(test2); write(test3); 三、JavaScript内置对象 * Array（数组） var a= new Array(); /创建一个空数组 a = new Array(10); /创建一个数组单元为10个的数组。 a = new Array(10,20,30);/创建一个指定数组单元的数组。 a=a,b,c,d; /快捷定义数组 常用属性： length-获取长度。 常用方法： toString() 把数组转换为字符串，并返回结果。 sort() 对数组的元素进行排序 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度。 。 * Boolean 布尔值包装类对象 方法：toSource() 返回该对象的源代码。 toString() 把逻辑值转换为字符串，并返回结果。 valueOf() 返回 Boolean 对象的原始值。* Date var dd = new Date(); getDate() 从 Date 对象返回一个月中的某一天 (1 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 6)。 getMonth() 从 Date 对象返回月份 (0 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 23)。 getMinutes() 返回 Date 对象的分钟 (0 59)。 getSeconds() 返回 Date 对象的秒数 (0 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 同上还有很多set方法用来设置。 * Math 对象用于执行数学任务。方法是静态的。 abs(x) 返回数的绝对值。 ceil(x) 对数进行上舍入。 floor(x) 对数进行下舍入。 random() 返回 0 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 * Number toString(); toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。 * String 子串处理对象 anchor() 创建 HTML 锚。 *charAt() 返回在指定位置的字符。 charCodeAt()返回在指定的位置的字符的 Unicode 编码。 *indexOf() 检索字符串。 *lastIndexOf() 从后向前搜索字符串。 match() 找到一个或多个正在表达式的匹配。 *replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 split() 把字符串分割为字符串数组。 substr() 从起始索引号提取字符串中指定数目的字符。 *substring() 提取字符串中两个指定的索引号之间的字符。 toLocaleLowerCase() 把字符串转换为小写。 toLocaleUpperCase() 把字符串转换为大写。 *toLowerCase() 把字符串转换为小写。 *toUpperCase() 把字符串转换为大写。* RegExp exec()正则匹配 test() match()* Global escape(string) - 可对字符串进行编码 unescape(string) - 函数可对通过 escape() 编码的字符串进行解码。 encodeURI(URIstring) - 函数可把字符串作为 URI 进行编码。 decodeURI(URIstring) - 函数可对 encodeURI() 函数编码过的 URI 进行解码。 *eval(string) - 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 getClass(javaobj) - 函数可返回一个 JavaObject 的 JavaClass。 *isNaN(x) - 函数用于检查其参数是否是非数字值。 Number(object) -函数把对象的值转换为数字。 *parseFloat(string) - 函数可解析一个字符串，并返回一个浮点数。 *parseInt(string, radix) 事件处理一、事件源: 任何一个HTML元素（节点） body, div , button p, a, h1 . 二、事件: 你的操作 鼠标: * click 单击 dblclick 双击 contextmenu (在body) 文本菜单（鼠标右键使用） 要想屏蔽鼠标右键使用return false window.document.oncontextmenu=function(ent). * mouseover 放上(移入) * mouseout 离开（移出） mousedown 按下 mouseup 抬起 * mousemove 移动 键盘： keypress 键盘事件 keydown 按下 文档：(主要使用在body标签中) * load 加载 unload 关闭(为了兼容可使用下面函数) beforeunload 关闭之前 表单： * focus 焦点 * blur 失去焦点 * submit 提交事件 * change 改变（如下拉框选择事件） 其它： * scroll 滚动事件(常用延迟加载、瀑布流技术) window.onscroll=function() document.documentElement.scrollTop;/获取滚动条的上距离 document.documentElement.scrollLeft;/滚动条的左距离 selectd 事件 。三、事件处理程序 使用一个匿名或回调函数有三种方法加事件 第一种： 格式： *第二种： 对象.on事件=事件处理程序 第三种：(火狐不兼容) 事件处理程序事件对象：属性： 1. srcElement 2. keyCode 键盘值 事件 event window.event 1. srcElement 代表事件源对象 2. keyCode 事件发生时的键盘码 keypress , keydown keyup 3. clientX, clientY 坐标位置 4. screenX, screenY 5. returnValue 6. cancelBubble; /为页面添加鼠标右点击事件