HTML5+CSS3+JavaScript项目开发

目录
咖啡商城项目导引1
学习目标1
内容安排2
项目背景2
项目构思3第1章开发工具HBuilder5
1.1飞速编码的极客工具6
1.2安装HBuilder6
1.3认识界面8
1.4新建项目9
1.5Web项目的运行11
1.6移动App的运行12第2章HTML基础15
2.1认识HTML16
2.1.1HTML基本语法16
2.1.2HTML文档的基本结构17
2.1.3项目： **个HTML页面18
2.2HTML常用标签19
2.2.1文本与标签19
2.2.2项目： 介绍我的学校123
2.3表格元素24
2.3.1表格标签25
2.3.2项目： 图书统计表26
2.4表单元素27
2.4.1常用表单元素27
2.4.2项目： 个人信息统计表31
2.5咖啡商城——商品分类模块33
2.5.1项目说明34
2.5.2项目设计34
2.5.3项目实施34
习题36第3章HTML5新增元素和属性37
3.1新增文档结构元素38
3.1.1认识HTML538
3.1.2HTML5页面结构39
3.1.3HTML5主体结构元素39
3.1.4HTML5非主体结构元素42
3.1.5项目： 新闻评论网43
3.2新增表单元素45
3.2.1HTML5表单新功能45
3.2.2HTML5表单新的输入类型46
3.2.3HTML5表单新的属性47
3.2.4项目： 订货人个人信息页49
3.3咖啡商城——用户注册模块实现51
3.3.1项目说明51
3.3.2项目设计52
3.3.3项目实施52
习题54第4章CSS基础56
4.1CSS基本语法57
4.1.1CSS语句格式57
4.1.2CSS选择符58
4.1.3项目： 世界杯胜负榜64
4.2文本和字体相关属性66
4.2.1字体属性66
4.2.2文本属性69
4.2.3项目： 介绍我的学校270
4.3背景和边框相关属性72
4.3.1边框72
4.3.2边框阴影75
4.3.3圆角边框76
4.3.4图形边框76
4.3.5背景77
4.3.6项目： 校训Logo80
4.4咖啡商城——网站页脚模块实现82
4.4.1项目说明82
4.4.2项目设计82
4.4.3项目实施82
习题84第5章CSS盒子模型87
5.1盒子相关属性88
5.1.1内边距和外边距88
5.1.2块级元素与行内元素90
5.1.3项目： 盒子模型92
5.2浮动定位93
5.2.1float属性93
5.2.2clear属性95
5.2.3项目： 3个相框95
5.3位置定位97
5.3.1position属性97
5.3.2项目： 照片墙99
5.4隐藏与显示101
5.4.1visibility属性101
5.4.2zindex属性102
5.4.3display属性103
5.4.4项目： 悬浮菜单103
5.5咖啡商城——商品分类模块美化效果实现105
5.5.1项目说明105
5.5.2项目设计106
5.5.3项目实施106
习题109第6章CSS3动画113
6.1Animation动画114
6.1.1定义关键帧114
6.1.2绑定动画115
6.1.3项目： 跑动的汽车116
6.2Transition动画118
6.2.1Transition过渡118
6.2.2项目： 页面切换效果119
6.3咖啡商城——商品介绍模块实现122
6.3.1项目说明122
6.3.2项目设计123
6.3.3项目实施123
习题125第7章JavaScript基础126
7.1JavaScript简介127
7.2在HTML页面中嵌入JavaScript的方法128
7.3JavaScript的语法规则129
7.3.1语法129
7.3.2标识符130
7.3.3注释131
7.3.4项目： **个JavaScript程序131
7.4数据类型133
7.4.1常用数据类型133
7.4.2typeof运算符133
7.4.3Undefined类型134
7.4.4Null类型134
7.4.5Object类型135
7.5变量136
7.6运算符137
7.7流程控制语句138
7.8JavaScript函数140
7.8.1JavaScript函数定义140
7.8.2项目： 单击我142
7.9事件和事件处理144
7.9.1JavaScript常用事件144
7.9.2项目： 敏感的兔子145
习题148第8章JavaScript对象151
8.1内置对象152
8.1.1认识JavaScript内置对象152
8.1.2Math对象153
8.1.3Date对象154
8.1.4String对象156
8.1.5Number对象158
8.1.6Array对象160
8.1.7项目： 数字电子时钟162
8.2BOM对象164
8.2.1认识BOM对象164
8.2.2window对象166
8.2.3history对象168
8.2.4location对象169
8.2.5screen对象169
8.2.6document对象170
8.2.7项目： 打开新窗口170
习题172第9章DOM文档对象模型175
9.1认识DOM对象176
9.2HTML DOM Document对象176
9.3HTML DOM Event对象181
9.4HTML DOM Element对象183
9.5HTML DOM attribute对象184
9.6DOM与事件185
9.6.1事件绑定的方式185
9.6.2事件处理函数的执行顺序187
9.6.3事件冒泡和事件捕获187
9.7项目： 诗词鉴赏189
9.8咖啡商城——购物车模块实现192
9.8.1项目说明192
9.8.2项目设计193
9.8.3项目实施194
习题195第10章Canvas画布200
10.1绘制基本图形201
10.1.1认识Canvas201
10.1.2Canvas的常用属性和方法201
10.1.3使用Canvas绘图对象绘制基本图形202
10.1.4项目： 来自星星的它209
10.2绘制图像213
10.2.1使用Canvas绘图对象裁剪图像213
10.2.2项目： 放大镜216
10.2.3项目： 跳动的心218
10.2.4项目： 鼠标画板220
10.3咖啡商城——商品详情模块实现223
10.3.1项目说明223
10.3.2项目设计223
10.3.3项目实施224
习题226第11章本地存储229
11.1Web Storage230
11.1.1Web Storage的常用属性和方法230
11.1.2项目： 简易购物车231
11.2本地数据库236
11.2.1本地数据库访问237
11.2.2项目： 简易留言本239
11.3咖啡商城——购物车本地存储模块实现245
11.3.1项目说明245
11.3.2项目设计246
11.3.3项目实施247
习题251第12章jQuery基础253
12.1jQuery的由来及简介254
12.1.1向页面添加jQuery库254
12.1.2项目： **个jQuery程序255
12.2jQuery选择器256
12.2.1基本选择器256
12.2.2层次选择器256
12.2.3过滤选择器257
12.2.4表单元素选择器259
12.3jQuery常用方法259
12.4jQuery对象与DOM对象263
12.5jQuery事件264
12.5.1常见的DOM事件264
12.5.2事件绑定/移除267
12.6jQuery动画269
12.6.1隐藏和显示269
12.6.2淡入和淡出270
12.6.3animate动画270
12.7咖啡商城——图片轮播271
12.7.1项目说明271
12.7.2项目设计272
12.7.3项目实施272
12.8JSON273
12.8.1JSON语法规则273
12.8.2常用类型274
12.8.3基础示例274
12.9Ajax275
12.9.1Ajax如何工作275
12.9.2jQuery中的Ajax277
12.10咖啡商城——查看商品详情279
12.10.1项目说明279
12.10.2项目设计279
12.10.3项目实施280
习题281第13章跨平台移动App开发285
13.1HTML5 Plus规范286
13.2HTML5 App286
13.3HelloMUI示例287
13.4建立MUI项目289
13.5咖啡商城——移动App291
13.5.1项目说明291
13.5.2项目设计292
13.5.3项目实施292
13.6Hello H5 示例294
13.7创建Hello H5 项目296
13.8项目： 语音答题App301
13.8.1项目说明301
13.8.2项目设计302
13.8.3项目实施302第14章网站综合设计305
14.1项目构思306
14.2UI设计309
14.3网页制作314附录A学习知识点及能力要点324
A.1教材的知识要点及掌握程度324
A.2教材的能力要点及重要程度325附录BRGB颜色对照表326附录C部分习题参考答案331参考文献335