HTML 5入门经典PDF电子书下载

第一篇 基础知识篇 2

第1章HTM L5开发前奏 2

1.1为什么选择HTML5语言 2

1.2 HTML发展历程 3

1.3谁在开发HTML5 3

1.4 HTML5的新认识 4

1.4.2实用性和用户优先 4

1.4.3化繁为简 4

1.5无插件范式 5

1.6探秘——HTML5新特性 5

1.7 HTML的标记构成 6

1.7.1 HTML标记的使用技巧 6

1.7.2开始标记〈html〉 7

1.7.3头部标记〈head〉 8

1.7.4标题标记〈title〉 8

1.7.5主体标记〈body〉 8

1.7.6编写文件时的注意事项 8

1.8编写第一个HTML文件 9

1.8.1 HTML文件的编写方法 9

1.8.2手工编写页面 9

1.8.3使用可视化软件制作页面 11

1.8.4使用浏览器浏览HTML文件 15

1.8.5明日图书网使用HTML开发 15

第2章HTML5带来的标记变化 18

2.1重中之重——头部标记 18

2.2名称所在——标题〈title〉 19

2.3隐藏很深——元信息标记<meta〉 19

2.3.1页面关键字 20

2.3.2页面描述 20

2.3.3编辑工具 21

2.3.4作者信息设置 21

2.3.5限制搜索方式 22

2.3.6网页文字及语言 22

2.3.7定时跳转页面 22

2.3.8有效期的设置 24

2.3.9禁止从缓存中调用 24

2.3.10删除过期的cookie 24

2.3.11强制打开新窗口 25

2.3.12网页的过渡效果设置 25

2.4基底网址标记〈base〉 28

2.5容量瓶——页面的主体标记〈body〉 30

2.5.1彩色字体——text 30

2.5.2背景颜色属性——bgcolor 31

2.5.3背景图像属性——background 32

2.5.4链接文字属性——link 34

2.5.5边距——margin 36

2.6程序员的备忘录——注释<！- -〉 37

2.7.1创建基本的HTML网页 37

2.7.2设定自动刷新 39

第3章 HTML5网页的基本要素 41

3.1从小到大——标题文字 41

3.1.1标题字标记〈H〉 41

3.1.2标题文字的对齐方式——align 42

3.2变化万千——文字格式 43

3.2.1文字字体——face 43

3.2.2字号——size 44

3.2.3文字颜色——color 45

3.2.4粗体、斜体、下划线——strong、 em、 u 46

3.2.5上标与下标——sup、 sub 47

3.2.6删除线——strike 47

3.2.7等宽文字标记——code 48

3.2.8空格——&nbsp； 49

3.2.9其他特殊符号 50

3.3享有独立——段落格式 51

3.3.1实现段落——P 51

3.3.2取消文字换行标记——nobr 51

3.3.3换行标记——br 52

3.3.4保留原始排版方式标记——pre 53

3.3.5使文字水平居中——center 54

3.3.6文字段落的缩进——blockquote 55

3.4从头到尾——水平线标记 55

3.4.1添加水平线——hr 56

3.4.2水平线宽度与高度属性——width、 height 56

3.4.3水平线的颜色——color 57

3.4.4水平线的对齐方式——nlign 59

3.4.5去掉水平线阴影——noshade 59

3.5其他文字标记 60

3.5.1文字标注标记——uby 60

3.5.2声明变量标记——var 61

3.5.3忽视HTML标签标记——plaintext、 xmp 62

3.6.1设置地址文字标记〈address〉 63

3.6.2基字标记〈basefont〉 64

3.6.3在文字上方标注说明标记〈rt〉 64

第4章 让珍珠串起来——列表 66

4.1有条不紊——列表标记 66

4.2欠缺规范——无序列表 67

4.2.1无序列表标记——ul 67

4.2.2无序列表的类型——type 68

4.3井井有条——有序列表 70

4.3.1有序列表标记——ol 70

4.3.2有序列表的类型——type 71

4.3.3有序列表的起始数值——start 72

4.4定义列表标记——dl 74

4.5菜单列表标记——menu 75

4.6目录列表——dir 76

4.7一层又一层——嵌套列表 77

4.7.1定义列表的嵌套 77

4.7.2无序列表和有序列表的嵌套 78

4.8.1列表之间的嵌套 80

4.8.2定义列表的使用 81

4.8.3 ol列表的使用 82

第5章 在迷宫中寻找出口——超链接 84

5.1超链接 84

5.2关于路径 84

5.2.1绝对路径 84

5.2.2相对路径 85

5.2.3根路径 85

5.3从哪里开始，到哪里结束——超链接 85

5.3.1如何使用超链接标记 85

5.3.2链接到另一个网页 85

5.3.3超链接的目标窗口 87

5.4深层挖掘——内部链接 89

5.5查找方便——书签链接 91

5.5.1建立书签 91

5.5.2链接到同一页面的书签 93

5.5.3链接到不同页面的书签 94

5.6范围广泛——外部链接 95

5.6.1通过HTTP 95

5.6.2通过FTP 97

5.6.3发送Email 97

5.6.4下载文件 98

5.7.1脚本链接 100

5.7.2空链接 101

5.8.1显示超链接的提示信息 102

5.8.2设置图片的超链接 103

第6章 如何显示图像 105

6.1必须知道的图像格式 105

6.2美丽图像—img 106

6.3了解内在——图像属性 107

6.3.1图像高度——height 107

6.3.2图像宽度——width 108

6.3.3图像边框——border 109

6.3.4图像水平间距——hspace 110

6.3.5图像垂直间距——vspace 111

6.3.6图像相对于文字基准线的对齐方式——align 111

6.3.7图像的提示文字——alt 113

6.4跳转——图像的超链接 114

6.4.1图像的超链接 114

6.4.2图像热区链接 115

6.5.1图像中的提示文字属性 116

6.5.2水平对齐、垂直对齐和文本围绕 117

第7章 让程序听话——表格的应用 119

7.1有序显示数据的基础——表格 119

7.1.1表格的基本构成——table、 tr、 td 119

7.1.2表格的标题——caption 120

7.1.3表格的表头——th 121

7.2里面的珍品——表格属性 123

7.2.1表格宽度——width 123

7.2.2表格高度——height 124

7.2.3表格对齐方式——align 126

7.3围绕一圈——表格边框 127

7.3.1表格边框宽度——border 127

7.3.2表格边框颜色——bordercolor 128

7.3.3内框宽度——cellspacing 129

7.3.4表格内文字与边框间距——cellpadding 130

7.4五彩世界——表格背景 131

7.4.1表格背景颜色——bgcolor 131

7.4.2表格的背景图像——background 132

7.5有效位置——表格行属性 134

7.5.1行高度的设置——height 134

7.5.2行的边框颜色——bordercolor 135

7.5.3行的背景颜色——bgcolor 136

7.5.4行文字的水平对齐方式——align 137

7.5.5行文字的垂直对齐方式——align 138

7.5.6表格标题的垂直对齐方式——align 139

7.6深入了解——单元格属性 140

7.6.1单元格大小——width、 height 140

7.6.2水平跨度——colspan 141

7.6.3垂直跨度——rowspan 142

7.6.4对齐方式——align、 valign 143

7.6.5单元格的背景色——bgcolor 144

7.6.6单元格的边框颜色——bordercolor 146

7.6.7单元格的亮边框——bordercolorlight 147

7.6.8单元格的暗边框——bordercolordark 148

7.6.9单元格的背景图像——background 150

7.7完整的表格结构 151

7.7.1表格的表首标记——thead 151

7.7.2表格的表主体标记——tbody 153

7.7.3表格的表尾标记——tfoot 154

7.8一层又一层——表格嵌套 156

7.9.1表格的内部边框样式属性rules 158

7.9.2表格的边框样式属性frame 159

第二篇 核心技术篇 162

第8章 更上一层楼——div标记 162

8.1折叠在一起——层 162

8.1.1层的分类 162

8.1.2定义数据块 163

8.2独占一行——〈div〉标记 163

8.2.1 〈div〉标记 164

8.2.2 〈div〉标记的属性 164

8.2.3 〈span〉标记与〈div〉标记 171

8.3 〈iframe〉标记 172

8.3.1 〈iframe〉标记 172

8.3.2 〈iframe〉标记的属性 173

8.4 〈layer〉标记和〈ilayer〉标记 175

8.4.1层标记的使用 175

8.4.2 〈layer〉标记和〈ilayer〉标记的区别 176

8.5应用〈div〉标记制作下拉菜单导航条 176

第9章 获取数据——表单页面 182

9.1什么是表单 182

9.2处理页面——表单标记 183

9.2.1处理程序——action 183

9.2.2表单名称——name 184

9.2.3传送方法——method 184

9.2.4编码方式——enctype 185

9.2.5目标显示方式——target 185

9.4特定属性——输入标记 187

9.4.1文字字段——text 187

9.4.2密码域——password 188

9.4.3单选按钮——radio 189

9.4.4复选框——checkbox 190

9.4.5普通按钮——button 191

9.4.6提交按钮——submit 192

9.4.7重置按钮——reset 193

9.4.8图像域——image 194

9.4.9隐藏域——hidden 195

9.4.10文件域——file 196

9.5菜单列表类标记 197

9.6文本域标记〈textarea〉 199

9.7 〈id〉标记 200

9.8上机实践 201

9.8.1使用enctype属性设置文件上传 201

9.8.2使用特定属性来提交表单 202

第10章 新颖奇特——多媒体页面 205

10.1走来走去——文字的滚动 205

10.1.1文字滚动——marquee 205

10.1.2方向滚动——direction 206

10.1.3方式滚动——behavior 207

10.1.4速度滚动——scrollamount 207

10.1.5延迟滚动——scrolldelay 208

10.1.6循环滚动——loop 209

10.1.7范围滚动——width、 height 210

10.1.8背景颜色滚动——bgcolor 210

10.1.9空间滚动——hspace、 vspace 211

10.2有声有色——背景音乐 212

10.2.1背景音乐——bgsound 212

10.2.2循环播放次数——loop 214

10.3影像观看——多媒体文件 214

10.3.1多媒体文件标记——embed 214

10.3.2自动运行——autostart 215

10.3.3媒体文件的循环播放——loop 216

10.3.4隐藏面板——hidden 217

10.4上机实践 218

10.4.1嵌入flash动画 218

10.4.2嵌入Mp3音乐 219

第11章 多姿多彩——绘制图形 221

11.1 canvas的基础知识 221

11.1.1 canvas是什么 221

11.1.2在页面中放置canvas元素 221

11.1.3绘制带边框矩形 223

11.2在画布中使用路径 225

11.2.1使用arc方法绘制圆形 225

11.2.2使用moveTo与lineTo路径绘制火柴人 226

11.2.3绘制贝济埃曲线 228

11.3运用样式与颜色 230

11.3.1 fillStyle和strokeStyle属性 230

11.3.2透明度globalAlpha 232

11.3.3线型的属性 233

11.4绘制渐变图形 236

11.4.1绘制线性渐变 236

11.4.2绘制径向渐变 237

11.5绘制变形图形 238

11.5.1坐标的变换 238

11.5.2矩阵变换 240

11.6组合多个图形 243

11.7给图形绘制阴影 244

11.8应用图像 245

11.8.1绘制图像 245

11.8.2图像的局部放大 247

11.8.3图像平铺 248

11.8.4图像裁剪 250

11.8.5像素的处理 251

11.9绘制文字 253

11.10保存与恢复状态 254

11.11文件的保存 254

11.12对画布绘制实现动画 255

11.13上机实践 256

11.13.1桌面时钟 256

11.13.2移动、缩放、旋转绘制的图形 258

11.13.3使用drawImage方法在画布中绘制图像 259

第12章 与众不同——HTML5与HTML4 261

12.1语法的改变 261

12.1.1 HTML5的语法变化 261

12.1.2 HTML5中的标记方法 262

12.1.3 HTML5与之前HTML版本的不一致性 262

12.1.4标记示例 263

12.2新增的元素和废除的元素 264

12.2.1新增的结构元素 264

12.2.2新增的块级（block）的语义元素 265

12.2.3新增的行内（inline）的语义元素 265

12.2.4新增的嵌入多媒体元素与交互性元素 266

12.2.5新增的input元素的类型 267

12.2.6废除的元素 268

12.3新增的属性和废除的属性 268

12.3.1新增的属性 268

12.3.2废除的属性 270

12.4全局属性 271

12.4.1 contentEditable属性 272

12.4.2 designMode属性 273

12.4.3 hidden属性 273

12.4.4 spellcheck属性 273

12.4.5 tabindex属性 274

12.5上机实践 274

12.5.1 article元素嵌套 274

12.5.2 section元素 275

12.5.3 spellcheck属性的使用 276

第13章 一剑封喉的武器——文件与拖放 278

13.1选择文件 278

13.1.1通过file对象选择文件 278

13.1.2使用Blob接口获取文件的类型与大小 279

13.1.3通过类型过滤选择的文件 280

13.2使用FileReader接口读取文件 282

13.2.1检测浏览器对FileReader接口 282

13.2.2 FileReader接口的方法 282

13.2.3使用readAsDataURL方法预览图片 282

13.2.4使用readAsText方法读取文本文件 284

13.2.5 FileReader接口中的事件 285

13.3拖放API 287

13.3.1实现拖放的步骤 287

13.3.2通过拖放显示欢迎信息 287

13.4 dataTransfer对象应用详解 289

13.4.1使用effectAllowed和dropEffect属性设置拖放效果 290

13.4.2使用setDragImage方法设置拖放图标 290

13.5上机实践 291

13.5.1使用JavaScript实现元素拖放 291

13.5.2使用拖放API将商品拖入购物车 292

13.5.3元素在拖放过程中触发的事件 293

第14章 另一个世界——多媒体播放 296

14.1 HTML5多媒体的简述 296

14.1.1 HTML4中多媒体的应用 296

14.1.2 HTML5页面中的多媒体 297

14.2多媒体元素基本属性 298

14.3多媒体元素常用方法 302

14.3.1媒体播放时的方法 302

14.3.2 canPlay7ype方法 303

14.4多媒体元素重要事件 303

14.4.1事件处理方式 303

14.4.2事件介绍 304

14.4.3事件示例 305

14.5上机实践 308

14.5.1自定义video元素控制条工具栏 308

14.5.2 video元素的error属性的返回值 309

14.5.3通过timeupdate事件显示媒体文件播放时间 310

第三篇 高级应用篇 314

第15章 疯狂HTML5——表单 314

15.1新增元素与属性 314

15.1.1新增的属性 314

15.1.2增加与改良的input元素的种类 317

15.1.3 output元素的添加 323

15.1.4应用新增元素制作注册表单 324

15.2对表单的验证 325

15.2.1自动验证 325

15.2.2 checkValidity显式验证法 326

15.2.3避免验证 327

15.2.4使用setCustomValidity方法自定义错误信息 327

15.3增加的页面元素 329

15.3.1新增的figure元素与figcaption元素 329

15.3.2新增的details元素 330

15.3.3新增的mark元素 331

15.3.4新增的progress元素 333

15.3.5新增的meter元素 334

15.3.6改良的ol列表 335

15.3.7改良的dl列表 335

15.3.8加以严格限制的cite元素 336

15.3.9重新定义的small元素 337

15.4上机实践 337

15.4.1 search搜索类型的input元素 337

15.4.2 range类型的input元素 338

第16章 划时代的Web API 340

16.1初识Web Storage 340

16.1.1 Web Storage是什么 340

16.1.2使用Web Storage中的API 341

16.1.3 sessionStorage和localStorage的实例——计数器 342

16.1.4 Web Storage综合实例——留言本 344

16.1.5 JSON对象的存数实例——用户信息卡 346

16.2本地数据库 348

16.2.1 Web SQL数据库简介 348

16.2.2使用Web SQL Database API 349

16.3跨文档消息通信 350

16.3.1使用postMessage API 350

16.3.2跨域通信 351

16.4上机实践 353

第17章 齐头并进——Web Worker处理线程 358

17.1 Web Worker概貌 358

17.1.1创建和使用Worker 358

17.1.2 Web Worker应用实例——求和运算 359

17.2在Worker内部能做什么 361

17.3多个JavaScript文件的加载与执行 361

17.4线程嵌套 362

17.4.1单层嵌套 362

17.4.2在多个子线程之间进行数据的交互 364

17.5上机实践 367

17.5.1使用线程传递JSON对象 367

17.5.2使用线程嵌套交互数据 367

第18章 不劳而获——离线应用程序 370

18.1 HTML5离线Web应用概述 370

18.1.1离线Web应用概述 370

18.1.2本地缓存与浏览器网页缓存的区别 372

18.2创建HTML5离线应用 372

18.2.1缓存清单（manifest） 372

18.2.2配置IIS服务器 373

18.2.3浏览manifest清单 374

18.3浏览器与服务器的交互过程 374

18.4 applicationCache对象 375

18.4.1 swapCache方法 376

18.4.2 applicationCache对象的事件 377

18.5上机实践 380

18.5.1简单离线应用 380

18.5.2离线留言数据交互 381

第19章 获取地理位置信息 383

19.1 Geolocation API的概述 383

19.1.1使用getCurrentPosition获取当前地理位置 383

19.1.2持续监视当前地理位置的信息 385

19.1.3停止获取当前用户的地理位置信息 385

19.2 position对象 385

19.3在页面上使用Google地图 387

19.4上机实践 388

19.4.1获取地理位置定位 388

19.4.2用HTML5开发地理位置定位地图 389

第四篇 项目实战篇 394

第20章 旅游信息网前台页 394

20.1需求分析 394

20.2系统设计 394

20.2.1系统目标 394

20.2.2网站预览 394

20.3系统开发及运行环境 398

20.4关键技术 398

20.4.1网站主体结构设计 398

20.4.2 HTML5结构元素的使用 399

20.5网站公共部分设计 400

20.5.1设计网站公共header 400

20.5.2设计网站公共footer 406

20.6网站主页设计 407

20.6.1显示网站介绍及相关图片 407

20.6.2主页左侧导航的实现 408

20.7“留下足迹”页设计 411

20.7.1播放音乐 411

20.7.2添加留言功能的实现 412