HTML 5和CSS 3编程从基础到应用 瓷艺名家PDF电子书下载

第1章HTML 5入门基础 1

1.1 HTML 5概述 1

1.1.1 HTML 5的诞生 1

1.1.2 HTML 5的组织 2

1.1.3 HTML 5的目标 2

1.1.4 HTML 5的浏览器支持情况 4

1.2 HTML的基本结构 5

1.2.1 HTML文档的编写规范 5

1.2.2文档开始标签 7

1.2.3文档头部标签 8

1.2.4文档主体标签 8

1.2.5编写文档的注意事项 8

1.3 HTML 5与HTML4的区别 9

1.3.1语法的改变 9

1.3.2新增的元素和废除的元素 12

1.3.3新增的属性和废除的属性 17

1.4 Flash、Silverlight与HTML 5 20

1.5项目案例：运行HTML 5测试页面 21

1.6习题 22

1.7实践疑难解答 23

1.7.1为什么要使用HTML 5 23

1.7.2 HTML 5的安全问题 25

第2章HTML 5的页面属性和元素 27

2.1 html根元素 27

2.2文档头部元素 29

2.3 HTML 5全局属性 34

2.3.1 hidden属性 35

2.3.2 spellcheck属性 35

2.3.3 contenteditable属性 37

2.3.4 draggable属性 38

2.4结构元素 38

2.4.1 header元素 38

2.4.2 article元素 39

2.4.3 aside元素 40

2.4.4 footer元素 41

2.5交互元素 42

2.5.1 progress元素 42

2.5.2 meter元素 44

2.5.3 details元素和summary元素 45

2.5.4 menu元素 46

2.5.5 command元素 48

2.6文本层次语义元素 49

2.6.1 cite元素 49

2.6.2 mark元素 51

2.6.3 time元素 52

2.7页面节点 53

2.7.1 section元素 53

2.7.2 nav元素 54

2.7.3 hgroup元素 55

2.7.4 address元素 56

2.8分组元素 57

2.8.1 ul元素 58

2.8.2 ol元素 58

2.8.3 dl元素 60

2.9项目案例：设计旅游网站首页 60

2.10习题 68

2.11实践疑难解答 70

2.11.1 command元素无法显示效果 70

2.11.2 HTML 5中如何使用新增加的元素 71

第3章 使用HTML5设计表单 72

3.1传统表单元素 72

3.1.1表单标记 72

3.1.2基本表单元素 75

3.2新增输入类型 76

3.2.1 email类型 76

3.2.2 search类型 77

3.2.3 url类型 78

3.2.4 number类型 79

3.2.5 telephone number类型 81

3.2.6 range类型 83

3.2.7 color类型 84

3.2.8时间日期类型 85

3.3新增表单属性 86

3.3.1 autocomplete属性 87

3.3.2 autofocus属性 88

3.3.3 disabled属性 90

3.3.4 form属性 90

3.3.5 list属性 92

3.3.6 multiple属性 93

3.3.7 min、 max和step属性 94

3.3.8 placeholder属性 95

3.3.9 pattern属性 96

3.3.10 required属性 98

3.3.11 readonly属性 99

3.4新增表单元素 101

3.4.1 datalist元素 101

3.4.2 keygen元素 101

3.4.3 output元素 102

3.4.4 optgroup元素 102

3.5提交时的验证处理 104

3.5.1自动验证 105

3.5.2显示验证 106

3.5.3自定义验证 108

3.5.4取消验证 108

3.6项目案例：设计购物网站注册页面 109

3.7习题 112

3.8实践疑难解答 114

3.8.1如何区分使用method属性的参数值get和post 114

3.8.2 HTML 5在自定义验证时无法显示错误提示信息 115

第4章 基于HTML5的多媒体支持 116

4.1 HTML 5中多媒体的新增特性 116

4.2多媒体的支持条件 116

4.2.1视频和音频编解码器 117

4.2.2支持视频和音频的浏览器 117

4.2.3多媒体的格式 118

4.3在HTML 5中创建视频 119

4.3.1 video元素的属性 119

4.3.2 video元素的方法 121

4.3.3 video元素的事件 122

4.4在HTML 5中创建音频 124

4.4.1 audio元素的属性 124

4.4.2 audio元素的事件 125

4.5项目案例：制作网页视频播放器 126

4.6习题 131

4.7实践疑难解答 133

4.7.1关于video元素方法的问题 133

4.7.2 video元素的事件问题 134

第5章 基于HTML 5的绘图 136

5.1 canvas简介 136

5.1.1 canvas的历史 137

5.1.2 canvas与SVG及VML的差异 137

5.1.3 canvas的简单使用 137

5.2绘制文字 139

5.3绘制简单图形 141

5.3.1绘制矩形 141

5.3.2绘制直线 143

5.3.3绘制三角形 145

5.3.4绘制圆形 147

5.3.5绘制笑脸 149

5.4绘制渐变图形 150

5.4.1绘制线性渐变 150

5.4.2绘制径向渐变 152

5.5绘制变形图形 154

5.5.1保存和恢复状态及输出图像 154

5.5.2坐标变换 157

5.5.3矩阵变换 159

5.6组合多个图形 161

5.7为图形绘制阴影 163

5.8图像的简单操作 165

5.8.1绘制图像 165

5.8.2图像平铺 167

5.8.3图像裁剪和复制 169

5.9项目案例：绘制小车滚动特效 171

5.10习题 174

5.11实践疑难解答 176

第6章 基于HTML 5的文件上传 178

6.1使用file对象选择文件 178

6.1.1选择一个文件 178

6.1.2选择多个文件 181

6.1.3通过类型过滤选择的文件 183

6.1.4通过accept属性过滤选择的文件 185

6.2使用FileReader接口读取文件 188

6.2.1 FileReader接口简介 188

6.2.2使用readAsDataURLO方法预览图片 189

6.2.3使用readAsText（）方法读取文本文件内容 191

6.2.4 FileReader接口中的事件 194

6.3文件读取时的错误与异常 197

6.3.1发生错误与异常的条件 197

6.3.2错误代码说明 200

6.4项目案例：多文件上传至服务器 200

6.5习题 207

6.6.实践疑难解答 209

6.6.1 HTML 5中accept属性的使用 209

6.6.2使用readAsDataURL（）方法读取文件时的问题 209

第7章HTML5数据存储 211

7.1 Web Storage存储 211

7.1.1 sessionStorage对象 211

7.1.2 localStorage对象 213

7.2数据操作 214

7.2.1保存数据 214

7.2.2读取数据 215

7.2.3清空数据 217

7.2.4遍历数据 219

7.2.5使用JSON对象存取数据 221

7.3 HTML 5数据库 224

7.3.1创建与打开数据库 224

7.3.2执行SQL语句 225

7.3.3数据管理 228

7.4项目案例：实现留言本 233

7.5习题 236

7.6实践疑难解答 237

7.6.1本地存储是否可以代替Cookie 237

7.6.2本地数据存储存在限制 238

第8章HT ML 5的高级应用 239

8.1获取地理位置 239

8.1.1 Geolocation API概述 239

8.1.2 position对象 242

8.1.3使用Google地图锁定当前位置 245

8.2网络通信API 247

8.2.1 postMessage（）方法 247

8.2.2跨文档消息传输 247

8.3使用Web Worker处理线程 249

8.3.1 Web Worker概述 250

8.3.2线程中的JavaScript 253

8.3.3使用线程处理JSON对象 254

8.3.4线程嵌套 255

8.4离线应用程序 258

8.4.1离线Web应用程序概述 258

8.4.2 manifest文件 258

8.4.3 applicationCache对象 263

8.5拖放操作 268

8.5.1拖放API 268

8.5.2 dataTransfer对象 270

8.6项目案例：将图片拖放到回收站 272

8.7习题 275

8.8实践疑难解答 278

8.8.1 Opera浏览器如何清除本地缓存 278

8.8.2拖动操作完成后如何显示图片 278

第9章CSS样式和CSS选择器 280

9.1 CSS简介 280

9.1.1 CSS概述 280

9.1.2 CSS发展历史 281

9.1.3 CSS的基本使用 281

9.2 CSS 3选择器概述 283

9.3属性选择器 284

9.3.1 [*=val]属性选择器 284

9.3.2 [att^=val]属性选择器 285

9.3.3 [att$=val]属性选择器 287

9.4伪元素选择器 288

9.4.1 fiirst-line和first-letter选择器 288

9.4.2 before选择器 289

9.4.3 after选择器 291

9.5结构化伪类选择器 291

9.5.1 root选择器 292

9.5.2 not选择器 294

9.5.3 first-child和last-child选择器 295

9.5.4 nth-child（n）和nth-last-child（n）选择器 296

9.5.5 nth-of-type（n）和nth-last-of-type（n）选择器 298

9.5.6 empty选择器 300

9.5.7 target选择器 301

9.6其他选择器 303

9.6.1 UI元素伪类选择器 303

9.6.2兄弟选择器 310

9.7 content属性的简单使用 312

9.8项目案例：控制保龄球显示位置 317

9.9习题 322

9.10实践疑难解答 323

9.10.1 ：nth-child和：nth-of-type选择器的区别 323

9.10.2如何在IE7-8下使用CSS 3的伪类选择器 324

第10章 背景、边框和渐变的相关属性 326

10.1背景样式 326

10.1.1 background-size属性 326

10.1.2 background-clip属性 328

10.1.3 background-origin属性 330

10.1.4 background-break属性 332

10.2项目案例1：实现书架效果 333

10.3边框样式 335

10.3.1 border-color属性 335

10.3.2 border-image属性 336

10.3.3 border-radius属性 339

10.4项目案例2：相片背景设置边框 341

10.5渐变 343

10.5.1线性渐变 343

10.5.2径向渐变 347

10.5.3重复渐变 350

10.6项目案例3：设计填充内容效果 351

10.7习题 353

10.8实践疑难解答 354

10.8.1为什么使用border-radius属性无法设置圆角边框 354

10.8.2怎样实现径向渐变非同心圆的效果 355

第11章 盒模型、字体与多列布局 356

11.1完善的盒模型 356

11.1.1 box-sizing属性 356

11.1.2 box-shadow属性 359

11.1.3 overflow-x和overflow-y属性 361

11.1.4 resize属性 363

11.2文本与字体 364

11.2.1 text-shadow属性 364

11.2.2 text-overflow属性 366

11.2.3 word-break属性 368

11.2.4 word-wrap属性 369

11.2.5@font-face属性 371

11.2.6 font-size-adjust属性 374

11.3多列布局 378

11.3.1 columns属性 378

11.3.2 column-width属性 380

11.3.3 column-count属性 381

11.3.4 column-gap属性 382

11.3.5 column-rule属性 384

11.3.6 column-span属性 386

11.3.7 column-fill属性 388

11.4项目案例1：设计相册浏览页面 389

11.5项目案例2：设计精美的多列网页版式 391

11.6习题 395

11.7实践疑难解答 397

11.7.1 input宽度比textarea少2px的问题 397

11.7.2设计一个两行两列的布局版式页面 397

第12章CSS 3的高级应用 399

12.1过渡 399

12.1.1浏览器支持情况 399

12.1.2 transition-duration属性 400

12.1.3 transition-property属性 400

12.1.4 transition-delay属性 401

12.1.5 transition-timing-function属性 402

12.1.6 transition属性 403

12.1.7多个颜色过渡 404

12.2变形 405

12.2.1变形的相关属性 405

12.2.2平移 406

12.2.3缩放 408

12.2.4倾斜 410

12.2.5旋转 411

12.2.6更改变形的原点坐标 413

12.3动画 415

12.3.1关键帧 415

12.3.2动画属性 417

12.3.3图片轮换显示的动画效果 421

12.4项目案例：3D立体效果显示 423

12.5习题 427

12.6实践疑难解答 429

12.6.1 JavaScript中如何设置和获取CSS 3中的属性值 429

12.6.2动画如何循环播放 430

第13章 制作鲜花网站页面 431

13.1鲜花网站简介 431

13.2鲜花首页模块 432

13.2.1结构分析 432

13.2.2设计顶部区域 434

13.2.3设计底部区域 436

13.2.4设计中间区域 437

13.3鲜花列表 442

13.3.1运行效果 442

13.3.2设计列表内容 443

13.4鲜花详细 446

13.4.1运行效果 447

13.4.2设计详细内容 447

13.5购物车 450

13.5.1运行效果 450

13.5.2设计页面内容 451

13.6我的账户 453

13.7用户注册 455

13.8当前位置 457

参考答案 461