整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML5+CSS3 Web前端开发与实例教程：微课视频版》
本书内容
《HTML5+CSS3 Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项目实战操作，体现育人、应用和创新三项能力。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套提供课程思政元素、案例源代码、PPT课件、课后习题与答案、微课视频、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程、企业高频面试题、学科竞赛真题等丰富的教学资源，并设有QQ群提供线上学习跟踪和指导服务。
《HTML5+CSS3 Web前端开发与实例教程：微课视频版》共分14章，系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。
本书作者
卢欣欣，副教授。长期从事高校教学工作，专注Web应用开发，项目开发经验丰富。主讲《Web程序设计》《高级程序设计》《软件开发综合实践》等课程，先后主编教材2部，参编教材3部。在慕课网上线的《企业网站综合布局实战》课程学习人数超15万人。
崔仲远，副教授，毕业于北京交通大学。长期从事高校教学工作和软件项目开发工作，实战开发经验丰富。先后承担《网页特效设计》《Web前端基础》《跨平台脚本开发技术》等多门课程的教学任务，发表学术论文多篇，主编教材2部，参编教材3部、专著1部。主持省级教改项目1项、科研项目1项。
本书读者
《HTML5+CSS3 Web前端开发与实例教程：微课视频版》既可作为本专科院校计算机相关专业的Web程序设计、网页设计与制作等课程的教材，也可作为Web应用开发人员的自学手册和技术参考书。
本书目录
第1章 Web前端开发概述 1
1.1 Web前端开发职责 1
1.2 Web前端开发相关概念 2
1.3 Web前端开发相关技术 3
1.3.1 Web标准 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端开发工具 5
1.4.1 代码编辑工具：VSCode 6
1.4.2 代码运行工具：浏览器 8
1.4.3 开发者工具 9
1.4.4 人工智能辅助编程工具 10
1.5 网站设计与开发流程 11
1.6 实战案例：网页显示“社会主义核心价值观” 12
1.7 本章小结 13
第2章 HTML5基础 14
2.1 HTML5语法基础 14
2.1.1 HTML文档结构 14
2.1.2 HTML标签语法 17
2.1.3 HTML注释 18
2.2 文本控制标签 19
2.2.1 标题标签 19
2.2.2 段落标签 20
2.2.3 换行标签 20
2.2.4 文本格式化标签 21
2.2.5 特殊字符 22
2.3 图像标签 23
2.3.1 网页常用图像格式 23
2.3.2 图像标签的使用 24
2.3.3 相对路径与绝对路径 26
2.4 超链接标签 27
2.4.1 文本链接 27
2.4.2 图像链接 28
2.4.3 书签（锚点）链接 28
2.4.4 其他链接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 无序列表 32
2.5.3 定义列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格结构 36
2.6.2 表格标签 37
2.7 视频和音频标签 41
2.7.1 视频标签 41
2.7.2 音频标签 42
2.8 其他标签 42
2.8.1 预格式化标签 42
2.8.2 水平线标签 43
2.8.3 行内容器标签 43
2.9 实战案例：“大学生参军网站”兵役登记页面 44
2.10 本章小结 46
第3章 HTML5页面元素和属性 47
3.1 文档结构标签 47
3.1.1标签 47
3.1.2标签 49
3.1.3标签 50
3.1.4标签 51
3.1.5标签 53
3.1.6标签 53
3.1.7和标签 54
3.1.8标签 55
3.2 交互元素 55
3.2.1 标签 55
3.2.2 标签 56
3.2.3标签 57
3.3 文本层次语义标签 58
3.3.1 标签 58
3.3.2 标签 59
3.3.3 标签 60
3.4 全局属性 61
3.5 实战案例：“大学生参军网站”页面结构 62
3.6 本章小结 64
第4章 表单 65
4.1 表单概述 65
4.2标签 67
4.3 标签 68
4.3.1 单行文本框 69
4.3.2 密码框 69
4.3.3 文件域 70
4.3.4 单选按钮和复选框 71
4.3.5 隐藏域 73
4.3.6 按钮 73
4.3.7 HTML5新增输入元素 76
4.4 标签 78
4.5 标签 79
4.6 选择列表标签 80
4.7 多行文本框标签 83
4.8 表单常用属性 84
4.9 实战案例：“大学生参军网站”网上咨询表单 86
4.10 本章小结 88
第5章 CSS3基础 89
5.1 CSS概述 89
5.2 CSS语法规则 90
5.3 CSS样式的引入方法 91
5.3.1 行内样式表 91
5.3.2 内部样式表 92
5.3.3 外部样式表 93
5.4 CSS基本选择器 94
5.4.1 标签选择器 94
5.4.2 ID选择器 95
5.4.3 类选择器 95
5.4.4 通用选择器 97
5.5 实战案例：“大学生参军网站”公共样式表制作 97
5.6 本章小结 98
第6章 CSS3修饰页面元素 99
6.1 CSS字体样式 99
6.1.1 字体粗细属性 99
6.1.2 字体风格属性 100
6.1.3 字体大小属性 101
6.1.4 字体族属性 103
6.1.5 字体属性 106
6.2 CSS文本样式 107
6.2.1 行高属性 107
6.2.2 颜色属性 109
6.2.3 文本水平对齐属性 110
6.2.4 首行缩进属性 111
6.2.5 文本修饰属性 111
6.2.6 字符间距属性 112
6.2.7 字间距属性 113
6.2.8 字母大小写属性 114
6.2.9 文本阴影效果属性 115
6.3 CSS表格样式 116
6.4 CSS表单样式 118
6.4.1 单行文本框美化 119
6.4.2 按钮美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表样式 122
6.6 实战案例：“大学生参军网站”在线咨询页面 123
6.7 本章小结 126
第7章 CSS3高级选择器 127
7.1 组合选择器 127
7.1.1 交集选择器 127
7.1.2 并集选择器 128
7.1.3 后代选择器 129
7.1.4 子元素选择器 130
7.1.5 相邻兄弟选择器 131
7.1.6 通用兄弟选择器 132
7.2 属性选择器 133
7.3 伪类选择器 134
7.4 伪元素选择器 136
7.5 CSS三大特性 138
7.6 本章小结 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 认识盒子模型 142
8.1.2
标签 144
8.2 盒子模型的相关属性 144
8.2.1 内容区域的宽度和高度 144
8.2.2 边框 145
8.2.3 内边距 152
8.2.4 外边距 153
8.3 阴影 155
8.4 box-sizing 156
8.5 背景属性 158
8.5.1 背景颜色 158
8.5.2 背景图像 158
8.5.3 图像平铺方式 158
8.5.4 背景图像位置 160
8.5.5 背景图像固定 161
8.5.6 背景图像大小 161
8.5.7 背景裁剪 163
8.5.8 背景复合属性 164
8.5.9 CSS精灵图 165
8.6 实战案例：“大学生参军网站”登录页面 166
8.7 本章小结 169
第9章 浮动与定位 170
9.1 标准文档流 170
9.2 元素的分类 171
9.2.1 块级元素、行内元素与行内块元素 171
9.2.2 元素的类型转换 172
9.3 元素的浮动 173
9.3.1 设置浮动 174
9.3.2 清除浮动 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位属性 181
9.4.3 静态定位 181
9.4.4 相对定位 182
9.4.5 绝对定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 层叠等级属性 188
9.5 实战案例：“大学生参军网站”轮播图效果 190
9.6 本章小结 192
第10章 CSS3高级应用 193
10.1 变换 193
10.1.1 旋转 194
10.1.2 倾斜 195
10.1.3 缩放 196
10.1.4 平移 197
10.1.5 变换原点 198
10.2 过渡 200
10.3 动画 202
10.4 实战案例：“大学生参军网站”CSS3高级应用 205
10.5 本章小结 208
第11章 网页布局 209
11.1 网页布局概述 209
11.1.1 网页布局的概念 209
11.1.2 网页布局的流程 210
11.1.3 常见的网页布局方法 211
11.2 网页布局命名规范 211
11.3 常见布局的实现 212
11.3.1 单列布局 212
11.3.2 两列常规布局 214
11.3.3 三列常规布局 216
11.3.4 两列自适应等高布局 217
11.3.5 三列自适应布局 219
11.4 实战案例：“大学生参军网站”首页主体部分 223
11.5 本章小结 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相关概念 227
12.3 容器属性 227
12.3.1 display属性 228
12.3.2 flex-direction属性 228
12.3.3 flex-wrap属性 230
12.3.4 justify-content属性 232
12.3.5 align-items属性 233
12.3.6 align-content属性 235
12.4 项目属性 236
12.4.1 order属性 236
12.4.2 flex-grow属性 237
12.4.3 flex-shrink属性 239
12.4.4 flex-basis属性 240
12.4.5 flex属性 241
12.5 实战案例：“大学生参军网站”导航条 242
12.6 本章小结 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相关概念 246
13.3 容器属性 246
13.3.1 display属性 247
13.3.2 划分网格 248
13.3.3 行间隔和列间隔 252
13.3.4 项目对齐方式 253
13.4 项目属性 255
13.4.1 grid-column和grid-row属性 255
13.4.2 grid-area属性 257
13.5 实战案例：“大学生参军网站”视频展播列表 258
13.6 本章小结 260
第14章 Web前端项目综合实践——文创商城 261
14.1 项目概述 261
14.2 需求分析 262
14.3 原型设计 262
14.4 公共部分的设计与实现 265
14.4.1 重置样式 265
14.4.2 页面头部 265
14.4.3 页面底部 268
14.4.4 悬浮侧边栏 270
14.5 首页的设计与实现 271
14.5.1 甄选好物版块 271
14.5.2 国博文房版块 274
14.6 商品列表页的设计与实现 277
14.6.1 商品类型筛选 277
14.6.2 分页导航 278
14.7 商品详情页的设计与实现 279
14.8 本章小结 283
编辑推荐
1HTML5与CSS3是Web前端开发的两大核心技术，它们不仅是Web前端开发工程师必须掌握的技能，也是高校一门重要的Web前端课程内容
2《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。
3《HTML5+CSS3 Web前端开发与实例教程：微课视频版》采取“知识点讲解+示例解析+案例详讲+高频面试题+实践操作+学科竞赛真题”的递进式教学模式，引导读者理解理论知识，掌握开发方法，学会复杂的网站设计技能，全面提升读者的Web前端开发能力。
4《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套资源非常丰富，包括思政元素、案例源代码、PPT课件、微课视频、习题与答案、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程，能帮助读者快速掌握HTML5与CSS3前端技术。
本文摘自《HTML5+CSS3 Web前端开发与实例教程：微课视频版》，获出版社和作者授权发布。
们已经学了这么久，不知道大家对于HTML标签及属性有没有初步的认识了呢，我们现在是不是特别想做一个自己的网页呢？这一部分我们给大家讲完CSS中的布局属性就可以完成一个简单的网页了。下面我们开始讲解吧！
1、 文档流
2、 布局属性
3、 页面结构
4、 页面布局
5、 HTML5新增标签
6、 页面制作
首先我们先了解一下什么是文档流。
一、 文档流
文档流分为普通文档流和脱离文档流。
普通文档流：元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离。
我们先来看一下普通文档流，看一下标签是怎样在浏览器中的显示排列的。
代码：
显示效果：
我们看到这就是普通文档流，那个标签先写的，就在浏览器的最开始位置显示，后写的标签，就在后面依次显示。那脱离文档流就是让标签通过某种CSS属性，让其不是依次显示在后面，而是按照我们的意思在浏览器中显示。那这种脱离文档流的方式有几种呢？一种就是使用布局属性的浮动属性（float），一种就是定位属性（position）。今天我们重点给大家讲解的就是布局属性。
二、 布局属性（float 浮动）
首先我们先看一下float的使用。
1. 没有设置浮动的两个元素，也就是正常的文档流。
代码：
显示效果：
2. 设置第一个元素左浮动
代码：
显示效果
设置了第一个元素左浮动后，就会改变了元素的排列顺序了，left的这个元素就浮动了最上层，他的空间就被right这个元素占领了。大家很明显的看到了right的这个元素的高度由原来的200像素变成了100像素，其中有100像素是在left这个元素的下面了。这种情况一般应用在以下场景。
网页中的图文混排的地方。
代码：
显示效果：
3. 第一个元素设置右浮动时
代码：
显示效果：
大家看，设置了一个元素右浮动时，left这个元素就漂浮在了右侧，而他的位置被right这个元素占领了。这种情况应用在以下场景。
文字显示在右侧。这种情况通常使用一个元素右浮动。
显示效果
4. 两个元素同时左浮动。
代码：
页面显示效果
设置两个元素同时左浮动，通常应用在页面布局。及导航的制作。
5. 一个元素左浮动一个元素右浮动
代码：
显示效果
这种情况也是常用于布局，主要运用于左右两列的布局，或者三列的布局。
6. 两个元素同时设置右浮动
代码：
显示效果
大家看到了没有，像这种情况元素的位置都颠倒了，所以像这种情部几乎不使用。
总结：浮动在我们在制作网页过种中使用的频率比较高。但是浮动还会引起种问题（后续会讲浮动引起的问题），所以我们在使用浮动的时候要注意，尽量减少使用浮动。浮动可以使标签在左侧或者在右侧显示，主要运用于布局、导航的制作等。另外大家还要注意另外一个问题：在布局时，浮动的元素的后面的元素不需要占领前面的元素的位置应该怎么办呢？（但值得注意的是浮动影响后面的元素，但是元素的内容不受影响，还是能显示出来的）先看代码及效果。
代码：
显示效果
通过代码和效果，大家看到了，第三个元素占领了前面浮动元素的空间，如果不需占领怎么办呢？我们就想到了用清除浮动就可以了。明天我们将继续为大家讲解清除浮动。
HTML5 是最近十年来 Web 开发标准最巨大的飞跃，目前苹果、谷歌、微软世界三大移动互联网巨头都支持了 HTML5，HTML5 的发展给移动互联网应用带来了全新的变化。HTML5 的出现，给移动互联网带来了新的变革，为移动互联网中富媒体的应用提供了新的思路，并具有广阔的应用前景。所以HTML5适应了目前的移动互联网应用潮流。
Html5课程内容主要包括以下八个方面：Web页面制作基础，UI网站设计，编程基础技术，后端开发技术，移动互联网应用，特效开发高级实战，企业级应用开发以及网页游戏开发。
兄弟连教育根据公司和行业发展的实际需要设计教学内容，现行的课程体系包括四大阶段和特级课：“基础网页布局与响应式布局”、“前端核心技术：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全栈框架开发”，”特级课：微信开发”。
第一阶段：基础网页布局与响应式布局
主要内容：
1、HTML CSS
2、PS操作，网页切图
3、基本网页布局
4、HTML5 语义标签
5、HTML5 智能表单
6、CSS3
7、Media Query响应式布局
--------------------------------------------------分割符---------------------------------------------------------------------------
详细内容包括：
WEB开发构件
系统及文件基本操作
基本的快捷键
描述 Windows Mac OS
编辑菜单 Alt + E Ctrl + F2 + F
文件菜单 Alt + F Ctrl + F2 + E
视图菜单 Alt + V Ctrl + F2 + V
全选文本 Ctrl + A Cmd + A
复制文本 Ctrl + C Cmd + C
查找文本 Ctrl + F Cmd + F
查找替换文本 Ctrl + H Cmd + F
新建文档 Ctrl + N Cmd + N
打开文件 Ctrl + O Cmd + O
打印选项 Ctrl + P Cmd + P
保存文件 Ctrl + S Cmd + S
粘贴文本 Ctrl + V Cmd + V
剪切文本 Ctrl + X Cmd + X
重做文本 Ctrl + Y Shift + Cmd + Z
撤销文本 Ctrl + Z Cmd + Z
文本编辑 描述 Windows Mac OS
光标移动操作
文本编辑操作
Web 浏览器操作
标签/窗口管理
打印当前网页
保存当前网页
地址栏操作
书签操作
屏幕截图
WEB开发构件
C/S结构
B/S结构
HTTP协议
传输数据方式：post,get
HTTP消息类型：2xx,4xx,5xx
URL组成
HTML介绍
HTML发展史
HTML5简介
新标准
引入原生多媒体支持
引入可编程内容
引入予以Web
http协议
HTTP消息类型：2xx,4xx,5xx
开发软件
nodepad++
sublime
dreamweaver
HTML介绍
HTML发展史
HTML5介绍
HTML基本语法与规范
标签
属性
固有属性
自定义属性
通用属性
元素
父元素（理解）
子元素
兄弟元素
后代元素
主体结构
长度单位
颜色单位
基础标签
文本类标签
文本格式化标签
<b> 定义粗体文本
<strong> 定义加重语气
<em> 定义着重文字
<i> 定义斜体字
<br> 换行标签
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
计算机输出类
语义，引用及标签定义
链接<a>
标题Hn
HTML框架iframe
段落P
列表标签
字符实体
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
表格标签
colgroup
caption
table
thead
col
span
th
tbody
tr
td
colspan
rowspan
tfoot
头部标签
<!doctype html>
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
charsetNew character_set 定义文档的字符编码。
content text 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-type
default-style
refresh 把 content 属性关联到 HTTP 头部。
name application-name
author
description
generator
keywords 把 content 属
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
多媒体标签
1. img
1.1 导入一张图片
1.2 属性
src 图片地址
width 设置图片宽
height 设置图片高
border 设置图片边框
alt 不显示图片时的提示信息
title 鼠标放上时显示的图片描述信息
usemap map标签的name #name
2. map
2.1 给图片划分区域 配合area
2.2 属性
name 给map指定一个name
3. area
3.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标签的两个格式
简单格式
<audio src="../video/music.mp3" controls>您的破浏览器不支持，请升级浏览器
</audio>
完整格式 视频源单独放到source标签中
<audio controls>
您的破浏览器不支持，请升级浏览器
<source src='../video/music.mp3' type='audio/mp3'>
<source src='../video/music.wav' type='audio/wav'>
</audio>
5. video
5.1 导入视频的标签 HTML5新标签
5.2 属性
src 路径
controls 显示控制按钮
autoplay 自动播放 属性值 auto none
loop 是否循环播放
width 视频的宽
height 视频的高
poster 缩略图地址
6. source
6.1 配合video标签 导入不同格式的视频 HTML5新标签
6.2 属性
src 视频地址
7. canvas 用于画图的标签
8. embed
8.1 导入多媒体文件 音频 视频 HTML5新标签
8.2 属性
src 多媒体文件地址
width
height
HTML表单及智能表单
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 password
1.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设置真正提交的值 默认的按钮可以设置checked
checkbox 复选框 value设置真正提交的值 设置默认添加checked属性
image 提交按钮，按钮样式来自图片 配合src属性
submit 提交按钮， value指定按钮上的文字
reset 重置按钮 value指定按钮上的文字
button button按钮 value指定按钮上的文字
file 上传框
hidden 隐藏域 name value
3. label标签
用来嵌套input， 点击label嵌套的任何元素都可以激活label内的input
属性 for 指定 input的id
语义标签
<header> 定义了文档的头部区域
<nav> 定义运行中的进度（进程）。
<article> 定义页面独立的内容区域。
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<aside> 定义页面的侧边栏内容。
<section> 定义文档中的节（section、区段）。
<footer> 定义 section 或 document 的页脚。
<address> 定义文档作者或拥有者的联系信息
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<summary> 标签包含 details 元素的标题
<dialog> 定义对话框，比如提示框
dt
dd
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
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+CSS3
CSS选择器
HTML tag
Class
包含选择器：div span a
ID
组合选择 div,span,a
任意选择器（通配符选择器）*
关系选择器
包含选择符
子选择符
相邻选择符
兄弟选择符
属性选择器
伪类选择器
伪对象选择器
CSS3属性
尺寸
边框
背景
内补白
外补白
布局
定位
字体
文本
列表
表格
用户界面
多栏
2D变换
过渡
动画
Photoshop网页设计基础
I设计介绍
photoshop安装与设置
位图与矢量图
网页常用图片格式
图像大小与分辨率
选区创建和编辑
选区的创建
选区工具M
套锁工具L
快速选区工具W和魔术棒W
钢笔选区
创建矢量路径
锚点操作
钢笔工具
形状转选区ctrl+Enter
选区的编辑
选区的存储
应用辅助功能
使用标尺ctrl+R
设置网格：视图>显示>网格ctrl+'
应用变换功能
选择>可变换选区ctrl＋T
缩放
旋转
扭曲
透视
变形
水平翻转
垂直翻转
应用内容识别比例功能
操控变形
裁剪图像
裁剪工具
基础绘画
了解绘画和绘画修饰工具
画笔
颜色替换
涂抹工具
绘画的基本技巧
绘制直线,按住shift
绘制曲线
定义颜色
使用拾色器
渐变工具
填充前景色：alt＋delete
填充背景色：control＋delete
为图像填充颜色shift+f5
图形、路径计算
网页布局规范
Web设计规范
banner设计
网页栅格系统
网页构成
命名规范
导航设计
版式设计
网页配色
Photoshop网页切图
网页切图及切图常见问题
精灵图片技术
专题页设计
W3C盒子模型
div+css网页布局
HTML5兼容性处理
使用 HTML5布局元素的布局
Media Query响应式布局
原生响应式布局
媒体查询+尺寸属性：百分比，max-width,max-height,min-width,min-height
--------------------------------------------------分割符---------------------------------------------------------------------------
可实现效果
1、表格制作个人简历
2、使用表单制作注册页面
3、div+css基本网页布局
4、PS网页设计
5、精灵图片技术
6、语义化标签布局
7、智能表单验证
8、多媒体播放
9、css3:圆角边框、边框九宫格特效、多图背景、动画、渐变和倒影、多列属性布局、服务器端字体
10、响应式网页实现
--------------------------------------------------分割符---------------------------------------------------------------------------
第二阶段：前端核心技术：Javascript
主要内容：
1、Javascript
2、Ajax
3、JQuery
4、JS高级特效
--------------------------------------------------分割符---------------------------------------------------------------------------
详细内容：
JavaScript 脚本语言
什么是JavaScript？
1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
2. JavaScript 通常被直接嵌入 HTML 页面。
3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
特点：
1. 弱类型
2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)
JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOM
JavaScript是基于对象的脚本语言。
在HTML中如何使用JavaScript
1. 使用<script></script>标签：
属性：
charset（可选）字符集设置、
defer（可选执行顺序）值：defer、
language(已废除)、
src（可选）使用外部的js脚本文件
type(必选)类型：值：text/javascript
<script type="text/javascript">
<!--
javaScript语言
//-->
</script>
2. 在html标签的事件中，超级链接里。
<button onclick="javaScript语言"></button>
<a href="javascript：alert('aa');alert('bb')">点击</a>
3. 外部导入方式（推荐）：
<script type="text/javascript" src="my.js"></script>
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; //删除o对象中的name属性
void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。
++ --
一元加法和一元减法
2. 位运算符
位运算 NOT ~
位运算 AND &
位运算 OR |
位运算 XOR ^ (不同为1，相同则为0)
左移运算 <<
右移运算 >>
3. 逻辑运算符
逻辑 NOT ! 运算符 非
逻辑 AND && 运算符 与
逻辑 OR || 运算符 或
4. 乘性运算符：*（ 乘） /(除) %（取模）求余
5. 加性运算符： + -
*其中+号具有两重意思：字串连接和数值求和。
就是加号”+“两侧都是数值则求和，否则做字串连接
6. 关系运算符 > >= < <=
7. 等性运算符 == === != !==
8. 条件运算符 ? : (三元运算符)
9. 赋值运算符 = += -= *= /= %= >>= <<=
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(a[i]);
}
//输出： 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。用 arguments[0]
也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，
第二个参数位于位置 1，依此类推）。
关于变量和参数问题：
函数外面定义的变量是全局变量，函数内可以直接使用。
在函数内部没有使用var定义的=变量则为全局变量，
*在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持）
二、系统中常用的内置函数：
escape() //字串编码
unescape() //字串反编码
*eval() //将参数字符串作为脚本代码来执行。
*isNaN() // is not a number (不是一个数值)
*parseInt()
*parseFloat()
三、JavaScript的对象的定义和使用
1.使用构造函数创建内置对象
var myObject = new Object();
myObject.name = “lijie”;
myObject.age = 20;
myObject.say = function(){...}
2.直接创建自定义对象
var 对象名 = {属性名1：属性值，属性名2：属性值2，…….}
*3.使用自定义构造函数创建对象
function pen(name,color,price){
//对象的name属性
this.name = name;
//对象的color属性
this.color = color;
//对象的piece属性
this.price = price;
//对象的say方法
this.say = function(){};
}
var pen = new pen(“铅笔”,”红色”,20);
pen.say();
一、for…in语句
----------------------------------------
for(var i in window){
document.write(i+”----”+window[i]);
}
这种语句可以遍历对象中的所有属性或数组中的所有元素。
二、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 事件
。。。。
三、事件处理程序
使用一个匿名或回调函数
有三种方法加事件
第一种：
格式： <tag on事件="事件处理程序" />
*第二种：
<script>
对象.on事件=事件处理程序
</script>
第三种：(火狐不兼容)
<script for="事件源ID" event="on事件">事件处理程序</script>
事件对象：
属性：
1. srcElement
2. keyCode 键盘值
事件 event window.event
1. srcElement 代表事件源对象
2. keyCode 事件发生时的键盘码 keypress , keydown keyup
3. clientX, clientY 坐标位置
4. screenX, screenY
5. returnValue
6. cancelBubble;
//为页面添加鼠标右点击事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐浏览器兼容
var event=ent || window.event;
//获取事件坐标位置
var x=event.clientX;
var y=event.clientY;
...
}
一、BOM
1. window对象
常用的属性：
*document ：对 Document 对象的只读引用
*history ：对 History 对象的只读引用。
*location：用于窗口或框架的 Location 对象
Navigator： 对 Navigator 对象的只读引用
*parent： 返回父窗口。
length: 设置或返回窗口中的框架数量。
Screen: 对 Screen 对象的只读引用
status: 设置窗口状态栏的文本。
top: 返回最顶层的先辈窗口。
常用方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
scrollTo() 把内容滚动到指定的坐标。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
2. Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
常用属性：
with(document) {
write ("你的浏览器信息：<ul>");
write ("<li>代码："+navigator.appCodeName+"</li>");
write ("<li>名称："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>语言："+navigator.language+"</li>");
write ("<li>编译平台："+navigator.platform+"</li>");
write ("<li>用户表头："+navigator.userAgent+"</li>");
write ("</ul>");
}
3. Screen 对象包含有关客户端显示屏幕的信息。
常用属性：
document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
参考了解其他属性信息获取方式
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
4. History 对象包含用户（在浏览器窗口中）访问过的 URL。
5. Location 对象包含有关当前 URL 的信息。
讲解DOM
一、基本概念
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
DOM 被分为不同的部分：
1.Core DOM
定义了一套标准的针对任何结构化文档的对象
2.XML DOM
定义了一套标准的针对 XML 文档的对象
3.HTML DOM
定义了一套标准的针对 HTML 文档的对象。
节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
>整个文档是一个文档节点
>每个 HTML 标签是一个元素节点
>包含在 HTML 元素中的文本是文本节点
>每一个 HTML 属性是一个属性节点
>注释属于注释节点
节点彼此间都存在关系。
>除文档节点之外的每个节点都有父节点。
>大部分元素节点都有子节点。
>当节点分享同一个父节点时，它们就是同辈（同级节点）。
>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
>节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
>通过使用 getElementById() 和 getElementsByTagName() 方法
>通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
二、HTML DOM 对象参考
Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素
常用集合属性：forms
Anchor : 代表 <a> 元素
Area : 代表图像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某个事件的状态
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表单中的一个按钮
Input checkbox : 代表 HTML 表单中的复选框
Input file : 代表 HTML 表单中的文件上传
Input hidden : 代表 HTML 表单中的隐藏域
Input password : 代表 HTML 表单中的密码域
Input radio : 代表 HTML 表单中的单选按钮
Input reset : 代表 HTML 表单中的重置按钮
Input submit : 代表 HTML 表单中的确认按钮
Input text : 代表 HTML 表单中的文本输入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表单中的选择列表
Style : 代表单独的样式声明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
AJAX
var xmlhttp;
1. 创建请求对象
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 设置回调函数（监听）
xmlhttp.onreadystatechange=函数名；
或
xmlhttp.onreadystatechange=function(){
函数体。。。
}
3. 初始化：
xmlhttp.open("GET",url,true);
4. 发送：
xmlhttp.send();
其中：xmlhttp请求对象：
**属性：
*readyState //请求状态：0,1,2,3,4
*responseText//响应内容
responseXML //xml响应对象
*status //浏览器响应状态：200正常， 404 请求地址不存在 ,,
statusText //状态内容
*onreadystatechange //回调函数属性
方法：
abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader() //返回指定的 HTTP 响应头部的值
*open() //初始化 HTTP 请求参数
*send() //发送 HTTP 请求，使用传递给 open() 方法的参数
*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。
自定义Ajax实例使用
jQuery的基本语法
对象的访问
each()
size()
length
selector
context
get()
index()
jQuery 属性操作
属性
attr
removeAttr
prop
removeProp
CSS
addClass
removeClass
toggleClass
HTML代码/文本/值
html()
text()
val()
基础知识
JQuery简介
JQuery 安装
JQuery语法
jQuery CSS 操作
css:css()
位置
offset()
position()
scrollTop()
scrollLeft()
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeifht()
outerWIdth()
jQuery 选择器
基本
层级
伪类
内容
可见性
属性
子元素
表单
表单对象属性
jQuery 筛选
过滤
查找
串联
jQuery HTML文档处理
内部插入
外部插入
包裹
替换
删除
复制
jQuery 事件
页面载入
事件处理
事件委派
事件切换
事件
jQuery效果
jQuery 隐藏显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery停止动画
jQuery Callback
Jquery chaining
jQuery Ajax
jQuery Ajax简介
jQuery load()方法
jQuery get()/post()方法
jQuery 其他
jQuery noConflict()方法
jQuery JSONP
数组和对象操作
函数操作
测试操作
字符串操作
浏览器及特性检测
URL
数据缓存
队列机制
jQuery 插件
插件使用
jQuery 自定义插件方法
--------------------------------------------------分割符---------------------------------------------------------------------------
可实现效果
1、刷新改背景
2、获取和设置时间
3、从URL中获取文件名
4、简单的计算器
5、滚动类效果
6、自定义菜单
7、下拉菜单
8、手风琴菜单
9、弹出层
10、瀑布流布局，滚动事件
11、选项卡开发
12、幻灯播放
13、拖拽效果
14、淘宝商品的放大效果
15、登录注册验证
16、首页多特效合成
17、后台效果制作
18、瀑布流
19、点名器
20、抽奖
--------------------------------------------------分割符---------------------------------------------------------------------------
第三个阶段：HTML5新特性
主要内容：
1、视频/音频
2、地理定位
3、Web 存储
4、应用缓存
5、拖放
6、文件读取
7、Web Workers
8、画布 SVG
9、CSS预处理
10、BootStrap 响应式框架
--------------------------------------------------分割符---------------------------------------------------------------------------
详细内容：
HTML5 多媒体
audio/video API操作
地理位置信息获取
geolocation API操作
地球间两点距离计算方法
地图API调用
HTML5离线缓存
cache manifest规范及格式
HTML5本地存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
拖放（Drag 和 drop）
FileReader
浏览器多线程
画布 SVG 动画实现
SASS使用
SASS的基本语法
Bootstrap配置
使用Bootstrap布局页面
Bootstrap全局样式
栅格系统原理
Bootstrap各种常用组件
Bootstrap常用插件应用
--------------------------------------------------分割符---------------------------------------------------------------------------
可实现效果：
制作属于自己的音/视频播放器
查看经纬度
获取公交路线
显示路线导航
离线应用
多线程优化用户体验
拖放歌曲列表
图片拖放显示
拖放照片墙
绘画五角星
绘制时钟
匀速、变速、圆周、曲线等物理运动
碰撞原理与实现
九大行星围绕运动
鼠标交互特效
使用SASS制作动态CSS程序
使用UI框架实现响应式布局
--------------------------------------------------分割符---------------------------------------------------------------------------
第四阶段：MEAN(MongoDB+Express+Angular.js+Node.js)全栈框架开发
主要内容：
1、Node.js
2、MongoDB
3、Express
4、AngularJS
5、WEB APP制作
--------------------------------------------------分割符---------------------------------------------------------------------------
详细内容:
NodeJS与浏览器js的区别
NodeJS基础
NodeJS安装
模块
require
exports
module
NPM
代码的组织和部署
模块路径解析规则
包（package）
index.js
package.json
文件操作
Buffer（数据块）
Stream（数据流）
File System（文件系统）
Path（路径）
网络操作
HTTP
HTTPS
URL
Query String
Zlib
Net
NPM/Bower依赖管理工具
Zepto.js库
NodeJS文件操作
使用NodeJS搭建Web服务器
使用NodeJS搭建Socket服务器
数据仓库：
SQL:结构化查询语言(Structured Query Language)
常见的SQL:MySQL Oracle MariaDB PostgreSQL等SQL
常见的NoSQL：MongoDB Redis Memcache
MongoDB：
C++语言编写，基于分布式文件存储的开源数据库系统
BSON:类JSON对象（Binary JSON，二进制形式的存储格式）
{"username":"zhangsan","age":20,"sex":"男"}
由"键值对"组成
结构划分：
数据库(database) db
集合(collection)
文档(document)
字段(field)
安装MongoDB
1.针对库的操作
查看所有库
创建并进入数据库
查看当前库
删除数据库
2.集合操作
查看当前集合
3.针对文档操作
插入数据
修改数据：
删除
查询数据
Express框架快速构建WEB应用程序
Express简介+MVC简介
Express路由模块
模板引擎 jade ejs handlebars
nosql数据库MogoDB管理数据
使用mongoose操作MongoDB
Angular JS介绍
Angular JS 表达式
Angular JS简介
Angular JS指令
Angular JS模型
Angular JS Scope(作用域)
Angular JS 控制器
Angular JS 过滤器
Angular JS Http
Angular JS 表格
Angular JS SQL
Angular JS HTML DOM
Angular JS 事件
Angular JS模块
Angular JS表单
Angular JS输入验证
Angular JS Bootstrap应用
Angular JS 包含
Angular JS 应用
App介绍
WebApp/NativeApp/HybirdApp简介
Cordova线下打包App
移动应用开发平台云端打包App
--------------------------------------------------分割符---------------------------------------------------------------------------
可实现以下效果
使用Nodejs搭建
应用程序的服务端
使用Socket长连接实时网络通信技术制作聊天室
带有前后台的简单博客系统
使用AngularJS打造单页面购物车应用
打包手机端应用
--------------------------------------------------分割符---------------------------------------------------------------------------
特级课：微信开发
主要内容：微信开发
1、微信接口开发
2、微信应用开发
3、微信UI框架
4、原型设计
5、面试题讲解
--------------------------------------------------分割符---------------------------------------------------------------------------
详细内容
微信JSSDK使用
分享接口
图像接口
音频接口
智能接口
设备信息
地理位置
界面操作
WEUI框架
原型设计
用户体验设计
面试题
--------------------------------------------------分割符---------------------------------------------------------------------------
可实现但不限于以下效果
微信测智商
测测上辈子是谁
测运势
留言板
照片分享发送
语音识别
位置显示
WEUI框架制作微信原生样式界面
小编已尽力排版，如小伙伴们觉得依然较乱，请留言
*请认真填写需求信息，我们会在24小时内与您取得联系。
