网页设计与开发殿堂之路HTML 5网页设计与制作全程揭秘

第1 章从HTML 到HTML5
1.1　HTML 基础 1
1.1.1　HTML 概述1
1.1.2　HTML 特性1
1.1.3　HTML 文档结构2
1.1.4　HTML 的基本语法2
1.1.5　HTML 编写注意事项 3
1.2　XHTML 基础3
1.2.1　XHTML 概述3
1.2.2　XHTML 文档结构4
1.2.3　XHTML 的文档类型 5
1.2.4　名字空间5
1.3　HTML5 基础5
1.3.1　HTML5 概述6
1.3.2　HTML5 的文档结构 6
1.3.3　HTML5 的优势 6
1.3.4　HTML5 精简的头部 7
1.4　HTML 文件的编写方式 8
1.4.1　使用记事本编写 8
实战　使用记事本制作HTML 页面8
1.4.2　使用Dreamweaver 编写9
实战　使用Dreamweaver 制作HTML 页面10
1.5　HTML5 中的标签11
1.6　HTML5 的标准属性 13
1.7　HTML5 的事件属性 14
第２章HTML5 页面基本设置
2.1　网页头部—— 标签 16
2.1.1　网页标题—— 标签 16
实战　使用 标签设置网页标题 17
2.1.2　基底网址—— 标签 17
实战　设置网页基底网址 18
2.2　元信息—— 标签 18
2.2.1　设置网页关键字19
2.2.2　设置网页说明 19
2.2.3　设置网页作者信息20
2.2.4　设置网页编辑软件20
实战　设置网页基础元信息20
2.2.5　设置网页定时跳转21
实战　设置网页定时跳转22
2.2.6　限制搜索方式22
2.2.7　设置网页文字及语言23
2.2.8　设置网页有效期限23
2.2.9　禁止缓存调用24
2.2.10　删除过期的cookie24
2.2.11　强制打开新窗口24
2.3　网页主体—— 标签25
2.3.1　网页边距——margin 属性25
实战　设置网页整体边距25
2.3.2　网页背景颜色——bgcolor 属性 26
实战　设置网页背景颜色27
2.3.3　背景图像——background 属性27
实战　设置网页背景图像28
2.3.4　文字颜色——text 属性 28
实战　设置网页默认文字颜色29
2.3.5　链接文字颜色——link 属性 29
实战　设置网页默认链接文字颜色 29
2.4　在HTML 代码中添加注释30
第3章设置文本与段落
3.1　设置文本效果32
3.1.1　文字样式—— 标签32
实战　设置网页文字基本样式33
3.1.2　倾斜文字—— 和 标签 34
实战　设置文字倾斜效果34
3.1.3　加粗文字—— 和标签35
实战　设置网页文字加粗效果36
3.1.4　下画线—— 标签36
实战　为文字添加下画线37
3.1.5　删除线—— 和 标签37
实战　为文字添加删除线37
3.1.6　上标与下标—— 和标签38
实战　设置上标和下标文字效果 38
3.1.7　等宽文本—— 和标签39
3.1.8　标题文本—— 至 标签 39
实战　设置标题文字40
3.2　特殊文字标签40
3.2.1　空格—— 40
实战　在网页文本中添加空格41
3.2.2　其他特殊符号41
实战　在网页中添加特殊文本符号 42
3.2.3　水平线—— 标签42
实战　在网页中插入并设置水平线 42
3.3　文本的分行与分段43
3.3.1　文本换行——
标签43
实战　为网页文本进行换行处理 43
3.3.2　强制不换行—— 标签 44
实战　强制网页文本不换行44
3.3.3　文本分段—— 标签45
实战　为网页文本进行分段处理 45
3.3.4　段落文字对齐——align 属性46
实战　设置文字水平对齐效果46
3.3.5　保留原始排版—— 标签47
实战　保留网页文本原始排版效果 47
3.4　其他文字标签47
3.4.1　文字标注—— 标签47
实战　在网页中实现文字标注说明效果 47
3.4.2　声明变量—— 标签48
实战　使用声明变量标签48
3.4.3　忽视HTML—— 和标签49
实战　使用忽视HTML 标签49
3.5　滚动文本—— 标签 50
实战　制作网页文本滚动效果50
第4 章插入并设置图像
4.1　了解网页中的图像格式52
4.1.1　网页常用的图像格式52
4.1.2　选择合适的图像格式53
4.2　插入图像—— 标签 53
实战　制作图像页面54
4.3　设置图像属性54
4.3.1　图像宽度和高度——width 和height属性 55
实战　插入图像并设置图像宽度和高度 55
4.3.2　图像边框——border 属性 56
实战　为图像添加边框57
4.3.3　图像替代文本——alt 属性57
实战　为图像添加替代文本和提示文字信息58
4.3.4　图像相对于文字的对齐方式——align属性 59
实战　设置图像相对于文字的对齐效果 59
4.3.5　图文混排效果——align 属性60
实战　制作图文混排页面60
4.4　滚动图像—— 标签 62
实战　制作滚动图像效果62
第５章创建和设置列表
5.1　认识列表标签64
5.2　项目列表 64
5.2.1　创建项目列表—— 标签64
实战　创建新闻列表65
5.2.2　项目列表符号——type 属性66
实战　设置列表符号效果67
5.3　编号列表68
5.3.1　创建编号列表—— 标签68
实战　创建排行列表69
5.3.2　编号列表符号——type 属性 69
实战　设置编号列表符号70
5.3.3　编号列表起始值——start 属性 71
实战　设置编号列表起始数值72
5.4　定义列表—— 标签 73
实战　制作复杂新闻列表73
第6 章创建和设置超链接
6.1　超链接基础75
6.1.1　什么是超链接75
6.1.2　超链接路径76
6.2　创建超链接77
6.2.1　超链接—— 标签77
6.2.2　超链接提示——alt 属性77
6.2.3　超链接打开方式——target 属性78
实战　为文字和图像设置超链接 78
6.3　创建锚点链接79
6.3.1　插入锚点 79
6.3.2　创建锚点链接80
实战　制作锚点链接页面81
6.4　创建特殊超链接 83
6.4.1　空链接 83
6.4.2　文件下载链接83
实战　创建空链接和文件下载链接 83
6.4.3　脚本链接 84
实战　创建关闭窗口脚本链接85
6.4.4　E-mail 链接 85
实战　创建电子邮件链接86
第7 章插入多媒体
7.1　插入Flash 动画——标签 87
实战　制作Flash 欢迎页 87
7.2　添加背景音乐88
7.2.1　网页中支持的音频格式 88
7.2.2　背景音乐—— 标签89
7.2.3　音乐循环播放次数——loop 属性 89
实战　为网页设置背景音乐 90
7.2.4　嵌入音频—— 标签 90
实战　在网页中嵌入音频播放控制条 91
7.3　插入普通视频92
7.3.1　网页中支持的视频格式92
7.3.2　插入视频—— 标签 92
7.3.3　设置自动播放——autostart 属性 92
实战　在网页中插入视频93
7.3.4　隐藏播放控件——hidden 属性94
第8 章插入和设置表单元素
8.1　关于表单95
8.1.1　插入表单域—— 标签 95
8.1.2　表单动作——action 属性96
8.1.3　表单名称——name 属性 96
8.1.4　表单传送方式——method 属性96
8.1.5　表单编码方式——enctype 属性97
8.1.6　目标显示方式——target98
8.2　添加表单元素98
8.3　输入类型表单元素 99
8.3.1　文本域——text 类型 99
8.3.2　密码域——password 类型 100
8.3.3　图像域——image 类型 100
实战　制作登录页面101
8.3.4　隐藏域——hidden 类型104
8.3.5　复选框——checkbox 类型104
实战　制作网站调查表单104
8.3.6　单选按钮——radio 类型 107
实战　制作网站投票107
8.3.7　文件域——file 类型 109
8.3.8　普通按钮——button 类型 110
8.3.9　提交按钮——submit 类型110
8.3.10　重置按钮——reset 类型 110
8.4　其他类型表单元素110
8.4.1　文本区域—— 标签 111
8.4.2　列表/ 菜单—— 标签 111
实战　制作网站搜索 112
8.5　制作用户注册页面 114
实战　用户注册页面 114
第9 章表格与Div
9.1　了解表格 119
9.2　创建表格 119
9.2.1　表格—— 标签 119
9.2.2　表格标题—— 标签120
9.2.3　表头—— 标签121
实战　创建学习安排表122
9.3　表格结构标签123
9.3.1　表格头部—— 标签 123
9.3.2　表格主体—— 标签 124
9.3.3　表格尾部—— 标签 125
实战　制作学生成绩数据表126
9.4　设置表格属性127
9.4.1　表格宽度与高度——width 和height属性 127
9.4.2　表格对齐方式——align 属性128
9.4.3　表格边框粗细——border 属性129
9.4.4　表格边框颜色——bordercolor 属性130
9.4.5　表格背景颜色——bgcolor 属性 131
9.4.6　表格背景图像——background属性132
实战　为表格设置背景颜色和背景图像133
9.5　设置单元行和单元格属性135
9.5.1　设置单元行内容水平和垂直对齐135
9.5.2　单元格间距136
9.5.3　单元格边距137
9.5.4　合并单元格138
实战　使用表格制作新闻列表 139
9.6　IFrame 框架141
9.6.1　IFrame 框架源文件 142
9.6.2　IFrame 框架的宽度和高度142
9.6.3　IFrame 框架的对齐方式142
9.6.4　IFrame 框架是否显示滚动条142
9.6.5　IFrame 框架的边框 142
实战　设置IFrame 框架属性142
9.7　插入Div 143
9.7.1　 标签 144
9.7.2　设置Div 属性144
9.7.3　 与 标签144
实战　制作欢迎页面145
第10 章HTML 5 文档结构
10.1　认识HTML5 文档结构147
10.2　HTML5 元素分类148
10.2.1　结构片段元素149
10.2.2　进度信息元素149
10.2.3　交互性元素149
10.2.4　内嵌应用元素和辅助元素 149
10.2.5　文档和应用中使用的元素 150
10.2.6　注释元素150
10.2.7　文本和文本标记元素 150
10.2.8　其他元素150
10.3　创建HTML5 主体内容151
10.3.1　文章—— 标签151
10.3.2　章节—— 标签 152
10.3.3　导航—— 标签 154
10.3.4　辅助信息—— 标签156
10.3.5　发布日期—— 标签与微格式157
10.4　添加语义模块 158
10.4.1　页眉—— 标签 158
10.4.2　标题组—— 标签 159
10.4.3　页脚—— 标签 159
10.4.4　联系信息—— 标签 160
10.5　使用文档结构元素制作页面160
实战　制作企业网站首页面 161
第11 章使用HTML5 画布绘图
11.1　使用HTML5 画布绘图166
11.1.1　了解canvas 元素166
11.1.2　在网页中插入canvas 元素 166
11.1.3　如何使用canvas 元素实现绘图 167
11.2　绘制基本图形169
11.2.1　绘制直线169
实战　在网页中绘制直线 169
11.2.2　绘制矩形170
实战　在网页中绘制矩形 171
11.2.3　绘制圆形172
实战　在网页中绘制圆形 173
11.2.4　绘制三角形174
实战　在网页中绘制三角形 174
11.2.5　清除图形175
实战　清除使用canvas 元素所绘制的部分图形 175
11.3　绘制文本176
11.3.1　使用文本176
实战　在网页中绘制文字 177
11.3.2　获取文字宽度177
实战　获取所绘制文字宽度 178
11.4　绘制弧线和曲线 178
11.4.1　使用arc( ) 方法179
实战　通过中心点和半径绘制弧线 .179
11.4.2　使用arcTo( ) 方法 180
实战　通过辅助线绘制弧线 180
11.4.3　使用quadraticCurveTo( ) 方法181
实战　绘制二次样条曲线 182
11.4.4　使用bezierCurveTo( ) 方法 183
实战　绘制贝塞尔曲线 183
11.5　图形的组合与裁切184
11.5.1　图形组合184
实战　绘制组合图形效果 185
11.5.2　使用图像186
实战　使用canvas 元素绘制图像187
11.5.3　使用图像模式188
实战　设置图像平铺效果 188
11.5.4　裁切路径189
实战　在网页中实现圆形裁切图像效果189
11.6　图形变换处理191
11.6.1　移动变换操作191
实战　移动所绘制图形位置 191
11.6.2　缩放变换操作193
实战　使用缩放操作绘制椭圆形193
11.6.3　旋转变换操作194
实战　绘制矩形并进行旋转 195
11.6.4　矩阵变形操作196
11.7　图形颜色与样式设置196
11.7.1　绘制线性渐变196
实战　在网页中绘制矩形并填充线性渐变197
11.7.2　绘制径向渐变198
实战　在网页中绘制圆形并填充径向渐变 198
11.7.3　不同的线型199
11.7.4　创建对象阴影201
实战　为图形添加阴影效果 201
第12 章HTML5 的音频和视频
12.1　HTML5 多媒体基础203
12.1.1　视频文件格式203
12.1.2　在线多媒体的发展203
12.1.3　HTML5 音频和视频的优势 204
12.1.4　音频和视频编解码器 204
12.1.5　HTML5 音频和视频的不足205
12.1.6　检查浏览器是否支持HTML5 音频和视频205
12.2　使用HTML5 音频206
12.2.1　 标签所支持的音频格式206
12.2.2　使用 标签206
实战　在网页中嵌入音频播放 206
12.3　使用HTML5 视频207
12.3.1　 标签所支持的视频格式207
12.3.2　使用 标签207
实战　在网页中嵌入视频播放 208
12.3.3　使用 标签209
12.4　 与 标签的属性209
12.4.1　元素的标签属性209
12.4.2　元素的接口属性210
实战　为网页文本进行分段处理211
12.5　 与 标签的接口方法和事件212
12.5.1　 与 标签的接口方法 212
实战　控制视频的播放和暂停 212
12.5.2　 与 标签的接口事件 214
12.5.3　 与 标签接口事件的使用方法.214
12.5.4　自定义视频播放控制组件 214
实战　自定义视频播放控制组件215
第13 章使用HTML5 的表单元素
13.1　了解HTML5 表单219
13.1.1　HTML 表单的发展 219
13.1.2　HTML5 新增表单元素的作用 219
13.1.3　浏览器对HTML5 表单的支持情况 220
13.2　HTML5 新增表单输入类型 220
13.2.1　url 类型 220
13.2.2　email 类型 220
13.2.3　range 类型 220
13.2.4　number 类型 221
13.2.5　tel 类型 221
13.2.6　search 类型221
13.2.7　color 类型221
13.2.8　date 类型 221
13.2.9　month、week、time、datetime、datetime-local 类型222
13.2.10　使用HTML5 表单元素222
实战　制作留言表单页面 222
13.3　HTML5 新增其他表单元素 226
13.3.1　datalist 元素和list 属性226
13.3.2　keygen 元素226
13.3.3　output 元素227
13.4　HTML5 新增表单属性 227
13.4.1　form 属性227
13.4.2　formaction 属性 227
13.4.3　formmethod、formenctype、formnovalidate、formtarget 属性228
13.4.4　placeholder 属性228
实战　为表单元素设置默认提示内容 228
13.4.5　autofocus 属性 229
13.4.6　autocomplete 属性229
13.5　HTML5 表单验证标签属性 229
13.5.1　required 属性 230
13.5.2　pattern 属性230
13.5.3　min、max 和step 属性 230
13.5.4　novalidate 属性230
实战　对网页表单进行验证 230
13.6　HTML5 表单验证API 231
13.6.1　表单验证的属性231
13.6.2　ValidityState 对象232
13.6.3　checkValidity( ) 方法验证表单 233
实战　使用checkValidity( ) 方法验证表单233
13.6.4　setCustomValidity( ) 方法验证表单234
实战　使用setCustomValidity( ) 方法验证表单 234
13.6.5　表单验证事件236
实战　使用invalid 事件验证表单236
第14 章文件与拖放处理
14.1　文件API 238
14.1.1　新增的上传表单元素属性 238
14.1.2　File 对象与FileList 对象 239
实战　同时上传多个文件并显示文件名称239
14.1.3　Blob 对象240
实战　获取所上传文件数据 240
14.2　FileReader 接口 242
14.2.1　检查浏览器是否支持FileReader接口 242
14.2.2　FileReader 接口的属性 242
14.2.3　FileReader 接口的方法 243
实战　使用FileReader 接口方法将上传的文件读取为不同数据 243
14.2.4　FileReader 接口的事件 245
实战　FileReader 接口的事件响应顺序245
14.3　拖放API 247
14.3.1　新增的draggable 属性247
14.3.2　新增的鼠标拖放事件 247
14.3.3　DataTransfer 对象247
14.3.4　把图像拖放到网页中248
实战　把图像拖放到网页中 248
第15 章HTML5 本地存储
15.1　Web Storage 251
15.1.1　什么是Web Storage251
15.1.2　Cookie 存储数据的不足 251
15.1.3　使用Web Storage 存储的优势252
15.1.4　会话存储与本地存储的区别252
15.2　使用Web Storage252
15.2.1　检查浏览器是否支持Web Storage252
实战　检查浏览器是否支持Web Storage 253
15.2.2　设置和获取Storage 数据254
实战　使用sessionStorage 和localStorage254
15.2.3　Storage API 的属性和方法255
实战　使用storage 对象保存页面内容256
15.2.4　格式化数据257
实战　使用Storage 对象存储JOSN 数据 257
15.2.5　Storage API 事件259
实战　使用Web Storage 制作简单留言板260
15.3　本地数据库Web SQL261
15.3.1　了解Web SQL 数据库262
15.3.2　Web SQL 数据库的基本操作 262
15.3.3　使用Web SQL 数据库263
实战　实现选择网页背景颜色263
第16 章HTML5 离线应用缓存
16.1　Web 离线应用缓存 268
16.1.1　新增的离线应用缓存 268
16.1.2　离线应用缓存与传统页面缓存的区别269
16.1.3　离线应用缓存与本地数据存储的区别269
16.2　manifest 缓存清单文件269
16.2.1　manifest 文件的结构 269
16.2.2　如何使用manifest 文件 270
16.2.3　服务器端的配置270
16.2.4　检查浏览器网络状态 271
实战　检查浏览器的网络状态271
16.3　应用缓存接口applicationCache 273
16.3.1　检查浏览器是否支持应用缓存接口273
实战　检查浏览器是否支持Web 离线应用 273
16.3.2　applicationCache 接口274
16.3.3　接口的status 属性274
16.3.4　接口的方法275
16.3.5　接口的事件275
实战　离线应用缓存的事件发生顺序 275
16.4　离线缓存网页内容277
实战　离线缓存网页内容 277
第17 章使用Web Workers 处理线程
17.1　了解Web Workers281
17.1.1　什么是Web Workers281
17.1.2　Web Workers 线程的特点281
17.1.3　Web Workers 体系结构 282
17.2　专属线程Dedicated Worker 282
17.2.1　检查浏览器是否支持Worker对象282
17.2.2　创建专属线程282
17.2.3　为线程添加监听消息事件 282
17.2.4　向线程中发送消息283
17.2.5　编写线程处理的脚本文件 283
17.2.6　在线程中加载多个文件283
17.2.7　监听线程错误283
实战　简单的专属线程应用 284
17.2.8　多线程嵌套285
17.2.9　单层线程嵌套286
实战　线程嵌套输出*大质数 286
17.2.10　多层线程嵌套 287
17.3　共享线程Shared Worker288
17.3.1　共享线程的基本用法 288
17.3.2　使用共享线程289
实战　使用共享线程显示连接数 289
17.4　Web Workers 接口框架291
17.4.1　线程外部接口291
17.4.2　线程内部接口293
第18 章跨源通信和WebSocket双向通信
18.1　了解跨文档信息传输 296
18.1.1　跨文档信息传输的实现296
18.1.2　网页源安全297
18.2　使用postMessage 接口297
18.2.1　检查浏览器是否支持postMessage接口298
18.2.2　使用postMessage( ) 方法发送信息298
18.2.3　使用message 事件监听收到的信息298
实战　实现简单的跨文档信息传输 299
18.3　信息事件接口MessageEvent 301
18.3.1　MessageEvent 接口清单 301
18.3.2　MessageEvent 接口属性 301
18.3.3　initMessageEvent( ) 接口方法302
18.3.4　MessageEvent( ) 接口说明302
18.4　了解XMLHttpRequestLevel2 规范 302
18.4.1　XMLHttpRequestLevel2 规范的优势 302
18.4.2　XMLHttpRequestLevel2 规范的接口303
18.4.3　XMLHttpRequestLevel2 规范中新的响应事件304
18.4.4　检查浏览器是否支持全新的XMLHttpRequest 对象304
18.4.5　构建跨源请求304
18.4.6　添加监听事件304
18.4.7　部署服务器305
18.5　了解WebSocket 305
18.5.1　WebSocket 概述 305
18.5.2　WebSocket 的优势 306
18.5.3　WebSocket 编程接口306
18.6　了解WebSocket 编程基础 308
18.6.1　检查浏览器是否支持WebSocket 308
18.6.2　创建连接308
18.6.3　添加状态和消息监听事件 309
18.6.4　发送信息309
18.6.5　关闭连接309
第19 章使用HTML5 获取地理位置
19.1　Geolocation API 310
19.1.1　地理位置坐标信息310
19.1.2　地理位置信息的来源 310
19.1.3　地理位置信息的应用 311
19.1.4　Geolocation API 中的隐私保护 311
19.2　使用Geolocation 前的准备 312
19.2.1　Geolocation 的浏览器支持情况312
19.2.2　检查浏览器是否支持Geolocation API312
实战　检查浏览器是否支持GeolocationAPI312
19.3　使用GeolocationAPI 获取地理位置313
19.3.1　getCurrentPosition( ) 方法313
19.3.2　回调函数successCallback( )314
19.3.3　回调函数errorCallback( ) 314
19.3.4　可选参数options 315
19.3.5　单次获取地理位置信息315
实战　单次获取地理位置信息 316
19.3.6　重复更新地理位置信息319
19.4　Geolocation 接口319
19.4.1　NavigatorGeolocation 接口清单 319
19.4.2　Geolocation 接口清单319
19.4.3　PositionOptions 接口清单 320
19.4.4　Position 接口清单 320
19.4.5　Coordinates 接口清单321
19.4.6　PositionError 接口清单321
19.5　在地图上显示位置321
实战　在地图上显示位置 322
第20 章HTML5 网页综合实战
20.1　制作电子商务网站页面 327
20.1.1　设计分析327
20.1.2　布局结构分析327
20.1.3　制作HTML5 页面328
实战　制作页眉header 和导航nav 区域 328
实战　制作网页广告区域 330
实战　制作网页侧边栏区域 332
实战　制作网页主体内容区域 334
实战　制作网页版底footer 区域338
20.2　制作企业网站页面340
20.2.1　设计分析340
20.2.2　布局结构分析340
20.2.3　制作HTML5 页面341
实战　制作页面头部header 区域341
实战　制作网页焦点轮换广告图344
实战　制作页面主体内容区域 346
实战　制作页脚部分内容 348
HTML5 手机网页实战
21.1　如何制作响应式网站页面351
21.1.1　什么是响应式设计351
21.1.2　响应式设计的相关术语352
21.1.3　 标签设置353
21.2　制作响应式摄影图片网页354
21.2.1　设计分析354
21.2.2　布局结构分析354
21.2.3　制作HTML5 响应式网页355
实战　制作页面导航区域 355
实战　制作页面主体内容区域 360
第21 章实战　制作页面版底信息区域 365