HTML5网页设计经典课堂

目 录

第1章　HTML入门必学
1.1　认识HTML　/2
1.2　HTML5的优势　/2
1.2.1　强大的交互性　/3
1.2.2　使用HTML5的优势　/4
1.3　HTML5语法　/6
1.3.1　文档类型声明　/6
1.3.2　字符编码　/7
1.3.3　省略引号　/7
1.4　HTML5元素分类　/8
1.4.1　结构性元素　/8
1.4.2　级块性元素　/8
1.4.3　行内语义性元素　/9
1.4.4　交互性元素　/9
1.5　HTML5中新增的元素　/9
1.5.1　section元素　/9
1.5.2　article元素　/10
1.5.3　aside元素　/10
1.5.4　header元素　/11
1.5.5　fhgroup元素　/11
1.5.6　footer元素　/12
1.5.7　nav元素　/12
1.5.8　figure元素　/13
1.5.9　video元素　/13
1.5.10　audio元素　/14
1.5.11　embed元素　/14
1.5.12　mark元素　/14
1.5.13　progress元素　/15
1.5.14　meter元素　/15
1.5.15　time元素　/15
1.5.16　wbr元素　/15
1.5.17　canvas元素　/16
1.5.18　command元素　/16
1.5.19　datalist元素　/16
1.5.20　details元素　/16
1.5.21　datagrid元素　/17
1.5.22　keygen元素　/17
1.5.23　output元素　/17
1.5.24　source元素　/17
1.5.25　menu元素　/18
1.6　课堂练习　/18
强化训练　/19
第2章　文字和图片样式
2.1　网页中的文字和段落　/22
2.1.1　标题文字标签　/22
2.1.2　标题文字的对齐方式　/23
2.1.3　设置文字字体　/24
2.1.4　设置段落换行　/25
2.1.5　设置字体颜色　/26
2.1.6　设置上标和下标　/27
2.1.7　设置删除线　/28
2.1.8　不换行标签用法　/29
2.1.9　加粗标签的用法　/30
2.1.10　倾斜标签的用法　/31
2.2　网页中的图片样式　/32
2.2.1　图像格式　/33
2.2.2　添加图片　/33
2.2.3　设置图像大小　/34
2.2.4　设置图像边框　/35
2.2.5　图像的水平间距　/36
2.2.6　图像的垂直间距　/37
2.2.7　图像的提示文字　/39
2.2.8　图像的替换文字　/40
2.2.9　图片相对于文字的对齐方式　/41
2.2.10　为图片添加超链接　/41
2.3　课堂练习　/42
强化训练　/44
第3章　HTML中列表的样式
3.1　使用无序列表　/48
3.1.1　ul标签　/48
3.1.2　type无序列表类型　/49
3.2　使用有序列表　/51
3.2.1　ol标签　/51
3.2.2　type有序列表类型　/52
3.2.3　start有序列表的起始值　/54
3.2.4　dl定义列表标签　/56
3.2.5　menu菜单列表　/60
3.2.6　color设置列表文字颜色　/61
3.3　列表的嵌套　/61
3.3.1　定义列表的嵌套　/62
3.3.2　无序列表和有序列表的嵌套　/63
3.3.3　有序列表之间的嵌套　/65
3.4　课堂练习　/66
强化训练　/68
第4章　制作网页中的表单
4.1　表单的基本标签　/72
4.1.1　标签　/72 4.1.2　标签　/73
4.1.3　标签　/74
4.1.4　标签　/75
4.2　表单的基本属性　/76
4.2.1　action属性　/76
4.2.2　name属性　/77
4.2.3　method属性　/78
4.2.4　enctype属性　/79
4.2.5　target属性　/79
4.3　插入表单对象　/80
4.3.1　文本域　/80
4.3.2　密码域　/81
4.3.3　普通按钮　/82
4.3.4　单选按钮　/84
4.3.5　复选框　/84
4.3.6　提交按钮　/85
4.3.7　重置按钮　/86
4.3.8　图像按钮　/87
4.3.9　隐藏域　/88
4.3.10　文件域　/90
4.3.11　菜单和列表　/90
4.4　课堂练习　/92
强化训练　/94
第5章　网页多媒体的设置
5.1　插入多媒体　/98
5.1.1　插入音频和视频　/98
5.1.2　插入flash动画　/99
5.2　设置滚动效果　/99
5.2.1　设置滚动速度　/100
5.2.2　设置滚动方向　/101
5.2.3　设置滚动延迟　/102
5.2.4　设置滚动方式　/103
5.2.5　设置滚动的背景颜色　/104
5.2.6　设置滚动范围　/105
5.2.7　设置空白空间　/106
5.3　设置背景音乐　/107
5.3.1　插入背景音乐　/107
5.3.2　设置循环播放次数　/109
5.4　课堂练习　/110
强化训练　/111
第6章　使用表格和链接
6.1　创建表格　/114
6.1.1　表格的构成　/114
6.1.2　表格的标题　/115
6.1.3　表格的表头　/116
6.2　设置表格属性　/118
6.2.1　表格的宽度　/118
6.2.2　表格的高度　/120
6.2.3　表格的对齐方式　/122
6.3　设置表格边框属性　/123
6.3.1　表格的边框　/123
6.3.2　内框的宽度　/125
6.3.3　文字与边框间距　/126
6.4　设置表格背景　/128
6.4.1　表格背景颜色　/128
6.4.2　行的背景颜色　/130
6.5　设置单元格样式　/131
6.5.1　设置单元格的大小　/131
6.5.2　设置单元格边框颜色　/133
6.5.3　设置单元格跨度　/134
6.6　超链接的路径　/136
6.6.1　绝对路径　/136
6.6.2　相对路径　/136
6.7　创建超链接　/137
6.7.1　超链接标签的属性　/137
6.7.2　内部链接　/137
6.7.3　锚点链接　/139
6.7.4　外部链接　/142
6.8　课堂练习　/145
强化训练　/147
第7章　HTML5新增元素的用法
7.1　HTML5新增主体结构元素　/150
7.1.1　article元素　/150
7.1.2　section元素　/151
7.1.3　nav元素　/152
7.1.4　aside元素　/154
7.1.5　pubdate元素　/155
7.2　HTML5新增非主体结构元素　/156
7.2.1　header元素　/156
7.2.2　hgroup元素　/157
7.2.3　footer元素　/158
7.2.4　address元素　/160
7.3　新增audio和video元素　/161
7.3.1　检测浏览器是否支持　/161
7.3.2　audio元素　/162
7.3.3　使用audio元素　/163
7.3.4　video元素　/164
7.3.5　使用video元素　/165
7.4　新增的属性　/167
7.4.1　表单相关属性　/167
7.4.2　其他相关属性　/168
7.5　课堂练习　/168
强化训练　/171
第8章　制作新型表单
8.1　认识HTML5 forms　/174
8.1.1　HTML5 forms新特性　/174
8.1.2　新型表单的输入型控件　/175
8.2　表单新属性　/179
8.2.1　新增表单元素　/179
8.2.2　新增表单属性　/182
8.3　HTML5中forms的应用　/186
8.4　课堂练习　/189
强化训练　/191
第9章　地理位置请求
9.1　关于地理位置信息　/194
9.1.1　经度和纬度坐标　/194
9.1.2　IP地址定位数据　/194
9.1.3　GPS地理定位数据　/195
9.1.4　WiFi地理定位数据　/195
9.1.5　自定义地理定位　/195
9.2　各种浏览器对Geolocation的支持　/195
9.2.1　Geolocation API概述　/196
9.2.2　Geolocation的浏览器支持情况　/198
9.3　隐私处理　/199
9.3.1　应用隐私保护机制　/199
9.3.2　处理位置信息　/199
9.4　使用Geolocation API　/199
9.4.1　检测浏览器是否支持　/200
9.4.2　位置请求　/201
9.5　在地图上显示你的位置　/203
9.6　课堂练习　/207
强化训练　/209
第10章　在页面中绘图
10.1　canvas入门　/212
10.1.1　canvas含义　/212
10.1.2　canvas坐标　/212
10.2　使用canvas　/213
10.2.1　在页面中加入canvas　/213
10.2.2　绘制矩形和五角形　/215
10.2.3　检测浏览器是否支持　/218
10.3　绘制曲线路径　/219
10.3.1　绘制路径的方法　/219
10.3.2　描边样式的使用　/222
10.3.3　填充和曲线的绘制方法　/224
10.4　绘制图像　/226
10.4.1　插入图片　/226
10.4.2　渐变颜色的使用　/228
10.4.3　变形图形的设置方法　/231
10.4.4　组合图形的绘制方法　/232
10.4.5　使用canvas绘制文字　/235
10.5　课堂练习　/236
强化训练　/240
第11章　离线储存和拖放
11.1?离线Web入门　/244
11.1.1　离线Web介绍　/244
11.1.2　离线Web应用的浏览器支持情况　/244
11.2　使用离线Web　/245
11.2.1　支持离线行为　/245
11.2.2　manifest文件介绍　/246
11.2.3　applicationCache对象　/247
11.2.4　离线Web的具体应用　/249
11.3　Web workers知识　/251
11.3.1　Web workers概述　/251
11.3.2　Web workers的简单应用　/252
11.4　使用Web workers API　/254
11.4.1　检测浏览器是否支持　/254
11.4.2　创建Web workers　/255
11.4.3　多线程文件的加载与执行　/255
11.4.4　与Web workers通信　/256
11.5　拖放API　/257
11.5.1　实现拖放API的过程　/257
11.5.2　dataTransfer对象的属性与方法　/258
11.6　拖放API的应用　/258
11.6.1　拖放应用　/259
11.6.2　拖放列表　/261
11.7　课堂练习　/264
强化训练　/267
第12章　综合实战
12.1　制作一个商业网站　/270
12.1.1　商业网站的功能　/270
12.1.2　界面设计分析　/271
12.2　头部和banner的制作　/271
12.2.1　头部内容的结构分析　/271
12.2.2　banner的制作　/272
12.3　页面主体的制作　/273
12.3.1　主体内容结构分析　/274
12.3.2　主体内容样式定义　/275
12.4　页面尾部的制作　/276
12.5　网站首页代码示例　/277
12.6　二级页面的制作　/282
参考文献　/287