HTML 5+CSS 3+JavaScript网页设计与制作全程揭秘（网页设计与开发殿堂之路）

目录
第1章  认识HTML与HTML5
1.1　了解动态网站的开发技术 1
1.1.1　网页编辑软件Dreamweaver 1
1.1.2　网页标记语言HTML 2
1.1.3　网页表现语言CSS 2
1.1.4　网页特效脚本语言JavaScript 2
1.1.5　动态网页编程语言ASP、PHP和JSP等 3
1.2　HTML基础 3
1.2.1　什么是HTML 3
1.2.2　HTML的主要功能 4
1.2.3　HTML的编辑环境 4
1.2.4　认识Dreamweaver 5
实 战　制作个HTML页面 6
1.3　HTML5基础 7
1.3.1　HTML5概述 7
1.3.2　HTML5的优势 8
1.4　认识HTML5 9
1.4.1　HTML5的文档结构 9
1.4.2　HTML5的基本语法 9
1.4.3　HTML5精简的头部 10
1.5　HTML5中新增的标签 10
1.5.1　结构标签 11
1.5.2　文本标签 11
1.5.3　应用和辅助标签 11
1.5.4　进度标签 11
1.5.5　交互性标签 11
1.5.6　在文档和应用中使用的标签 12
1.5.7　标签 12
1.5.8　其他标签 12
1.6　HTML5中废弃的标签 12
1.7　HTML、CSS与JavaScript的结合 13 第2章  HTML主体标签
2.1　HTML头部标签设置 14
2.1.1　标签 14
实战　设置网页标题 14
2.1.2　标签 15
实战　设置网页基底网址 16
2.1.3　标签 16
实战　设置网页关键字、说明以及页面定时跳转 18
2.2　HTML主体标签设置 19
2.2.1　边距属性margin 19
实战　设置网页整体内容边距 20
2.2.2　背景颜色属性bgcolor 21
实战　设置网页背景颜色 21
2.2.3　背景图像属性background 21
实战　为网页主体添加背景图像 22
2.2.4　文字属性text 22
实战　设置网页文字默认颜色 23
2.2.5　默认链接属性link 23
实战　设置网页中超链接文字的默认颜色 24
2.3　在HTML代码中添加注释 25
2.4　在HTML中调用外部程序 25
2.4.1　调用外部JavaScript程序 25
实战　在网页中显示当前系统时间 25
2.4.2　区分客户端与服务器端程序 27 第3章  文字与图片标签的应用
3.1　文字修饰 28
3.1.1　文字样式标签 28
实战　设置文字样式 28
3.1.2　文字倾斜和标签 29
实战　设置倾斜文字效果 30
3.1.3　文字加粗和标签 30
实战　设置文字加粗效果 31
3.1.4　文字下画线标签 31
实战　为文字添加下画线修饰 32
3.1.5　其他文字修饰方法 32
3.2　文字的分行与分段 33
3.2.1　文字换行
标签 33
实战　为网页中的文字内容进行换行处理 33
3.2.2　文字强制不换行标签 34
实战　强制文字不自动换行 34
3.2.3　文字分段标签 34
实战　为网页中的文字内容进行分段处理 34
3.2.4　标题文字至标签 35
实战　设置标题文字 35
3.2.5　文字对齐属性align 36
实战　设置文字水平对齐效果 36
3.2.6　水平线标签 37
实战　在网页中插入水平线 37
3.2.7　空格与特殊字符 38
实战　在网页中插入空格和特殊字符 38
3.3　文本滚动标签 39
实战　在网页中实现滚动文本效果 40
3.4　列表标签 41
3.4.1　认识列表标签 41
3.4.2　无序列表标签 41
实战　制作新闻列表 41
3.4.3　有序列表标签 43
实战　制作音乐排行列表 43
3.4.4　定义列表标签 44
实战　制作复杂的新闻列表 44
3.5　图片标签 45
3.5.1　标签 45
实战　制作图像页面 46
3.5.2　图文混排 47
实战　制作图文介绍页面 47
3.5.3　滚动图片 48
第4章  超链接与表格标签的应用
4.1　超链接标签 49
4.1.1　超链接标签 49
4.1.2　相对链接和链接 50
4.1.3　超链接提示——alt属性 50
4.1.4　超链接打开方式——target属性 50
实战　在网页中创建超链接 51
4.2　锚点链接 52
4.2.1　插入锚点 52
4.2.2　创建锚点链接 52
实战　制作锚点链接页面 52
4.3　创建特殊链接 53
4.3.1　空链接 54
4.3.2　文件下载链接 54
实战　创建空链接和文件下载链接 54
4.3.3　脚本链接 55
4.3.4　E-mail链接 55
实战　创建脚本链接和电子邮件链接 55
4.4　表格标签 56
4.4.1　表格的基本构成、和标签 57
4.4.2　表格标题标签 57
实战　创建数据表格 57
4.4.3　表头、表主体和表尾标签 58
实战　设置表格中的表头、表主体和表尾 59
4.5　iFrame框架 60
实战　插入并设置iFrame框架 60
第5章  多媒体标签的应用 5.1　使用标签嵌入传统多媒体元素 62
5.1.1　使用标签在网页中插入Flash动画 62
实战　制作Flash欢迎页面 62
5.1.2　使用标签为网页添加背景音乐 63
实战 　为网页添加背景音乐 63
5.1.3　使用标签嵌入音频 64
实战　在网页中嵌入音频 64
5.1.4　使用标签嵌入视频 65
实战　在网页中嵌入普通视频 65
5.2　了解HTML5中的多媒体标签 66
5.2.1　在线多媒体的发展 66
5.2.2　检查浏览器是否支持和标签 66
5.3　HTML5新增标签的应用 67
5.3.1　标签所支持的音频格式 67
5.3.2　使用标签 67
实战　在网页中嵌入HTML5音频播放 67
5.4　HTML5新增标签的应用 68
5.4.1　标签所支持的视频格式 68
5.4.2　使用标签 68
实战　在网页中嵌入HTML5视频播放 69
5.4.3　使用标签 70
5.5　与标签的属性 70
5.5.1　元素的标签属性 70
5.5.2　元素的接口属性 71
5.6　与标签的接口方法与事件 72
5.6.1　元素的接口方法 72
5.6.2　元素的事件 72
实战　自定义播放控制组件 73
第6章  表单标签的应用
6.1　了解HTML表单 77
6.1.1　表单的作用 77
6.1.2　表单标签 77
6.1.3　表单的数据传递方式 78
6.2　普通的HTML表单元素 78
6.2.1　文本域 78
6.2.2　密码域 78
6.2.3　文本区域 79
6.2.4　隐藏域 79
6.2.5　复选框 79
6.2.6　单选按钮 79
6.2.7　选择域 80
6.2.8　文件域 80
6.2.9　按钮 80
6.2.10　图像域 80
实战　制作登录表单 81
6.3　HTML5新增表单输入类型 83
6.3.1　url类型 83
6.3.2　email类型 83
6.3.3　range类型 83
6.3.4　number类型 83
6.3.5　tel类型 84
6.3.6　search类型 84
6.3.7　color类型 84
6.3.8　date类型 84
6.3.9　month、week、time、datetime、datetime-local类型 85
实战　制作留言表单页面 85
6.3.10　浏览器对HTML5表单的支持情况 88
6.4　HTML5新增表单属性 88
6.4.1　form属性 88
6.4.2　formaction属性 89
6.4.3　formmethod、formenctype、
　　　formnovalidate、formtarget属性 89
6.4.4　placeholder属性 89
6.4.5　autofocus属性 89
实战　为表单元素设置默认提示内容 90
6.4.6　autocomplete属性 90
6.5　使用HTML5表单验证 91
6.5.1　用于实现验证的表单元素属性 91
实战　验证网页表单元素 91
6.5.2　表单验证方法 92
6.5.3　表单验证事件 93 第7章  HTML5中标签的应用
7.1　标签 95
7.1.1　了解标签 95
7.1.2　在网页中使用标签 95
7.1.3　使用标签实现绘图的流程 96
7.2　绘制基本图形 97
7.2.1　绘制直线 97
实战　在网页中绘制直线 97
7.2.2　绘制矩形 98
实战　在网页中绘制矩形 99
7.2.3　绘制圆形 100
实战　在网页中绘制圆形 101
7.2.4　绘制三角形 101
实战　在网页中绘制三角形 102
7.2.5　图形组合 102
7.3　绘制文本 104
7.3.1　使用文本 104
实战　在网页中绘制文字 104
7.3.2　创建对象阴影 105
实战　为网页中所绘制的文字添加阴影 106
7.4　在网页中绘制特殊形状图像 106
7.4.1　绘制图像 106
实战　在网页中绘制图像 107
7.4.2　裁切区域 108
实战　在网页中实现圆形图像效果 108 第8章  HTML5文档结构标签的应用
8.1　构建HTML5页面主体内容 111
8.1.1　文章标签 111
8.1.2　章节标签 113
8.1.3　导航标签 114
8.1.4　辅助内容标签 115
8.1.5　日期时间标签 116
8.2　HTML5文档中的语义模块标签 116
8.2.1　标题标签 116
8.2.2　标题分组标签 117
8.2.3　页脚标签 118
8.2.4　联系信息标签 118
8.3　制作HTML5文章页面 119
实战　制作HTML5文章页面 119 第9章  CSS样式基础
9.1　了解CSS样式 123
9.1.1　什么是CSS样式 123
9.1.2　CSS样式的发展 123
9.2　CSS样式语法 124
9.2.1　CSS样式基本语法 124
9.2.2　CSS样式规则 125
9.3　创建和使用CSS选择器 125
9.3.1　通配符选择器 125
实战　使用通配符选择器控制网页中的所有标签 126
9.3.2　标签选择器 126
实战　使用标签选择器设置网页整体样式 127
9.3.3　ID选择器 127
实战　创建和使用ID CSS样式 128
9.3.4　类选择器 129
实战　创建和使用类CSS样式 129
9.3.5　伪类选择器 130
实战　设置网页中超链接伪类样式 131
9.3.6　派生选择器 132
实战　创建派生选择器样式 133
9.3.7　群组选择器 133
实战　使用群组选择器同时定义多个网页元素样式 134
9.4　在网页中应用CSS样式的4种方式 135
9.4.1　内联CSS样式 135
实战　创建并应用内联CSS样式 135
9.4.2　内部CSS样式 136
实战　创建并应用内部CSS样式 136
9.4.3　外部CSS样式 137
实战　创建并链接外部CSS样式表文件 137
9.4.4　导入外部CSS样式 138
实战　导入外部CSS样式表文件 139
9.5　CSS样式的特性 139
9.5.1　CSS样式的继承性 139
9.5.2　CSS样式的特殊性 139
9.5.3　CSS样式的层叠性 140
9.5.4　CSS样式的重要性 140
第10章  CSS布局与定位方式
10.1　创建Div 142
10.1.1　了解Div 142
10.1.2　如何插入Div 142
10.1.3　块元素与行内元素 144
10.2　CSS基础盒模型 145
10.2.1　CSS基础盒模型概述 145
10.2.2　margin属性——元素边距 146
10.2.3　border属性——元素边框 146
10.2.4　padding属性——元素填充 146
实战　设置网页元素的盒模型相关属性 147
10.3　网页元素的定位方式 148
10.3.1　CSS定位属性 148
10.3.2　相对定位relative 149
实战　实现网页元素的叠加显示 149
10.3.3　定位absolute 150
实战　网页元素固定在右侧显示 150
10.3.4　固定定位fixed 151
实战　实现固定位置的顶部Logo 151
10.3.5　浮动定位 152
实战　制作顺序排列的图像列表 152
10.3.6　空白边叠加 155
实战　网页中空白边叠加的应用 155
10.4　常见的网页布局方式 156
10.4.1　居中的布局 156
10.4.2　浮动的布局 157
10.4.3　自适应高度的解决方法 161
第11章  CSS基础属性详解
11.1　使用CSS设置文字样式 162
11.1.1　font-family属性——字体 162
11.1.2　font-size属性——字体大小 162
11.1.3　color属性——文字颜色 163
实战　设置网页文字基本效果 163
11.1.4　font-weight属性——字体粗细 164
实战　设置网页文字加粗效果 165
11.1.5　font-style属性——字体样式 165
实战　设置网页文字倾斜效果 166
11.1.6　text-transform属性——英文字体大小写 166
实战　设置网页中英文字体大小写 167
11.1.7　text-decoration属性——文字修饰 168
实战　为网页中的文字添加下画线、顶画线和删除线效果 168
11.1.8　letter-spacing属性——字符间距 169
实战　设置网页中文字的字符间距 169
11.2　使用CSS设置段落样式 170
11.2.1　line-height属性——行间距 170
11.2.2　text-indent属性——段落首行缩进 170
实战　美化网页中的段落文本 170
11.2.3　段落首字下沉 171
实战　在网页中实现段落文字首字下沉 172
11.2.4　text-align属性——水平对齐方式 172
实战　设置网页文本水平对齐效果 173
11.2.5　vertical-align属性——垂直对齐方式 174
实战　设置网页文本垂直对齐效果 174
11.3　使用CSS设置背景颜色和背景图像 175
11.3.1　background-color属性——背景颜色 176
实战　设置网页的背景颜色 176
11.3.2　background-image属性——背景图像 176
11.3.3　background-repeat属性——背景图像重复方式 177
实战　设置网页背景图像及其重复方式 177
11.3.4　background-position属性——背景图像位置 179
实战　定位网页中的背景图像 179
11.3.5　background-attachment属性——固定背景图像 180
实战　设置网页中的背景图像固定不动 180
11.4　使用CSS设置边框与图片缩放样式 181
11.4.1　border属性——边框 181
实战　为网页元素添加边框效果 182
11.4.2　图片缩放 184
实战　设置网页中图片的等比例缩放效果 184
11.5　使用CSS设置列表样式 185
11.5.1　list-style-type属性——设置列表符号 185
实战　设置新闻列表效果 186
11.5.2　list-type-image属性——自定义列表符号 187
实战　使用自定义图像作为列表符号 187
11.5.3　设置定义列表样式 188
实战　制作复杂的新闻列表 188
11.6　超链接CSS样式伪类 189
11.6.1　:link伪类 189
11.6.2　:hover伪类 190
11.6.3　:active伪类 190
11.6.4　:visited伪类 190
实战　设置网页中超链接文字效果 191
11.6.5　按钮式超链接 193
实战　制作网站导航菜单 193
11.7　cursor属性——光标指针效果 194
实战　在网页中实现多种光标指针效果 195
第12章  CSS3属性详解
12.1　了解CSS3 196
12.1.1　CSS3的发展 196
12.1.2　浏览器对CSS3的支持情况 196
12.1.3　了解CSS3的全新功能 197
12.2　CSS3新增选择器 197
12.2.1　属性选择器 197
实战　在网页中使用属性选择器 198
12.2.2　结构伪类选择器 199
12.2.3　UI元素状态伪类选择器 200
12.2.4　伪元素选择器 200
实战　在网页中使用伪元素选择器 201
12.3　新增的颜色定义方法 202
12.3.1　RGBA颜色定义方法 202
实战　使用RGBA方式设置半透明颜色 202
12.3.2　HSL颜色定义方法 203
12.3.3　HSLA颜色定义方法 203
实战　使用HSL和HSLA方式定义网页元素的背景颜色 203
12.4　新增的文字设置属性 204
12.4.1　text-shadow属性——文字阴影 204
实战　为网页文字添加阴影效果 205
12.4.2　text-overflow属性——文本溢出 206
实战　设置文字溢出处理方式 206
12.4.3　word-wrap属性 207
实战　设置长文本内容换行 207
12.4.4　word-break和word-space属性 208
实战　设置文字内容换行处理方式 209
12.4.5　@font-face规则——嵌入Web字体 210
实战　在网页中实现特殊字体效果 210
12.5　新增的背景设置属性 212
12.5.1　background-size属性——背景图像大小 212
实战　实现始终满屏显示的网页背景 212
12.5.2　background-origin属性——背景图像原点位置 215
实战　设置背景图像显示原点位置 215
12.5.3　background-clip属性——背景图像裁剪区域 216
实战　设置元素背景图像的显示区域 217
12.5.4　background属性——多背景图像 217
实战　为网页设置多背景图像效果 218
12.6　新增的边框设置属性 219
12.6.1　border-colors属性——多种颜色边框 219
实战　实现多彩绚丽的边框效果 219
12.6.2　border-radius属性——圆角边框 220
实战　为网页元素设置圆角效果 221
12.6.3　border-image属性——图像边框 222
实战　为网页元素设置图像边框效果 222
12.6.4　box-shadow属性——元素阴影 223
实战　为网页元素添加阴影效果 224
12.7　新增的多列布局属性 225
12.7.1　columns属性——多列布局 225
实战　快速对网页内容分列 225
12.7.2　column-width属性——列宽度 226
12.7.3　column-count属性——列数 226
12.7.4　column-gap属性——列间距 227
12.7.5　column-rule属性——列分隔线 227
12.7.6　column-span属性——横跨列 228
实战 　设置网页内容的分列布局效果 228
12.8　新增的盒模型设置属性 230
12.8.1　opacity属性——元素不透明度 230
实战　设置网页元素的不透明度 230
12.8.2　overflow-x和overflow-y属性——溢出内容处理方式 231
实战　设置网页元素内容溢出的处理方式 232
12.8.3　resize属性——自由缩放 233
实战　实现网页元素尺寸任意拖动缩放 233
12.8.4　outline属性——轮廓外边框 234
实战　为网页元素添加轮廓外边框效果 235
12.8.5　content属性——赋予内容 236
实战　为网页元素赋予文字内容 237
第13章  使用CSS3实现动画效果
13.1　实现元素变形 238
13.1.1　transform属性 238
13.1.2　使用rotate( )函数实现元素旋转 238
实战　实现网页元素的旋转变形效果 239
13.1.3　使用scale( )函数实现元素缩放和翻转变形 239
实战　实现网页元素的缩放和翻转效果 240
13.1.4　使用translate( )函数实现元素移动 240
实战　实现网页元素的移动效果 241
13.1.5　使用skew( )函数实现元素倾斜 241
实战　实现网页元素的倾斜效果 242
13.1.6　使用matrix( )函数实现元素矩阵变形 242
实战　实现网页元素的矩阵变形效果 243
13.1.7　定义变形中心点 244
实战　设置网页元素的变形中心点位置 244
13.1.8　同时使用多个变形函数 245
实战　为网页元素同时应用多种变形效果 245
13.2　CSS3实现过渡动画效果 246
13.2.1　transition属性 246
13.2.2　transition-property属性——实现过渡效果 247
实战　制作网页元素旋转并放大动画效果 247
13.2.3　transition-duration属性——设置过渡时间 248
实战　设置网页元素变形动画持续时间 248
13.2.4　transition-delay属性——实现过渡延迟效果 249
实战　设置网页元素变形动画延迟时间 249
13.2.5　transition-timing-function属性——设置过渡方式 250
实战　设置网页元素变形动画过渡方式 251
第14章  JavaScript基础
14.1　了解JavaScript 252
14.1.1　JavaScript概述 252
14.1.2　JavaScript在网页中的作用 252
14.1.3　如何在网页中应用JavaScript 253
实战 　编写一个简单的JavaScript脚本 253
14.2　JavaScript语法基础 254
14.2.1　JavaScript代码格式 254
14.2.2