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