HTML5程序开发范例宝典PDF电子书下载

第1章 HTML网页布局 1

1.1 页面背景和布局 2

实例001 统一站内网页风格 2

实例002 网页换肤 6

实例003 制作渐变背景 8

实例004 把两个div并排显示在浏览器中 9

实例005 通过DIV+CSS对电子商城的页面进行布局 10

实例006 设置4张图片并排显示在浏览器 12

实例007 应用<div>标签设计用户注册页面 13

实例008 应用div元素构建一个完整的表格 14

实例009 使用column—count属性实现分栏的实例 16

实例010 文字和图片完整居中 18

实例011 应用CSS控制登录页面显示样式 19

1.2 框架的应用 21

实例012 框架集的嵌套 21

实例013 在网页中应用浮动框架 23

实例014 创建空白框架 25

1.3 使用新元素对页面进行布局 27

实例015 使用HTML5的新元素对页面进行分栏设计 27

实例016 应用HTML5新增的元素制作简单用户注册页面 28

第2章 HTML基本元素 31

2.1 HTML基本标记 32

实例017 演示进入和离开网页的过渡效果 32

实例018 背景图片的设置与显示效果 34

实例019 设置未访问的链接文字的颜色 36

实例020 使用http-equiv属性设定页面的自动刷新 37

实例021 在网页中完成对明日科技公司的简介 38

2.2 HTML5新增结构元素 39

实例022 应用section元素对页面上的内容进行分块 39

实例023 以博客为例了解article元素的使用 40

实例024 一个关于article元素嵌套的实例 41

实例025 通过article元素表示插件的实例 42

实例026 联合使用section和article标签 43

实例027 在网页中显示联系信息 44

实例028 一个nav元素的使用实例 44

实例029 一个在文章内部的aside元素实例 46

2.3 网页文本内容 47

实例030 观察标题<h1>到<h6>的变化 47

实例031 用align属性设置标题文字的对齐方式 48

实例032 设置不同的文字字体 49

实例033 显示文字的粗体、斜体、下划线的效果 50

实例034 使用标记<p>表示段落格式 50

实例035 使用标记<br>实现文字的换行显示 51

实例036 应用标记<center>使段落居中显示 52

实例037 对页面中的文本定义默认的字体样式 53

实例038 应用<address>标记定义一个网站的地址 54

实例039 通过格式标签定义文本样式 54

实例040 制作彩色滚动条 55

实例041 在文字上方标注说明 57

实例042 应用删除线样式标记商品原价 58

第3章 HTML高级元素 61

3.1 新增和改良的页面元素 62

实例043 使用details标记元素实现交互 62

实例044 应用output元素拖动滑竿改变数值 63

实例045 实现下拉弹出效果 64

实例046 无刷新弹出图片和文字 65

实例047 使用summary标记元素实现交互 67

实例048 使用menu标记元素实现菜单交互 68

实例049 实现右键菜单功能 69

实例050 使用command标记元素实现动态对话框效果 71

实例051 使用progress标记元素实现进度条效果 73

实例052 使用meter标记元素实现百分比效果 74

实例053 设置progress进度条的样式 75

实例054 使用html根元素显示文字 76

实例055 通过标签设置目标链接 77

实例056 通过JavaScript脚本获取并显示文本框的内容 79

实例057 实现树节点效果 80

实例058 使用mark元素高亮显示搜索关键词 81

实例059 在网页中突出显示某些文字 82

实例060 使用cite元素引用文档 83

实例061 在网页中显示一幅图片 84

实例062 在网页中显示一个文本框架 85

实例063 使用object元素在网页中显示一个Flash 86

3.2 新增的全局属性 87

实例064 使用鼠标光标拖动网页中的文字 87

实例065 自动隐藏或显示网页中的文字 88

实例066 自动检测输入的拼音是否正确 89

实例067 编辑修改网页中的文字 90

第4章 表单的使用 93

4.1 表单和表单元素 94

实例068 使用文本框做一个人口调查的页面 94

实例069 使用密码域创建一个简单的注册页面 95

实例070 使用单选按钮做一个用户信息表 96

实例071 使用复选框选择你所喜欢的运动 97

实例072 使用文件域来上传图片 98

实例073 使用文本域创建一个留言板页面 100

实例074 创建一个用来做学生业余生活调查的页面 101

实例075 让密码域更安全 102

实例076 制作个人信息页面 103

4.2 增加与改良的input元素 105

实例077 验证邮件地址是否合法 105

实例078 验证URL地址 107

实例079 验证在文本框中输入数字的大小 109

实例080 通过滑动条设置颜色 110

实例081 自动弹出日期和时间输入框 112

实例082 显示文本框中的搜索关键字 114

实例083 使元素自动获取焦点 116

实例084 验证表单中输入的数据是否合法 117

实例085 在文本框中显示提示信息 119

实例086 验证文本框中的内容是否为空 120

实例087 开启表单的自动完成功能 121

实例088 重写表单中的某些属性 122

实例089 验证表单中的数据是否为网址格式 123

实例090 自动设置表单中传递的数字 125

实例091 在表单中选择多个上传文件 126

实例092 实现播放器样式的按钮 128

实例093 一个简单的乘法计算器 130

实例094 在网页中生成一个密钥 131

实例095 验证输入的密码是否合法 132

实例096 验证两次输入的密码是否一致 134

实例097 取消表单验证 135

实例098 实现一个精美的登录表单界面 136

4.3 JavaScript操作表单 138

实例099 通过正则表达验证日期 138

实例100 通过正则表达式验证电话号码 140

实例101 验证输入的字符串是否为汉字 142

实例102 验证身份证号码 143

实例103 验证车牌号码 145

实例104 验证数量和金额 146

实例105 验证字符串是否以指定字符开头 148

实例106 在网页中实现自动增加表格效果 149

实例107 开发一个计数器程序 151

实例108 判断用户是否选择了文本框中的指定文本 152

实例109 实现一个动态菜单样式 153

实例110 动态添加表单中的元素 155

实例111 获取文本框并修改其内容 157

实例112 textarea根据内容自动增高 158

实例113 判断用户选择了几个复选框 159

实例114 实现搜索文本框的效果 160

实例115 通过下拉菜单动态改变文本框背景颜色 162

实例116 自动计算金额 163

实例117 设置文本框的只读属性 165

实例118 限制多行文本域输入的字符个数 167

实例119 自动选择文本框／编辑框中的文字 169

实例120 按下回车键时自动切换焦点 170

实例121 获取下拉列表／菜单的值 172

实例122 遍历多选择下拉列表 174

实例123 在下拉列表中进行多选移除 176

实例124 将数组中的数据添加到下拉菜单中 177

实例125 应用下拉菜单选择所要联机的网站 179

实例126 多级级联菜单 181

实例127 可以输入文字的下拉菜单 182

实例128 根据下拉菜单的值显示不同控件 184

实例129 选中单选按钮后显示其他表单元素 185

实例130 通过单选按钮控制其他表单元素是否可用 187

实例131 不提交表单获取复选框的值 188

实例132 控制复选框的全选或反选 189

实例133 只有一个复选框时控制复选框的全选或反选 191

实例134 通过JavaScript控制表单的提交与重置 192

实例135 防止表单重复提交 193

实例136 通过for循环获取表单元素的中文名称 195

实例137 可以提交到不同处理页的表单 196

第5章 列表的使用 199

5.1 有序列表 200

实例138 使用ol来设置有序列表 200

实例139 使用type类型来设置有序列表 201

实例140 使用start来设置有序列表的起始数值 202

5.2 无序列表 204

实例141 使用<ul>标签来显示无序列表 204

实例142 使用type类型来设置无序列表 205

5.3 菜单列表和定义列表 206

实例143 使用<menu>标记来设置菜单列表 206

实例144 使用<dl>标记来创建定义列表 207

5.4 列表的应用 209

实例145 实现有序列表和无序列表的嵌套 209

实例146 通过ol元素创建一个图书销量排名列表 210

实例147 指定图标的列表项 212

第6章 超链接 213

6.1 超链接的建立 214

实例148 创建文本超链接 214

实例149 使用target属性来设置超链接的目标窗口 215

6.2 内部链接与外部链接 217

实例150 说明在一个网站中内部链接的实现方式 217

实例151 通过HTTP协议进行外部链接 219

6.3 书签链接 220

实例152 创建书签 220

实例153 链接到同一页面的书签 221

实例154 链接到不同页面的书签 223

6.4 链接的其他应用 224

实例155 设置图片的超链接 224

实例156 改变超级链接背景色 225

实例157 获取页面中的全部超级链接 226

实例158 将网站设为首页 228

实例159 单击超级链接将本页加入收藏夹 229

实例160 访问指定的链接地址 230

6.5 超级链接特效 232

实例161 快速闪动页面中的超级链接 232

实例162 滚动的超级链接提示信息 233

实例163 公告栏中显示超级链接 234

实例164 显示超级链接站点相关信息 236

实例165 显示超级链接的提示信息 237

实例166 半透明背景的超级链接提示 238

第7章 表格应用 241

7.1 表格基本属性 242

实例167 使用bordercolor属性设置表格边框的颜色 242

实例168 使用bgcolor设置表格背景颜色 243

7.2 表格行属性 244

实例169 使用height设置表格的行高度 244

实例170 使用align设置行文字的水平对齐方式 245

7.3 单元格属性 246

实例171 使用width、height设置单元格的大小 246

实例172 为单元格设置不同的背景颜色 248

实例173 使用bordercolor属性设置单元格的边框颜色 249

实例174 使用background设置单元格的背景图像 250

7.4 表格嵌套与控制表格内外边框显示 252

实例175 利用表格的嵌套完成页面的布局 252

实例176 使用frame属性控制表格外边框的显示 253

实例177 通过rules控制表格内部边框的样式 255

7.5 表格与CSS应用 256

实例178 只有外边框的表格 256

实例179 彩色外边框的表格 257

实例180 控制表格指定外边框不显示 259

实例181 背景颜色渐变的表格 261

实例182 表格隔行变色 262

7.6 表格的动态效果 263

实例183 闪烁的表格边框 263

实例184 单元格边框变色 265

实例185 选中的行变色 266

实例186 选定表格中的单元格 267

实例187 左右移动单元格的信息 269

实例188 通过键盘使单元格焦点任意移动 271

实例189 动态制作表格 275

实例190 动态生成行或列 277

实例191 删除表中的行 279

实例192 隐藏及显示单元格 280

实例193 表格向下展开 282

实例194 合并单元格 284

实例195 在表格中添加行及单元袼 285

实例196 删除表中的单元格 287

实例197 透明表格 289

买例198 限制表格的宽度 290

实例199 表格的标题 291

实例200 表格的外阴影 292

7.7 表格综合应用 293

实例201 简单计算器 293

实例202 复杂计算器 297

实例203 精美日历 302

实例204 带农历的日历 308

第8章 图形图像处理 317

8.1 canvas基础 318

实例205 在画布上绘制一条对角线 318

实例206 在canvas画布中绘制一个矩形 319

8.2 使用路径 321

实例207 绘制一个红色的圆形 321

实例208 绘制一个火柴人 322

实例209 绘制一个红色实心的红心 324

实例210 绘制一个用于解释说明的对话框 325

8.3 应用图像和绘制文字 327

实例211 将同一图像文件绘制在画布的不同位置上 327

实例212 图像平铺 328

实例213 用canvasAPI将图像进行反相操作 329

实例214 绘制文字 331

8.4 运用样式与颜色 332

实例215 绘制不同颜色的方格阵列 332

实例216 绘制3条不同lineJoin值的折线 334

8.5 实现图形的变形 335

实例217 利用坐标变换的方法绘制变形的图形 335

实例218 绘制一个移动、缩放和旋转绘制的图形 337

实例219 绘制彩虹效果 339

8.6 线性渐变和阴影效果 341

实例220 实现由上到下，由黑色到白色的线性渐变 341

实例221 绘制带阴影效果的文字 342

8.7 图像及其属性 344

实例222 使用<img>标记创建图像 344

实例223 使用height属性设置图像的高度 345

实例224 使用width属性设置图像的宽度 346

实例225 使用border属性设置图像的边框 347

实例226 使用align属性设置图像相对于文字的对齐方式 348

买例227 使用title属性为图像添加提示文字 349

8.8 图像的应用 350

实例228 设置图像的超链接 350

实例229 使图片和文字显示出3种不同的对齐方式 352

第9章 文字及图片特效 355

9.1 文字滤镜特效 356

实例230 文字的发光效果 356

实例231 文字的阴影效果 357

实例232 文字的渐变阴影效果 358

实例233 文字的图案填充效果 359

实例234 文字的探照灯效果 360

实例235 文字的闪烁效果 362

实例236 文字的空心效果 363

实例237 文字的浮雕效果 364

实例238 文字的阳文效果 365

实例239 文字的雪雕效果 366

实例240 火焰字 367

实例241 文字扭曲动画 368

9.2 文字动画效果 369

实例242 反弹文字 369

实例243 飞舞的文字 371

实例244 飞翔的文字 374

实例245 平面旋转的文字 376

实例246 输出文字 377

实例247 文字打字效果 378

实例248 文字抖动 380

实例249 指向文字时飞出星形标记 381

实例250 文字的抛出效果 382

9.3 图片滤镜特效 384

实例251 图片的半透明效果 384

实例252 图片的模糊效果 385

实例253 图片的水波纹特效 386

实例254 图片的灰度效果 387

实例255 图片的动态说明文字 388

9.4 图片动画效果 390

实例256 图片翻转效果 390

实例257 水波倒影特效 391

实例258 图片渐隐渐现 392

实例259 图片的探照灯效果 393

实例260 雷达扫描图片特效 395

实例261 在页面中旋转的图片 396

实例262 改变形状的图片 397

实例263 图片在页面浮动 398

实例264 随机变化的网页背景 400

9.5 页面特效 401

实例265 下雪 401

实例266 飘落的枫叶 402

实例267 下雨 404

实例268 背景的烟花效果 406

实例269 变色的圆圈 408

实例270 滚动的光环 410

实例271 星空极速飞入效果 411

实例272 闪烁的星星 413

实例273 背景固定居中 414

实例274 背景图片纵向重复显示 416

实例275 通过按钮变换背景颜色 417

实例276 背景自动变色 418

实例277 百叶窗 419

实例278 渐隐渐显的背景颜色 420

实例279 页面缩小 421

实例280 页面上下打开效果 422

实例281 页面左右打开效果 423

实例282 页面溶解效果 425

实例283 页首页尾切换 426

实例284 调用下载页面 428

实例285 程序加载页面 430

实例286 颜色拾取器 432

实例287 图片总置于顶端 435

实例288 随机显示广告 436

实例289 广告随滚动条漂移 438

第10章 多媒体应用 441

10.1 鼠标样式 442

实例290 显示自定义鼠标形状 442

实例291 动画光标 444

10.2 <bgsound>标签 445

实例292 在页面中设置背景音乐 445

实例293 在网页中加入可控的背景音乐 446

10.3 <embed>标签 447

实例294 在页面中嵌入多媒体文件 447

实例295 在页面中设置视频文件自动运行 448

实例296 在页面中设置多媒体文件的循环播放 450

实例297 在页面中设置隐藏播放面板 451

实例298 应用<embed>标记向页面中嵌入mp3音乐 452

实例299 应用<embed>标记向页面中嵌入flash动画 452

实例300 自制视频播放器 453

10.4 多媒体元素 455

实例301 使用多媒体元素播放文件 455

实例302 设置video元素的大小 456

实例303 设置video元素的控制条工具属性 457

实例304 设置video元素的poster属性 458

实例305 获取video元素的error属性的返回值 459

实例306 控制视频文件的播放与暂停 460

实例307 自定义video元素控制条工具栏 462

实例308 检测浏览器是否支持媒体类型并显示结果 463

实例309 显示加载视频的状态 465

10.5 object元素 468

实例310 插入Flash动画 468

实例311 插入背景透明的Flash动画 470

实例312 嵌入Flash播放器 471

第11章 文件与拖放 473

11.1 选择上传文件 474

实例313 选择一个上传文件 474

实例314 选择多个上传文件 475

11.2 FileList对象与file对象 476

实例315 显示上传文件的名称 476

实例316 获取文件的类型和大小 477

实例317 通过类型过滤文件 478

实例318 通过accept属性过滤上传文件的类型 480

11.3 使用FileReader对象读取文件 481

实例319 使用readAsDataURL方法预览图片 481

实例320 使用readAsText方法读取文本文件 482

实例321 展示文件读取时触发事件的先后顺序 484

11.4 拖放API 485

实例322 拖放文字 485

实例323 设置拖放图标 487

实例324 使用JavaScript实现元素拖放 489

实例325 将div元素拖动到指定容器 491

实例326 将图书商品拖入购物车 493

第12章 Web API与通信API 497

12.1 Web Storage 498

实例327 使用sessionStorage对象保存与读取临时数据 498

实例328 使用localStorage对象保存与读取登录用户名 500

实例329 两种不同存储类型的实例——计数器 502

实例330 简单Web留言本 504

实例331 将用户的信息使用JSON格式进行保存 505

12.2 跨文档消息通信 508

实例332 跨文档传输数据 508

实例333 实现跨域通信 510

12.3 Web SQL数据库 512

实例334 使用openDatabase创建数据库 512

实例335 使用transaction方法创建数据表 513

实例336 用户登录 515

第13章 Web Workers处理线程 519

13.1 Web Workers处理线程 520

实例337 处理线程 520

13.2 Web Workers的主要功能 523

实例338 实现线程的单层嵌套 523

实例339 多个子线程实现数据交互 525

实例340使用线程传送JSON对象 527

实例341使用线程嵌套交互数据 529

13.3 综合应用 532

实例342 使用Web Workers API执行大计算量任务 532

实例343 在后台运行耗时较长的运算 537

实例344 通过JSON发送消息 540

实例345 计算加法运算和乘法运算 542

第14章 离线应用和地理位置定位 547

14.1 HTML5离线应用 548

实例346 开发一个简单的离线应用 548

实例347 监测updateready事件触发 550

实例348 使用update方法更新本地缓存 552

实例349 一个完整的使用swapCache方法的实例 553

实例350 检测离线应用在加载过程触发的事件 555

实例351 通过onLine属性检测网络的当前状态 557

实例352 离线留言数据交互 559

14.2 获取地理位置信息 561

实例353 获取当前的地理位置信息 561

实例354 在页面中显示当前的位置信息 563

实例355 在页面上使用google地图 565

实例356 利用HTML5和百度地图实现定位处理 567

第15章 RGraph插件制作统计图 569

15.1 绘制柱状图 570

实例357 使用RGraph插件制作柱状图 570

实例358 改变选中的柱状图的颜色 571

实例359 绘制分组柱状图 573

实例360 在柱状图的同一根柱子中使用两种颜色 575

15.2 绘制折线图 577

实例361 使用RGraph插件制作折线图 577

实例362 显示提示信息的折线图 579

实例363 在一个折线图中绘制两根折线 581

实例364 使用RGraph插件制作范围折线图 582

实例365 在折线图中使用两根不同单位的垂直坐标轴 584

实例366 同时绘制柱状图与折线图 586

15.3 绘制饼图 588

实例367 使用RGraph插件绘制饼图 588

实例368 饼块被单击时呈现白色半透明效果 590

实例369 在工具条提示信息中显示饼图 592

15.4 绘制横向柱状图与雷达图 595

实例370 绘制横向柱状图 595

实例371 绘制分组横向柱状图 596

实例372 绘制雷达图 598

15.5 放大统计图 600

实例373 放大网页中的统计图 600

实例374 使用放大镜效果放大网页中的统计图 602

第16章 HTML游戏开发 605

16.1 休闲类游戏 606

实例375 Flappy-bird网页版 606

实例376 网页版贪吃蛇游戏 609

16.2 益智类游戏 613

实例377 网页版迷宫游戏 613

实例378 网页版数独游戏 618

实例379 网页版俄罗斯方块游戏 622

实例380 拼图游戏 636

16.3 其他 641

实例381 网页版水果老虎机游戏 641

实例382 抽奖游戏 660

实例383 挖箱子游戏 665