HTMLCSS JavaScript从入门到精通

目录 
Chapter01  从零起步——HTML轻松入门
1.1 认识HTML ........................................................................................... 2
1.1.1 什么是HTML ................................................................................... 2
1.1.2 使用浏览器浏览文件 .......................................................................... 2
1.2 HTML文件的基本标记 ........................................................................ 3
1.2.1 开始标签 ............................................................................... 3 1.2.2 头部标签 .............................................................................. 3 1.2.3 标题标签 ................................................................................ 4 1.2.4 主体标签 .............................................................................. 4 1.2.5 元信息标签 ........................................................................... 5
1.2.6 标签 ........................................................................... 5
1.3 文字基本标记 ........................................................................................ 6
1.3.1 段落标签的用法 ................................................................................ 6
1.3.2 换行标签的用法 ................................................................................ 7
1.3.3 不换行标签的用法 ............................................................................. 8
1.3.4 加粗标签的用法 ................................................................................ 9
1.3.5 倾斜标签的用法 ................................................................................ 9
1.3.6 标题标签的用法 ............................................................................... 10
本章小结 .............................................................................................. 12
 
Chapter02  网页设计基本功——表格的使用
2.1 表格的基本元素 ................................................................................... 14
2.2 表格的相关代码 .................................................................................... 14
2.2.1 表格标签 ............................................................................. 15 2.2.2 行标签 ..................................................................................... 16 2.2.3 单元格标签 .............................................................................. 17 2.2.4 表格的结构标签 ............................................................................... 18
2.2.5 设置表格标题 .................................................................................. 21
2.3 设置表格大小和行内属性 ................................................................... 22
2.3.1 设置整个表格的大小 ........................................................................ 22
2.3.2 设置表格中行的属性 ........................................................................ 23
2.3.3 设置行的背景颜色 ........................................................................... 24
2.3.4 设置行内文字的对齐方式 .................................................................. 25
2.4 设置表格边框样式 .............................................................................. 28
2.4.1 表格的边框宽度 .............................................................................. 28
2.4.2 表格的边框颜色 .............................................................................. 29
2.4.3 表格中的单元格间距 ........................................................................ 30
2.4.4 表格中文字与边框间距 ...................................................................... 31
2.5 设置表格的背景 .................................................................................. 33
2.5.1 设置表格背景颜色 ........................................................................... 33
2.5.2 为表格背景插入图像 ........................................................................ 34
2.6 设置单元格的样式 ............................................................................... 35
2.6.1 设置单元格的大小 ........................................................................... 35
2.6.2 设置单元格的背景颜色 ..................................................................... 36
2.6.3 设置单元格的边框颜色 ..................................................................... 38
2.6.4 合并单元格 .................................................................................... 39
本章小结 .............................................................................................. 41
 
Chapter03  丰富网页——图像的插入
3.1 图片的格式 .......................................................................................... 43
3.2 插入图片 .............................................................................................. 43
3.2.1 使用img标签 .................................................................................. 43
3.2.2 图片的源文件 ................................................................................. 44
3.2.3 设置图片大小 ................................................................................. 45
3.2.4 设置图片提示文字 ........................................................................... 45
3.2.5 图片的对齐方式 .............................................................................. 47
3.2.6 图片的边框 ..................................................................................... 48
3.3 为图片添加超链接 ............................................................................... 49
本章小结 .............................................................................................. 50
 
Chapter04  网页交互——表单的使用
4.1 表单的基本标签 .................................................................................. 52
4.1.1 标签 ................................................................................... 52
4.1.2 标签 ................................................................................... 53
4.1.3 标签 ............................................................................. 54 4.1.4 标签 ................................................................................. 55 4.2 表单的基本属性 .................................................................................. 56
4.2.1 action属性 ..................................................................................... 56
4.2.2 name属性 ..................................................................................... 57
4.2.3 method属性 .................................................................................. 57
4.2.4 enctype属性 .................................................................................. 58
4.2.5 target属性 ..................................................................................... 59
4.3 插入表单对象 ...................................................................................... 59
4.3.1 文本域 ........................................................................................... 59
4.3.2 密码域 ........................................................................................... 60
4.3.3 普通按钮 ........................................................................................ 61
4.3.4 单选按钮 ....................................................................................... 62
4.3.5 复选框 ........................................................................................... 63
4.3.6 提交按钮 ....................................................................................... 64
4.3.7 重置按钮 ....................................................................................... 65
4.3.8 图像按钮 ........................................................................................ 66
4.3.9 隐藏域 ........................................................................................... 67
4.3.10 文件域 .......................................................................................... 68
4.3.11 菜单和列表 ................................................................................... 69
4.4 创建一个注册类表单页面 .................................................................... 71
本章小结 .............................................................................................. 74
 
Chapter05  网页链接——创建超链接
5.1 超链接的路径 ...................................................................................... 76
5.1.1 路径 ....................................................................................... 76
5.1.2 相对路径 ....................................................................................... 76
5.2 创建超链接 .......................................................................................... 76
5.2.1 超链接标签的属性 ........................................................................... 76
5.2.2 内部链接 ........................................................................................ 77
5.2.3 锚点链接 ....................................................................................... 78
5.2.4 外部链接 ........................................................................................ 81
本章小结 .............................................................................................. 84
 
Chapter06  视听效果——添加多媒体
6.1 插入多媒体 .......................................................................................... 86
6.1.1 插入Flash动画 ............................................................................... 86
6.1.2 插入音频 ....................................................................................... 87
6.1.3 插入视频 ....................................................................................... 87
6.2 滚动效果 .............................................................................................. 88
6.2.1 设置滚动速度 ................................................................................. 88
6.2.2 设置滚动方向 ................................................................................. 89
6.2.3 设置滚动延迟 ................................................................................. 90
6.2.4 设置滚动方式 .................................................................................. 91
6.2.5 设置滚动循环 ................................................................................. 92
6.2.6 设置滚动背景颜色 ........................................................................... 93
6.2.7 设置滚动范围 ................................................................................. 94
6.2.8 设置空白空间 .................................................................................. 95
本章小结 .............................................................................................. 96
 
Chapter07  HTML升级——HTML5入门知识
7.1 什么是HTML5 ................................................................................... 98
7.1.1 认识HTML5 ................................................................................... 98
7.1.2 HTML5的发展 ................................................................................ 98
7.2 HTML5新增功能 ............................................................................... 99
7.2.1 字符集和DOCTYPE的改进 .............................................................. 99
7.2.2 引入的新元素 ................................................................................ 100
7.2.3 标准改进 ...................................................................................... 100
7.3 HTML5的优势 .................................................................................. 101
7.3.1 HTML5化繁为简 ............................................................................ 101
7.3.2 用户优先和效率 ............................................................................. 101
7.4 HTML5新增的主体元素 ................................................................... 102
7.4.1 article元素 .................................................................................... 102
7.4.2 section元素 .................................................................................. 103
7.4.3 nav元素 ....................................................................................... 106
7.4.4 aside元素 ..................................................................................... 107
7.4.5 time元素 ...................................................................................... 108
7.4.6 pubdate属性 ................................................................................ 109
7.5 HTML5新增的非主体元素 ............................................................... 110
7.5.1 header元素 .................................................................................. 110
7.5.2 hgroup元素 .................................................................................. 112
7.5.3 footer元素 .................................................................................... 113
7.5.4 address元素 ................................................................................ 114
7.6 HTML5新增的元素属性 ................................................................... 115
7.6.1 表单相关属性 ................................................................................ 115
7.6.2 其他相关属性 ................................................................................ 116
7.7 HTML5新增与废除的元素 ............................................................... 116
7.7.1 HTML5中新增的元素 ...................................................................... 116
7.7.2 HTML5中废除的元素 ...................................................................... 124
本章小结 ............................................................................................ 125
 
Chapter08  HTML5进阶——无处不在的应用
8.1 画布功能 ............................................................................................. 127
8.1.1 canvas元素 .................................................................................. 127
8.1.2 canvas坐标 .................................................................................. 128
8.1.3 canvas绘制路径 ............................................................................ 128
8.1.4 canvas渐变 .................................................................................. 130
8.1.5 canvas文本 .................................................................................. 132
8.2 音频和视频 ......................................................................................... 134
8.2.1 audio元素 ..................................................................................... 134
8.2.2 video元素 ..................................................................................... 137
8.3 表单功能 ............................................................................................. 138
8.3.1 form新特性 ................................................................................... 139
8.3.2 输入型控件 ................................................................................... 139
8.3.3 form新元素 ................................................................................... 141
8.3.4 form新属性 ................................................................................... 143
8.3.5 form练习 ...................................................................................... 147
8.4 拖放功能 ............................................................................................. 149
8.4.1 dataTransfer属性 ......................................................................... 149
8.4.2 拖放列表 ...................................................................................... 150
8.5 地理位置 ............................................................................................. 153
8.5.1 geolocation概述 ........................................................................... 153
8.5.2 geolocation浏览器支持检测 ............................................................ 155
8.5.3 在地图上显示你的位置 .................................................................... 157
8.6 本地存储 ............................................................................................. 159
8.6.1 WebStorage介绍 .......................................................................... 159
8.6.2 executeSql执行查询 ...................................................................... 161
本章小结 ............................................................................................ 164
 
Chapter09  美化网页——CSS样式
9.1 CSS概述 ............................................................................................ 166
9.1.1 CSS基本语法 ................................................................................ 166
9.1.2 CSS特点 ...................................................................................... 167
9.1.3 使用CSS ...................................................................................... 167
9.2 CSS选择器 ........................................................................................ 169
9.2.1 元素选择器 ................................................................................... 169
9.2.2 类选择器 ...................................................................................... 170
9.2.3 id选择器 ....................................................................................... 172
9.2.4 集体选择器 ................................................................................... 173
9.2.5 属性选择器 ................................................................................... 174
9.2.6 伪类 ............................................................................................. 176
9.2.7 伪元素 .......................................................................................... 178
9.3 CSS定位 ............................................................................................ 180
9.3.1 浮动定位 ...................................................................................... 180
9.3.2 相对定位 ...................................................................................... 183
9.3.3 定位 ...................................................................................... 184
9.4 盒子模型 ............................................................................................. 186
9.4.1 盒子简介 ...................................................................................... 186
9.4.2 设置外边距 ................................................................................... 186
9.4.3 设置内边距 ................................................................................... 190
9.5 字体样式 ............................................................................................. 191
9.5.1 font-family字体 ............................................................................ 191
9.5.2 font-size字号 ............................................................................... 192
9.5.3 font-style字体风格 ........................................................................ 193
9.5.4 font-weight加粗字体 ..................................................................... 195
9.6 段落样式 ............................................................................................. 196
9.6.1 letter-spacing字符间隔 ................................................................. 196
9.6.2 word-spacing单词间隔 .................................................................. 197
9.6.3 text-indent段落缩进 ...................................................................... 198
9.6.4 line-height文本行间距 ................................................................... 200
9.6.5 text-align横向对齐 ........................................................................ 201
9.6.6 vertical-align纵向对齐 .................................................................. 202
9.7 边框样式 ............................................................................................ 204
9.7.1 border-style边框线型 .................................................................. 204
9.7.2 border-color边框颜色 .................................................................. 205
9.7.3 border-width边框宽度 .................................................................. 206
9.7.4 border边框练习 ............................................................................ 206
9.8 轮廓样式 ............................................................................................ 208
9.8.1 outline-style边框线型 ................................................................... 208
9.8.2 outline-color边框颜色 .................................................................. 209
9.8.3 outline-width边框宽度 ................................................................... 210
9.8.4 outline与border的异同点 ................................................................ 212
9.9 列表标记样式 ..................................................................................... 213
9.9.1 list-style-type列表标记样式 ........................................................... 213
9.9.2 list-style-image列表标记图像 ........................................................ 216
9.9.3 list-style-position列表标记的位置 ................................................... 218
9.9.4 list-style列表简写格式 ................................................................... 219
本章小结 ............................................................................................ 220
 
Chapter10  超级网页——CSS3样式表的应用
10.1 CSS3概述 ...................................................................................... 222
10.1.1 CSS3与CSS的异同 ................................................................... 222
10.1.2 CSS3浏览器的支持情况 ............................................................. 222
10.2 CSS3的新增功能 ........................................................................... 223
10.2.1 CSS3新增的rem ....................................................................... 223
10.2.2 新增结构性伪类 ......................................................................... 224
10.2.3 新增UI元素状态伪类 ................................................................... 229
10.2.4 新增属性和其他 .......................................................................... 231
10.3 CSS3文本样式 .............................................................................. 234
10.3.1 text-shadow文本阴影 ............................................................... 234
10.3.2 text-overflow文本溢出 .............................................................. 236
10.3.3 word-wrap文本换行 ................................................................. 237
10.3.4 word-break单词拆分 ................................................................ 239
10.4 CSS3边框样式 .............................................................................. 240
10.4.1 border-radius圆角边框 ............................................................. 240
10.4.2 box-shadow盒子阴影 ................................................................ 241
10.5 CSS3背景样式 .............................................................................. 243
10.5.1 background-size背景尺寸 ........................................................ 243
10.5.2 background-origin背景的绘制区域 ............................................. 244
10.6 CSS3渐变 ...................................................................................... 246
10.6.1 线性渐变 .................................................................................. 246
10.6.2 径向渐变 .................................................................................. 249
10.7 CSS3转换 ....................................................................................... 251
10.7.1 2D转换 ..................................................................................... 251
10.7.2 3D转换 .................................................................................... 258
10.8 CSS3动画 ...................................................................................... 264
10.8.1 动画属性 .................................................................................. 264
10.8.2 实现动画 .................................................................................. 266
10.9 CSS3多列布局 ............................................................................... 269
10.10 CSS3过渡 ..................................................................................... 273
10.10.1 单项属性过渡 ......................................................................... 273
10.10.2 多项属性过渡 ......................................................................... 274
本章小结 ............................................................................................ 276
 
Chapter11  知识拓展——XML的应用
11.1 XML入门 ........................................................................................ 278
11.2 XML进阶 ......................................................................................... 281
本章小结 ............................................................................................ 287
 
Chapter12  网页特效——JavaScript必会基础
12.1 JavaScript简介 ............................................................................ 289
12.2 JavaScript的基本元素 ................................................................ 290
12.3 JavaScript事件分析 .................................................................... 300
12.4 表单事件 .......................................................................................... 305
12.5 鼠标事件 .......................................................................................... 307
12.6 键盘事件 ........................................................................................... 310
12.7 窗口事件 ........................................................................................... 311
本章小结 ............................................................................................ 312
 
Chapter13  典型应用——使用JavaScript制作特效
13.1 JavaScript事件分析 ..................................................................... 314
13.2 窗口特效 .......................................................................................... 322
13.3 时间特效 .......................................................................................... 323
本章小结 ............................................................................................ 326
 
Chapter14  综合实例——商业类网页的制作
14.1 商业网站功能分析 ........................................................................... 328
14.2 头部和banner的制作 .................................................................... 329
14.3 页面主体的制作 ............................................................................... 332
14.4 页面尾部的制作 ............................................................................... 335
14.5 网站首页代码实例 ........................................................................... 336
14.6 二级页面的制作 ............................................................................... 340
本章小结 ............................................................................................ 345
 
Chapter15  综合实例——网店类网页的制作
15.1 网店类网页介绍 ............................................................................... 347
15.2 界面设计分析 .................................................................................. 347
15.3 页面主体的制作 ............................................................................... 354
15.4 对底部内容进行样式定义 ............................................................... 364
15.5 二级页面的制作 ............................................................................... 376
本章小结 ............................................................................................ 380显示全部信息