Chapter01从HTML的发展说起
1.1 Web工作原理........................................................................................
2
1.1.1 Internet与万维网
..............................................................................
2
1.1.2 Web架构
.........................................................................................
3
1.2 从HTML到HTML
5.............................................................................
4
1.2.1 HTML发展史 ...................................................................................
4
1.2.2 从HTML到XHTML
........................................................................... 4
1.2.3 HTML 5的发展
.................................................................................
5
1.3 认识HTML
5.........................................................................................
6
1.3.1 HTML 5的兼容性
..............................................................................
6
1.3.2 HTML 5的化繁为简 ...........................................................................
6
1.3.3 HTML 5的通用访问
........................................................................... 7
1.3.4 HTML 5标准改进
..............................................................................
7
1.4 HTML 5新增功能.................................................................................
8
1.4.1 字符集和DOCTYPE的改进 ................................................................ 8
1.4.2 页面的交互性能更强大
....................................................................... 8
1.4.3 使用HTML 5的优势
..........................................................................10
1.4.4 HTML 5的未来发展
.......................................................................... 11
Chapter02HTML入门必备知识
2.1 HTML的基本结构................................................................................14
2.1.1 开始标签<html>
..............................................................................15
2.1.2 头部标签<head>
.............................................................................15
2.1.3 标题标签<title>
...............................................................................15
2.1.4 主体标签<body>
.............................................................................16
2.1.5 元信息标签<meta>
..........................................................................16
2.1.6 <!DOCTYPE>标签
..........................................................................17
2.2 HTML单位...........................................................................................18
2.3 HTML链接...........................................................................................18
2.3.1 绝对路径
........................................................................................18
2.3.2 相对路径
........................................................................................18
2.4 创建超链接 ...........................................................................................19
2.4.1 超链接标签的属性
............................................................................19
2.4.2 内部链接..........................................................................................19
2.4.3 锚点链接
........................................................................................21
2.4.4 外部链接
.......................................................................................
24
Chapter03CSS基础知识
3.1 CSS概述.............................................................................................
28
3.1.1 CSS简介
.......................................................................................
28
3.1.2 CSS特点 .......................................................................................
28
3.1.3 CSS语法
.......................................................................................
29
3.1.4 引入CSS的方法
..............................................................................
29
3.2 CSS选择器
.........................................................................................
32
3.2.1 三大选择器.....................................................................................
32
3.2.2 集体选择器 ....................................................................................
35
3.2.3 属性选择器
....................................................................................
36
3.2.4 后代选择器
....................................................................................
38
3.2.5 子元素选择器
.................................................................................
40
3.2.6 相邻兄弟选择器
...............................................................................41
3.2.7 伪类...............................................................................................
43
3.2.8 伪元素
...........................................................................................
45
3.3 CSS的继承..........................................................................................
49
3.3.1 继承关系
.......................................................................................
49
3.3.2 CSS继承的局限性 ...........................................................................
50
3.4 CSS绝对数值单位..............................................................................
52
3.5 CSS相对数值单位..............................................................................
52
Chapter04HTML 5新增元素
4.1 HTML 5中新增的元素........................................................................
54
4.2 新的主体结构元素.................................................................................61
4.2.1 article元素 ......................................................................................61
4.2.2 section元素
...................................................................................
62
4.2.3 nav元素
........................................................................................
64
4.2.4 aside元素
......................................................................................
66
4.2.5 pubdate属性
.................................................................................
67
4.3 新的非主体结构元素 ...........................................................................
68
4.3.1 header元素....................................................................................
68
4.3.2 hgroup元素
...................................................................................
69
4.3.3 footer元素
.....................................................................................
70
4.3.4 address元素
..................................................................................71
4.4 表单相关属性.......................................................................................
73
4.5 其他相关属性.......................................................................................
73
4.6 HTML 5中废除的元素........................................................................
74
4.7 HTML 5中废除的属性........................................................................
74
Chapter05表格的应用
5.1 创建表格...............................................................................................
76
5.1.1 表格的基本构成
..............................................................................
76
5.1.2 表格标签
.......................................................................................
76
5.1.3 表格的结构标签
..............................................................................
77
5.2 设置表格边框样式
..............................................................................
79
5.2.1 给表格设置边框...............................................................................
79
5.2.2 设置表格边框宽度
........................................................................... 80
5.2.3 设置表格边框颜色
............................................................................81
5.2.4 设置表格单元格的间距 .....................................................................
82
5.2.5 设置表格文字与边框的间距 ............................................................... 83
5.2.6 设置表格标题
.................................................................................
85
5.3 设置表格大小和行内属性....................................................................
86
5.3.1 设置整个表格的大小
........................................................................ 86
5.3.2 设置表格中行的属性 ........................................................................
87
5.3.3 设置行的背景颜色
........................................................................... 88
5.3.4 设置行内文字的对齐方式 ..................................................................
90
5.4 设置表格的背景...................................................................................
92
5.4.1 设置表格背景的颜色
........................................................................ 92
5.4.2 为表格背景插入图片
........................................................................ 93
5.5 设置单元格的样式...............................................................................
95
5.5.1 设置单元格的大小
........................................................................... 95
5.5.2 设置单元格的背景颜色
..................................................................... 96
5.5.3 设置单元格的边框属性
..................................................................... 97
5.5.4 合并单元格
....................................................................................
98
Chapter06文字和图片样式的应用
6.1 文字的属性..........................................................................................
102
6.1.1 标题文字标签
................................................................................
102
6.1.2 设置标题文字的对齐方式 .................................................................
103
6.1.3 设置文字字体
................................................................................
104
6.1.4 设置段落换行
................................................................................
105
6.1.5 设置字体颜色
................................................................................
106
6.1.6 设置上标和下标
.............................................................................
106
6.1.7 设置删除线
...................................................................................
107
6.1.8 使用不换行标签 .............................................................................
108
6.1.9 使用加粗标签
................................................................................
109
6.1.10 使用倾斜标签
...............................................................................
110
6.2 图片的样式 ..........................................................................................
111
6.2.1 图片的格式......................................................................................
111
6.2.2 添加图片 .......................................................................................
112
6.2.3 设置图片大小
................................................................................
113
6.2.4 设置图片边框
................................................................................
114
6.2.5 图片的水平间距 .............................................................................
115
6.2.6 图片的垂直间距
.............................................................................
116
6.2.7 图片的提示文字
.............................................................................
117
6.2.8 图片的替换文字
.............................................................................
118
6.2.9 图片相对于文字的对齐方式 .............................................................. 119
6.2.10 为图片添加超链接 ........................................................................
121
Chapter07表单的应用
7.1 表单的属性..........................................................................................
123
7.1.1 处理动作
......................................................................................
123
7.1.2 表单名称 .......................................................................................
123
7.1.3 传送方法
......................................................................................
124
7.1.4 编码方式
.......................................................................................
125
7.1.5 目标显示方式
.................................................................................
125
7.2 表单的控件..........................................................................................
126
7.3 输入型控件..........................................................................................
127
7.3.1 text文字字段 .................................................................................
127
7.3.2 password密码域
........................................................................... 128
7.3.3 radio单选按钮
...............................................................................
130
7.3.4 checkbox复选框
........................................................................... 131
7.3.5 button普通按钮
.............................................................................
132
7.3.6 submit提交按钮 .............................................................................
133
7.3.7 reset重置按钮
...............................................................................
134
7.3.8 image图像域
.................................................................................
136
7.3.9 file文件域
.....................................................................................
137
7.3.10 hidden隐藏域
..............................................................................
138
7.4 使用label定义标签.............................................................................
138
7.5 使用button定义按钮.........................................................................
140
7.6 列表、表单标签...................................................................................
141
7.7 文本域标签..........................................................................................
142
7.8 制作综合表单......................................................................................144
Chapter08多媒体的应用
8.1 插入多媒体..........................................................................................148
8.1.1 插入音频和视频 .............................................................................148
8.1.2 插入flash动画
...............................................................................149
8.2 设置滚动效果......................................................................................
150
8.2.1 设置滚动速度
................................................................................
150
8.2.2 设置滚动方向
................................................................................
151
8.2.3 设置滚动延迟
................................................................................
152
8.2.4 设置滚动方式
................................................................................
153
8.2.5 设置滚动的背景颜色 .......................................................................
154
8.2.6 设置滚动范围
................................................................................
155
8.2.7 设置空白空间
.................................................................................
156
8.3 设置背景音乐......................................................................................
157
8.3.1 插入背景音乐 ................................................................................
157
8.3.2 设置背景音乐的循环播放次数 ........................................................... 159
8.3.3 设置视频的自动播放
....................................................................... 160
Chapter09列表的应用
9.1 使用无序列表......................................................................................
162
9.1.1 ul标签
..........................................................................................
162
9.1.2 无序列表的符号 .............................................................................
163
9.2 使用有序列表......................................................................................
165
9.2.1 ol标签
..........................................................................................
165
9.2.2 有序列表的符号
.............................................................................
166
9.2.3 有序列表的起始值
.......................................................................... 167
9.3 定义列表..............................................................................................
170
9.4 菜单列表..............................................................................................
173
9.5 设置列表文字颜色...............................................................................
174
9.6 表格的嵌套..........................................................................................
175
9.6.1 定义列表的嵌套
.............................................................................
175
9.6.2 无序列表和有序列表的嵌套 .............................................................. 177
9.6.3 有序列表之间的嵌套
....................................................................... 178
Chapter10图形的绘制
10.1 canvas基础.....................................................................................
181
10.1.1 什么是canvas
........................................................................... 181
10.1.2 canvas的应用领域 .....................................................................
181
10.1.3 替代的内容
................................................................................
181
10.1.4 浏览器支持情况
.......................................................................... 182
10.1.5 CSS和canvas ...........................................................................
182
10.1.6 canvas坐标
..............................................................................
182
10.2 怎样使用canvas.............................................................................
183
10.2.1 在页面中加入canvas
.................................................................. 183
10.2.2 绘制矩形和三角形
....................................................................... 186
10.2.3 检测浏览器是否支持
.................................................................... 189
10.3 绘制曲线路径....................................................................................
190
10.3.1 路径
.........................................................................................
190
10.3.2 描边样式
...................................................................................
192
10.3.3 填充样式
...................................................................................194
10.3.4 绘制曲线 ...................................................................................
196
10.4 绘制图像
...........................................................................................
198
10.4.1 插入图片....................................................................................
198
10.4.2 绘制渐变图形
............................................................................
200
10.4.3 绘制变形图形
............................................................................
202
10.4.4 组合多个图形 ............................................................................
204
10.4.5 图形的缩放
...............................................................................
206
10.4.6 像素处理
..................................................................................
207
10.5 文本应用...........................................................................................
208
10.5.1 绘制文本
..................................................................................
208
10.5.2 应用阴影 ...................................................................................
210
10.6 绘制时钟............................................................................................
211
Chapter11离线与处理线程
11.1 离线Web概述...................................................................................
218
11.1.1 离线Web介绍
............................................................................
218
11.1.2 浏览器支持情况
.......................................................................... 218
11.2 使用离线Web...................................................................................
218
11.2.1 构建简单的离线应用程序 .............................................................. 218
11.2.2 支持离线行为
............................................................................
220
11.2.3 mannifest文件
........................................................................... 221
11.2.4 applicationCache对象 ...............................................................
222
11.2.5 离线Web的具体应用
.................................................................. 224
11.3 Web Workers概述.......................................................................
228
11.3.1 什么是Web Workers
................................................................ 228
11.3.2 Web Workers的简单应用
.......................................................... 229
11.4 使用Web Workers
API................................................................ 231
11.4.1 检测浏览器是否支持
.................................................................... 231
11.4.2 创建Web Workers
................................................................... 232
11.4.3 多线程文件的加载与执行 ............................................................ 232
11.4.4 与Web Workers通信 ................................................................
232
Chapter12获取地理位置
12.1 关于地理位置信息............................................................................
236
12.1.1 经度和纬度坐标
......................................................................... 236
12.1.2 IP地址定位数据 .........................................................................
236
12.1.3 GPS地理定位数据
..................................................................... 236
12.1.4 WIFI地理定位数据
..................................................................... 237
12.1.5 用户自定义的地理定位 ................................................................
237
12.2 Geolocation API概述..................................................................
237
12.2.1 什么是Gerlocation API
.............................................................. 237
12.2.2 浏览器支持情况 .........................................................................
240
12.3 隐私处理...........................................................................................
240
12.3.1 应用隐私保护机制
...................................................................... 240
12.3.2 处理位置信息
............................................................................
240
12.4 使用Geolocation
API................................................................... 241
12.4.1 检测浏览器是否支持 ....................................................................
241
12.4.2 位置请求
..................................................................................
242
12.5 在地图上显示你的位置....................................................................
245
Chapter13视频和音频的添加
13.1 audio和video简介.........................................................................
249
13.1.1 audio和video相关事件................................................................
249
13.1.2 audio和video相关属性................................................................
250
13.1.3 audio和video相关方法................................................................
250
13.2 浏览器的支持情况.............................................................................
251
13.3 audio和video元素的应用..............................................................
251
13.3.1 检测浏览器是否支持 ...................................................................
252
13.3.2 audio元素
................................................................................
252
13.3.3 使用audio元素 ..........................................................................
254
13.3.4 video元素
................................................................................
255
13.3.5 使用video元素
.......................................................................... 256
Chapter14新型表单详解
14.1 HTML 5 form概述........................................................................
259
14.1.1 HTML 5 form的新特性
.............................................................. 259
14.1.2 浏览器支持情况 .........................................................................
259
14.1.3 输入型控件
...............................................................................
260
14.2 表单新属性.......................................................................................
262
14.2.1 新的表单元素
............................................................................
262
14.2.2 新增属性
..................................................................................
264
14.3 HTML 5中form应用.....................................................................
268
Chapter15文件拖放的应用
15.1 拖放API...........................................................................................
272
15.1.1 实现拖放API的过程
.................................................................... 272
15.1.2 datatransfer对象的属性与方法
................................................... 272
15.2 拖放API的应用................................................................................
273
15.2.1 拖放应用 ..................................................................................
273
15.2.2 拖放列表
..................................................................................
275
15.3 邮箱附件拖拽上传............................................................................
278
15.4 将商品拖入购物车............................................................................
280
Chapter16CSS 3实际应用
16.1 CSS 3概述......................................................................................
287
16.1.1 CSS 3与CSS的异同
.................................................................. 287
16.1.2 浏览器支持情况
......................................................................... 287
16.2 CSS 3的新增选择器.......................................................................
287
16.2.1 CSS 3新增的长度单位 ............................................................... 287
16.2.2 新增结构性伪类
......................................................................... 289
16.2.3 新增UI元素状态伪类
................................................................... 294
16.2.4 新增属性和其他
......................................................................... 296
16.3 CSS 3文本样式
.............................................................................
299
16.3.1 text-shadow文本阴影................................................................
299
16.3.2 text-overflow文本溢出
............................................................... 301
16.3.3 word-wrap文本换行
................................................................. 302
16.3.4 word-break单词拆分
................................................................ 303
16.4 CSS 3边框样式
.............................................................................
305
16.4.1 border-radius圆角边框..............................................................
305
16.4.2 box-shadow盒子阴影
............................................................... 306
16.5 CSS 3背景样式..............................................................................
307
16.5.1 background-size背景尺寸
......................................................... 308
16.5.2 background-origin背景的绘制区域
............................................. 309
16.6 CSS 3渐变.......................................................................................
311
16.6.1 线性渐变
...................................................................................
311
16.6.2 径向渐变
...................................................................................
313
16.7 CSS 3转换.......................................................................................
315
16.7.1 2D转换 .....................................................................................
315
16.7.2 3D转换
....................................................................................
322
16.8 CSS 3动画......................................................................................
328
16.8.1 动画属性
..................................................................................
328
16.8.2 实现动画
..................................................................................
330
16.9 CSS 3多列布局...............................................................................
333
16.10 CSS 3过渡....................................................................................
337
16.10.1 单项属性过渡
........................................................................... 337
16.10.2 多项属性过渡 ...........................................................................
338
Chapter17网页特效的添加
17.1 JavaScript简介............................................................................
342
17.2 JavaScript的基本元素.................................................................
343
17.2.1 数据类型 ..................................................................................
343
17.2.2 常量和变量
...............................................................................
345
17.2.3 运算符和表达式
......................................................................... 346
17.3 JavaScript事件分析.....................................................................
352
17.3.1 事件类型
..................................................................................
352
17.3.2 事件句柄 ..................................................................................
363
17.3.3 事件处理
..................................................................................
365
17.4 表单事件...........................................................................................
367
17.4.1 鼠标单击和双击事件 ...................................................................
367
17.4.2 鼠标移动事件
............................................................................
368
17.5 键盘事件...........................................................................................
369
17.6 窗口事件............................................................................................
371
17.7 JavaScript事件分析.....................................................................
372
17.7.1 轮播图效果
...............................................................................
372
17.7.2 闪烁效果 ..................................................................................
377
17.7.3 鼠标滑过时图片的震动效果 .......................................................... 379
17.8 窗口特效...........................................................................................
380
17.8.1 定时关闭窗口
............................................................................
380
17.8.2 全屏显示窗口
.............................................................................
381
17.9 时间特效............................................................................................
381
17.9.1 显示网页停留时间
....................................................................... 381
17.9.2 显示当前日期和时间 ...................................................................
383
Chapter18制作一场梦幻流星雨
18.1 制作一颗流星...................................................................................
385
18.2 制作流星雨.......................................................................................
388
18.3 鼠标移动的效果...............................................................................
392
18.4 整场流星雨.......................................................................................
393
Chapter19制作一个炫酷的网站
19.1 网站预览...........................................................................................
399
19.2 网站主体结构设计.............................................................................
401
19.3 首页倒计时的设计.............................................................................
401
19.4 导航栏的设计...................................................................................
404
19.5 关于我们页面的制作........................................................................
406
19.6 订阅页面的设计.................................................................................
410
19.7 联系我们页面的表单设计.................................................................
412
19.8 下拉按钮设计....................................................................................
415
19.9 颜色自选模式设计.............................................................................
417
19.10 HTML代码......................................................................................
418
Chapter20HTML 5的开发软件
20.1 什么是HBuilder.............................................................................
430
20.1.1 安装HBuilder ............................................................................
430
20.1.2 使用HBuilder新建项目 ................................................................
430
20.1.3 使用HBuilder创建HTML页面
....................................................... 430
20.2 代码块................................................................................................
431
20.2.1 使用代码块编程
......................................................................... 432
20.2.2 使用CSS选择器语法来快速开发HTML和CSS ...............................
433
20.2.3 分栏 ........................................................................................
434
20.3 使用HBuilder创建App..................................................................
435
20.4 编写一个登录界面............................................................................
436