HTML5+CSS3入门经典PDF电子书下载

第一篇HTML 5基础篇 2

第1章 迎接新的Web时代——HTML 5的出现 2

1.1 HTML的历史 2

1.1.1 HTML发展的历史 3

1.1.2 HTML 5时代即将来临 3

1.2 HTML5的优势 3

1.2.1使用HTML5的理由 4

1.2.2 HTML 5的化繁为简 4

1.2.3 HTML 5的无插件范式 4

1.2.4 HTML 5的新特性 5

1.3 HTML 5的语法变化和标记方法 5

1.3.1 HTML 5的语法变化 5

1.3.2 HTML 5的标记方法 6

1.3.3标记实例 6

第2章 去其糟粕，取其精华——HTML5的元素与属性 8

2.1新增的元素和废除的元素 8

2.1.1新增的结构元素 8

2.1.2新增的块级（block）语义的元素 9

2.1.3新增的行内（inline）语义的元素 10

2.1.4新增的嵌入多媒体元素与交互性元素 11

2.1.5新增的input元素的类型 12

2.1.6废除的元素 12

2.2新增的属性和废除的属性 12

2.2.1新增的属性 12

2.2.2废除的属性 15

2.3.1 contentEditable属性 16

2.3.2 designMode属性 17

2.3.3 hidden属性 17

2.3.4 spellcheck属性 17

2.3.5 tabindex属性 18

2.4.1使用hidden属性对用户评论内容进行隐藏 18

2.4.2使用spellcheck属性检查单词的拼写情况 19

2.4.3对页面输出的文字进行编辑 20

第3章 你很重要——HTML 5中的表单 22

3.1新增的元素与属性 22

3.1.1新增的属性 22

3.1.2增加与改良的input元素的种类 25

3.1.3 output元素的添加 29

3.2对表单的验证 30

3.2.1自动验证 30

3.2.2 checkValidity显式验证法 31

3.2.3避免验证 32

3.2.4使用setCustomValidity方法自定义错误信息 33

3.3增加的页面元素 34

3.3.1新增的figure元素 34

3.3.2新增的details元素 35

3.3.3新增的mark元素 36

3.3.4新增的progress元素 38

3.3.5新增的meter元素 39

3.3.6改良的ol列表 40

3.3.7改良的dl列表 40

3.3.8加以严格限制的cite元素 41

3.3.9重新定义的small元素 42

3.4上机实践 42

3.4.1应用新增元素制作注册表单 42

3.4.2调用表单的checkValidity方法验证密码格式 43

3.4.3应用output元素实现的乘法计算器 45

第二篇 HTML 5高级应用篇 48

第4章 不容小视——HTML5中的文件 48

4.1 选择文件 48

4.1.1通过file对象选择文件 48

4.1.2使用Blob接口获取文件的类型与大小 49

4.1.3通过类型过滤选择的文件 50

4.2使用FileReader接口读取文件 51

4.2.1检测浏览器对FileReader接口的实现 52

4.2.2 FileReader接口的使用方法 52

4.2.3使用readAsDataURL方法预览图片 52

4.2.4使用readAsText方法读取文本文件 54

4.2.5 FileReader接口中的事件 55

4.3.1实现拖放的步骤 57

4.3.2通过拖放显示欢迎信息 57

4.4 dataTransfer对象应用详解 59

4.4.1使用effectAllowed和dropEffect属性设置拖放效果 60

4.4.2使用setDragImage方法设置拖放图标 60

4.5.1通过accept属性过滤上传文件的类型 61

4.5.2将图片文件拖放到页面中并显示 62

第5章 梦幻的世界——绘制图形 65

5.1 canvas的基础知识 65

5.1.1 canvas是什么 65

5.1.2在页面中放置canvas元素 65

5.1.3绘制带边框的矩形 67

5.2在画布中使用路径 68

5.2.1使用arc方法绘制圆形 68

5.2.2使用moveTo与lineTo路径绘制火柴人 70

5.2.3贝塞尔和二次方曲线 72

5.3运用样式与颜色 74

5.3.1 fillStyle和strokeStyle属性 74

5.3.2透明度globalAlpha 76

5.4绘制渐变图形 80

5.4.1绘制线性渐变 80

5.4.2绘制径向渐变 81

5.5绘制变形图形 82

5.5.1坐标的变换 82

5.5.2矩阵变换 83

5.6组合多个图形 86

5.7给图形绘制阴影 88

5.8.1绘制图像 89

5.8.2图像的局部放大 91

5.8.3图像平铺 92

5.8.4图像裁剪 93

5.8.5像素的处理 95

5.10保存与恢复状态 98

5.11文件的保存 98

5.12对画布绘制实现动画 99

5.13桌面时钟 100

5.14上机实践 102

5.14.1通过设置lineJoin属性值来绘制不同的矩形 102

5.14.2绘制五角星 103

5.14.3大头贴边框 104

第6章 如此神奇——多媒体播放 107

6.1 HTML 5多媒体简述 107

6.1.1 HTML 4中多媒体的应用 107

6.1.2 HTML 5页面中的多媒体 108

6.2多媒体元素的基本属性 109

6.3多媒体元素的常用方法 113

6.3.1媒体播放时的方法 113

6.3.2 canPlayType（type）方法 114

6.4事件以及事件的发生顺序 114

6.4.1事件处理方式 114

6.4.2事件介绍 115

6.4.3通过事件的控制来显示视频播放的时间 116

6.5.1在HTML 5文档中播放音频 118

6.5.2在HTML 5文档中播放视频 119

第7章 数据管家——HTML 5中的数据存储 122

7.1初识Web Storage 122

7.1.1 Web Storage是什么 122

7.1.2使用Web Storage中的API 123

7.1.3 sessionStorage和localStorage的实例——计数器 124

7.1.4 Web Storage综合实例——留言本 126

7.1.5 JSON对象的存储实例——用户信息卡 128

7.2本地数据库 130

7.2.1 Web SQL数据库简介 130

7.2.2使用Web SQL Database API 131

7.2.3本地数据库实例——用户登录 132

7.3.1应用Web Storage实现带留言人的留言本 135

7.3.2应用本地数据库实现留言本 137

第8章 线下管家——HTML5中的离线应用 141

8.1 HTML 5离线应用 141

8.1.1 HTML 5离线应用概述 141

8.1.2本地缓存与浏览器网页缓存的区别 143

8.2创建HTML5离线应用 143

8.2.1缓存清单（manifest） 143

8.2.2配置IIS服务器 144

8.2.3浏览manifest清单 145

8.3浏览器与服务器的交互过程 145

8.4 applicationCache对象 146

8.4.1 swapCache方法 147

8.4.2 applicationCache对象的事件 148

8.5上机实践 151

8.5.1判断在线状态 151

8.5.2检测本地缓存是否有更新 152

第9章 齐头并进——使用Web Worker处理线程 154

9.1 Web Worker概述 154

9.1.1创建和使用Worker 154

9.1.2 Web Worker应用实例——求和运算 155

9.2在Worker内部能做什么 156

9.3多个JavaScript文件的加载与执行 157

9.4线程的嵌套使用 157

9.4.1最基本的单层嵌套 157

9.4.2在多线程中进行数据的交互 159

9.5.1通过传递JSON对象输出用户信息 160

9.5.2使用多线程随机显示5的整数倍数的数字 161

第10章 未完待续——HTML 5中的其他应用型API 165

10.1跨文档消息通信 165

10.1.1使用postMessage API 165

10.1.2跨文档消息传输 166

10.2 Geolocation API概述 168

10.2.1使用getCurrentPosition获取当前地理位置 168

10.2.2持续监视当前地理位置的信息 170

10.2.3停止获取当前用户的地理位置信息 170

10.3 position对象 170

10.4上机实践 171

10.4.1显示当前地理位置的经纬度 171

10.4.2在Google地图上显示“我在这里” 172

第三篇CSS篇 176

第11章 初露锋芒——CSS 3概述 176

11.1 CSS 3概述 176

11.2 CSS 3模块化结构 177

11.3 CSS 3新特性预览 178

11.4主流浏览器对CSS 3的支持 179

11.5上机实践 180

11.5.1使用CSS 3样式添加图像边框 180

11.5.2应用CSS 3控制登录页面显示样式 181

第12章 如此强大——CSS 3新增的选择器 184

12.1选择器概述 184

12.2属性选择器 185

12.2.1属性选择器是什么 185

12.2.2 CSS 3中的属性选择器 187

12.2.3应用属性选择器实现文档按类型显示 189

12.3 CSS 3新增的结构性伪类选择器 190

12.3.1 CSS中的伪类选择器及伪元素 190

12.3.2结构性伪类选择器 195

12.3.3 UI元素状态伪类选择器 204

12.3.4通用兄弟元素选择器 210

12.4上机实践 211

12.4.1随机改变页面的背景色 211

12.4.2设计赏心悦目的数据表格 212

12.4.3制作生动的列表导航 213

第13章 文字的魅力——字体与文本的相关属性 216

13.1字体的相关属性 216

13.2给文字添加阴影——text-shadow属性 218

13.2.1 text-shadow属性的使用方法 218

13.2.2指定多个阴影 219

13.3文本的相关属性 220

13.3.1文本自动换行：word-break 221

13.3.2长单词和URL地址换行 222

13.4 CSS 3新增的服务器字体 223

13.4.1使用服务器字体 224

13.4.2定义粗体、斜体字 225

13.4.3优先使用客户端字体 226

13.5使用font-size-adjust属性微调字体大小 227

13.5.1字体不同导致文字大小的不同 227

13.5.2 font-size-adjust属性的使用方法 228

13.5.3 font-size-adjust属性的使用 229

13.6上机实践 231

13.6.1使用text-shadow属性设计立体文本 231

13.6.2防止表格标题行换行 232

第14章 细节修饰——背景、边框和边距的相关属性 235

14.1设置背景 235

14.1.1设置背景颜色 235

14.1.2设置背景图片 237

14.1.3 CSS 3新增的与背景相关的属性 241

14.2边框设置 245

14.2.1设置边框的线宽 245

14.2.2设置边框的样式 247

14.2.3设置边框的颜色 248

14.2.4边框综合属性 250

14.2.5 CSS 3新增的与边框相关的属性 251

14.3内外边距的相关属性 254

14.3.1设置内边距 254

14.3.2设置外边距 256

14.4上机实践 257

14.4.1设计企业门户网站首页 257

14.4.2设置最新公告列表的分隔线 258

14.4.3通过CSS样式实现圆角矩形栏目标头 259

第15章 如此魔力——新增的弹性盒模型及分栏 262

15.1盒的类型 262

15.1.1盒的基本类型 262

15.1.2 inline-block盒模型 264

15.1.3 inline-table盒模型 268

15.1.4表格相关的盒模型 269

15.1.5 list-item盒模型 271

15.1.6 run-in盒模型与compact盒模型 272

15.2为盒设置阴影和倒影 273

15.2.1 box-shadow属性的使用方法 273

15.2.2对表格及单元格使用阴影 275

15.2.3为盒设置倒影 276

15.3布局的相关属性 277

15.3.1使用float属性实现多栏布局 278

15.3.2使用clear实现换行 280

15.3.3使用clip属性控制裁剪 280

15.3.4控制组件的滚动条 282

15.4 CSS 3的多栏布局 283

15.4.1 CSS 3新增的分栏功能 283

15.4.2使用盒模型实现多栏布局 287

15.5上机实践 295

15.5.1设计多栏布局 295

15.5.2为商品列表添加阴影和倒影 296

第16章 大体勾勒——尺寸和定位的相关属性 298

16.1尺寸的相关属性 298

16.1.1设置对象的宽度 298

16.1.2设置对象的高度 301

16.1.3 CSS 3新增的与尺寸相关的属性 304

16.2定位的相关属性 308

16.2.1设置定位方式 308

16.2.2设置层叠顺序 309

16.2.3设置与其父对象的上、下、左、右边的距离 310

16.3上机实践 315

16.3.1高度可自由调整的许愿墙背景 315

16.3.2让多个字条层叠显示 316

第17章 增姿增色——表格和列表的相关属性 318

17.1表格的相关属性 318

17.1.1设置表格边框线的显示方式 319

17.1.2设置单元格边框间距 320

17.1.3设置表格标题的位置 322

17.1.4设置单元格无内容时是否显示边框 323

17.1.5设置表格的布局方式 324

17.2列表的相关属性 326

17.2.1设置项目符号的种类 327

17.2.2设置作为项目符号的图片 328

17.2.3设置项目符号排列的位置 329

17.2.4综合属性——list-style 330

17.3上机实践 332

17.3.1设计隔行变色的单线表格 332

17.3.2应用列表实现横向展示商品 333

第18章 充满生机——CSS 3的动画设计 335

18.1 2D变换 335

18.1.1应用transform属性实现平移 336

18.1.2应用transform属性实现缩放 337

18.1.3应用transform属性实现倾斜 339

18.1.4应用transform属性实现旋转 340

18.1.5更改变换的中心点 341

18.2过渡效果 343

18.2.1指定过渡持续的时间 343

18.2.2指定参与过渡的属性 345

18.2.3指定过渡的动画类型 347

18.2.4指定过渡的延迟时间 349

18.3 Animation动画 350

18.3.1关键帧 350

18.3.2动画属性 352

18.4上机实践 354

18.4.1实现方形变圆形动画效果 354

18.4.2应用Animation动画实现模拟进度条效果 355

第19章 锦上添花——CSS的其他重要属性 358

19.1控制鼠标指针 358

19.2打印的相关属性 360

19.2.1应用＠media print控制打印的内容 360

19.2.2在对象之前插入页分隔符 362

19.2.3在对象之后插入页分隔符 365

19.2.4设置是否允许在对象的内部插入页分隔符 366

19.3 Media Queries 369

19.3.1 Media Queries的语法 369

19.3.2根据浏览器宽度自动调整布局 371

19.4上机实践 374

19.4.1实现分页打印客户信息表格 374

19.4.2设置不同的鼠标指针 375

第四篇 项目实战篇 378

第20章 旅游信息网前台页面 378

20.1需求分析 378

20.2网站总体设计 378

20.2.1网站功能概述 378

20.2.2网站开发及运行环境 378

20.2.3文件夹组织结构 379

20.3网站主体结构设计 379

20.4网站公共部分设计 380

20.4.1设计网站公共header 380

20.4.2设计网站公共footer 386

20.5网站主页设计 387

20.5.1显示网站介绍及相关图片 387

20.5.2主页左侧导航的实现 388

20.6“留下足迹”页面设计 391

20.6.1播放音乐 391

20.6.2添加留言功能的实现 392