从零开始学HTML5+CSS3PDF电子书下载

第1章 HTML 5+CSS 3学习准备 3

1.1 学习准备 3

1.1.1 选择合适的浏览器 3

1.1.2 选择合适的开发工具 3

1.2 HTML 5——新一代HTML标准 3

1.2.1 HTML 5语法 4

1.2.2 新增与废除的元素和属性 5

1.2.3 全局属性 10

1.2.4 HTML 5中新增的API 13

测试题 14

本章小结 14

第2章 HTML元素、属性与结构 17

2.1 HTML元素 17

2.1.1 HTML元素概述 17

2.1.2 HTML元素的语法 17

2.1.3 HTML元素的嵌套 18

2.2 HTML 5属性 19

2.2.1 属性的基本使用方法 19

2.2.2 HTML 5全局属性 19

2.3 新增的主体结构元素 26

2.3.1 article元素 26

2.3.2 section元素 27

2.3.3 nav元素 28

2.3.4 aside元素 28

2.3.5 time元素 30

2.4 新增的非主体结构元素 31

2.4.1 header元素 31

2.4.2 hgroup元素 32

2.4.3 footer元素 32

2.4.4 address元素 33

2.5 HTML 5结构 33

2.5.1 文档结构大纲 33

2.5.2 内容区块的编排方式 33

2.5.3 标题分级 34

测试题 34

本章小结 35

第3章 HTML 5音频和视频 38

3.1 Web视频的标准与格式 38

3.2 video/audio元素概述 38

3.3 检测浏览器是否支持HTML 5视频 39

3.4 实例：在HTML 5中显示视频／音频 40

3.5 video元素与audio元素详解 42

3.5.1 video/audio属性 42

3.5.2 video/audio方法 44

3.5.3 video/audio事件 45

测试题 47

本章小结 47

第4章 HTML 5 Canvas 50

4.1 Canvas基础入门 50

4.1.1 什么是Canvas 50

4.1.2 实例：在HTML 5页面中添加Canvas元素 50

4.1.3 实例：绘制一个蓝色的矩形 51

4.2 绘制基本线条 52

4.2.1 实例：绘制直线 52

4.2.2 实例：绘制二次曲线 53

4.2.3 实例：绘制贝塞尔曲线 54

4.2.4 实例：绘制圆弧 55

4.3 绘制简单形状 56

4.3.1 实例：绘制圆形 56

4.3.2 实例：绘制三角形 57

4.3.3 实例：绘制圆角矩形 58

4.3.4 实例：绘制自定义图形 60

4.4 绘制渐变 61

4.4.1 实例：绘制线性渐变 61

4.4.2 实例：绘制径向渐变 62

4.5 图形组合 64

4.5.1 实例：绘制阴影 64

4.5.2 实例：透明效果 65

4.6 使用图像 66

4.6.1 实例：插入图像 66

4.6.2 实例：平铺图像 67

4.6.3 实例：裁剪图像 68

4.6.4 实例：像素级操作 70

4.7 绘制文字 71

4.7.1 实例：控制文本的字体、大小和样式 71

4.7.2 实例：控制文本的颜色 73

4.7.3 实例：描绘文本的边缘 74

4.7.4 实例：设置文本对齐方式 75

4.8 图像数据与URL 76

4.8.1 存储图像数据 76

4.8.2 将彩色转为灰度 77

4.8.3 图像数据URL 78

4.8.4 将绘制的图形保存为图像文件 79

4.9 用Canvas实现动画效果 80

4.9.1 实例：清除Canvas的内容 80

4.9.2 实例：创建动画 81

4.9.3 动画的开始与停止 83

4.10 实战演练 83

测试题 88

本章小结 88

第5章 HTML 5 SVG 91

5.1 SVG简介 91

5.1.1 什么是SVG 91

5.1.2 SVG有哪些优势 91

5.2 HTML 5中的SVG 91

5.2.1 实例：将SVG直接嵌入HTML 5页面 92

5.2.2 实例：绘制简单的形状 93

5.2.3 实例：复用内容 94

5.2.4 实例：图形阴影 95

5.2.5 实例：图形渐变 96

5.2.6 实例：绘制自由路径 98

5.3 画布与SVG的比较 99

测试题 100

本章小结 100

第6章 Form API 103

6.1 新增的input输入类型 103

6.1.1 email类型 103

6.1.2 url类型 104

6.1.3 number类型 105

6.1.4 range类型 105

6.1.5 date pickers类型 106

6.1.6 search类型 107

6.1.7 color类型 108

6.2 新增的表单元素 108

6.2.1 datalist元素 109

6.2.2 keygen元素 110

6.2.3 output元素 110

6.3 新增的表单属性 111

6.3.1 autocomplete属性 111

6.3.2 novalidate属性 112

6.4 新增的input属性 112

6.4.1 autocomplete属性 113

6.4.2 autofocus属性 113

6.4.3 form属性 113

6.4.4 表单重写属性overrides 113

6.4.5 height和width属性 114

6.4.6 list属性 114

6.4.7 min、max和step属性 114

6.4.8 multiple属性 115

6.4.9 pattern属性 115

6.4.10 placeholder属性 115

6.4.11 required属性 115

测试题 116

本章小结 116

第7章 File API 119

7.1 Blob对象 119

7.2 File对象与FileList对象 120

7.3 FileReader对象 121

7.3.1 FileReader对象的方法 121

7.3.2 FileReader对象的事件 122

7.3.3 实例：以二进制方式读取文件 122

7.3.4 实例：以文本方式读取文件 123

7.3.5 实例：以DataURL方式读取文件 124

7.4 FileSystem对象 126

7.4.1 FileSystem对象简介 126

7.4.2 请求文件系统 126

7.4.3 创建文件 129

7.4.4 写入文件 130

7.4.5 向文件中附加数据 131

7.4.6 复制选中的文件 132

7.4.7 删除文件 133

7.4.8 创建目录 133

7.4.9 读取目录内容 134

7.4.10 删除目录 135

7.4.11 复制文件或目录 136

7.4.12 移动文件或目录 137

7.4.13 filesystem：网址 137

测试题 138

本章小结 138

第8章 拖放API与桌面通知API 141

8.1 拖放API 141

8.1.1 实现拖放的步骤 141

8.1.2 使用dataTransfer对象 141

8.1.3 设定拖放时的视觉效果 142

8.1.4 自定义拖放图标 142

8.1.5 实例：选择图形 143

8.2 桌面通知API（Notification API） 146

8.2.1 桌面通知API的必要性 146

8.2.2 桌面通知生成流程 146

8.2.3 实例：桌面通知的两种实现方法 146

测试题 149

本章小结 149

第9章 本地存储与离线应用 152

9.1 认识Web Storage 152

9.1.1 客户端数据存储的历史与现状 152

9.1.2 Web Storage概述 152

9.1.3 示例：一个Web Storage的简单应用 153

9.2 使用Web Storage 155

9.2.1 检测浏览器支持 155

9.2.2 存入与读取数据 156

9.2.3 清除数据 157

9.2.4 遍历操作 157

9.2.5 storage事件 158

9.3 离线应用 158

9.3.1 离线应用概述 159

9.3.2 离线资源缓存 159

9.3.3 Cache Manifest的基本用法 159

9.3.4 分析Cache Manifest文件 160

9.3.5 在线状态监测 161

9.3.6 实例：创建离线应用 161

测试题 164

本章小结 164

第10章 Communication API 167

10.1 认识Communication API 167

10.1.1 Communication API简介 167

10.1.2 Communication API运行流程 167

10.1.3 Communication API的基本用法 167

10.2 跨文档消息通信 168

10.2.1 源安全简介 168

10.2.2 postMessage API的基本用法 168

10.2.3 实例：使用postMessage API创建应用 169

10.3 XMLHttpRequest Level 2 171

10.3.1 跨源XMLHttpRequest 171

10.3.2 HTTP请求时限 172

10.3.3 FormData对象 172

10.3.4 上传文件 173

10.3.5 接收二进制数据 174

10.3.6 进度信息 174

10.3.7 创建XMLHttpRequest应用 175

测试题 180

本章小结 180

第11章 Web Workers API与Web SQL API 180

11.1 Web Workers 183

11.1.1 Web Workers简介 183

11.1.2 Web Workers简单应用 184

11.1.3 Web Workers嵌套 186

11.2 Web SQL 189

11.2.1 Web SQL基本使用 189

11.2.2 数据库的基本应用 189

11.2.3 实例：创建数据库并创建数据表 193

11.2.4 实例：插入数据与获取数据 194

测试题 196

本章小结 196

第12章 WebSocket API 199

12.1 WebSocket概述 199

12.2 WebSocket服务器 199

12.3 使用WebSocket API 200

12.3.1 浏览器支持情况检测 200

12.3.2 WebSocket API客户端的基本用法 201

12.4 实例：创建HTML 5 WebSocket应用程序 202

12.4.1 编写客户端HTML文件 202

12.4.2 添加服务端WebSocket代码 203

12.4.3 添加WebSocket客户端代码 203

12.4.4 最终效果 205

测试题 205

本章小结 206

第13章 地理位置API 209

13.1 地理位置定位原理 209

13.1.1 地理位置定位的方式及流程 209

13.1.2 HTML 5中如何实现地理位置定位 209

13.2 Geolocation API介绍 210

13.2.1 检测浏览器支持 210

13.2.2 getCurrentPosition（）方法 210

13.2.3 watchPosition（）方法 214

13.2.4 clearPosition（）方法 214

13.3 实例：在地图中显示地理位置 214

测试题 217

本章小结 217

第14章 History API 220

14.1 History API概述 220

14.2 为什么要用History API 220

14.3 如何使用History API 220

14.4 实例：浏览历史记录 221

14.5 实例：添加与修改历史记录 223

测试题 226

本章小结 226

第15章 CSS基础知识 229

15.1 CSS概述 229

15.1.1 CSS简介 229

15.1.2 CSS历史 229

15.1.3 CSS特点 229

15.1.4 CSS与浏览器的关系 230

15.1.5 CSS站点欣赏 230

15.2 基本CSS选择器 232

15.2.1 标记选择器 232

15.2.2 类别选择器 232

15.2.3 ID选择器 236

15.2.4 实例：应用基本选择器 237

15.3 复合选择器 239

15.3.1 “交集”选择器 239

15.3.2 “并集”选择器 240

15.3.3 后代选择器 242

15.3.4 实例：应用复合选择器 243

15.4 CSS继承特性 244

15.4.1 什么是继承 244

15.4.2 CSS属性继承 244

15.4.3 实例：正确使用CSS继承特性 245

15.5 CSS的层叠特性 246

15.6 CSS样式 247

15.6.1 行内样式 247

15.6.2 内部样式 248

15.6.3 外部样式 248

15.6.4 实例：CSS样式的实现方式 249

15.7 CSS优先级 250

15.7.1 ID选择器优先级高于类别选择器 250

15.7.2 后面的样式覆盖前面的 251

15.7.3 使用！important 252

15.7.4 指定的高于继承 253

15.7.5 行内样式高于内部或外部样式 254

15.7.6 实例：灵活运用CSS优先级 255

15.8 CSS盒子模型 257

15.8.1 盒子模型结构 257

15.8.2 边框（border） 258

15.8.3 内边距（padding） 261

15.8.4 外边距（margin） 262

15.8.5 盒子的浮动 263

15.8.6 盒子的定位 266

15.8.7 z-index空间位置 268

15.8.8 盒子的display属性 270

15.8.9 实例：用盒子模型创建网页布局 271

测试题 274

本章小结 274

第16章 CSS 3选择器 277

16.1 属性选择器 277

16.1.1 E［att＝“val”］ 277

16.1.2 E［att＾＝“val”］ 277

16.1.3 E［att＄＝“val”］ 277

16.1.4 E［att＊＝“val”］ 278

16.1.5 实例：文本效果 278

16.2 结构性伪类选择器 279

16.2.1 伪类选择器 279

16.2.2 伪元素选择器 280

16.2.3 root选择器 283

16.2.4 not选择器 284

16.2.5 empty选择器 285

16.2.6 target选择器 286

16.2.7 first-child选择器和last-child选择器 287

16.2.8 first-of-type选择器和last-of-type选择器 289

16.2.9 nth-child选择器和nth-last-child选择器 291

16.2.10 nth-of-type选择器和nth-last-of-type选择器 293

16.2.11 循环使用样式 294

16.2.12 only-child选择器和only-of-type选择器 296

16.2.13 实例：定位指定元素 297

16.3 UI元素状态伪类选择器 298

16.3.1 E:hover、E:active和E:focus选择器 298

16.3.2 E:enabled和E:disabled伪类选择器 300

16.3.3 E:read-only和E:read-write伪类选择器 301

16.3.4 E:checked、E:default和E:indeterminate伪类选择器 302

16.3.5 E::selection伪类选择器 304

16.3.6 实例：用户界面新体验 305

16.4 通用兄弟元素选择器E～F 311

测试题 312

本章小结 312

第17章 使用CSS选择器插入内容 315

17.1 插入文字 315

17.1.1 使用选择器插入文本 315

17.1.2 插入筛选内容 316

17.1.3 实例：CSS制作目录 317

17.2 插入图像 320

17.2.1 插入图像文件的方法 320

17.2.2 插入图像文件的好处 321

17.2.3 实例：列表图标与推荐标题 321

17.3 插入项目编号 322

17.3.1 插入连续项目编号 322

17.3.2 在项目编号中追加文字 323

17.3.3 设置编号种类 324

17.3.4 插入嵌套编号 325

17.3.5 在字符串两边添加嵌套文字编号 327

17.3.6 实例：导航菜单 328

测试题 333

本章小结 333

第18章 使用CSS设置文本样式 336

18.1 控制文本样式 336

18.1.1 字体和大小 336

18.1.2 文本颜色和粗细 336

18.1.3 斜体文本 337

18.1.4 文本装饰 338

18.1.5 英文字母大小写转换 338

18.1.6 实例：综合应用文字样式 339

18.2 控制段落样式 340

18.2.1 段落水平对齐 340

18.2.2 段落垂直对齐 341

18.2.3 行间距和字间距 344

18.2.4 首字下沉 345

18.2.5 实例：段落排版 346

18.3 CSS 3中给文本添加阴影——text-shadow属性 347

18.3.1 text-shadow属性的使用方法 347

18.3.2 位移距离 348

18.3.3 阴影的模糊半径 349

18.3.4 阴影的颜色 349

18.3.5 指定多个阴影 349

18.4 CSS 3中让文本自动换行——text-break属性 350

18.4.1 依靠浏览器让文本自动换行 350

18.4.2 指定自动换行的处理方法 351

测试题 353

本章小结 353

第19章 使用CSS设置图片与背景样式 353

19.1 图片样式 356

19.1.1 图片边框设置 356

19.1.2 图片位置设置 358

19.1.3 图片缩放设置 359

19.1.4 实例：图片边框按钮 360

19.2 图片对齐 362

19.2.1 水平对齐设置 362

19.2.2 垂直对齐设置 362

19.2.3 实例：排列的相册 363

19.3 图文混排 365

19.3.1 图文混排 365

19.3.2 设置混排间距 366

19.3.3 实例：看图说话 367

19.4 背景颜色 369

19.4.1 设置页面背景颜色 369

19.4.2 设置块背景颜色 369

19.5 背景图片 370

19.5.1 设置页面背景图片 370

19.5.2 重复的背景图片 370

19.5.3 设置背景图片的位置 371

19.5.4 设置背景滚动 371

19.5.5 背景样式的缩写方式 371

19.5.6 实例：创建背景皮肤 372

测试题 373

本章小结 374

第20章 使用CSS设置列表与表单样式 374

20.1 列表控制 377

20.1.1 列表的类型及使用 377

20.1.2 创建垂直导航条 378

20.1.3 创建水平导航条 379

20.2 使用列表制作实用菜单 380

20.2.1 实例：多级列表菜单 380

20.2.2 实例：会伸缩的列表菜单 384

20.3 表单设计概述 388

20.3.1 表单的设计原则 388

20.3.2 表单应用分类 389

20.3.3 实例：经典表单效果 390

20.4 表单的设计 391

20.4.1 form标签 391

20.4.2 表单元素 391

20.4.3 对表单文本应用样式 395

20.4.4 实例：滑块复选框 395

20.4.5 实例：会员注册页面 397

测试题 404

本章小结 404

第21章 对超链接和鼠标应用样式 407

21.1 使用CSS设置超链接 407

21.1.1 什么是超链接 407

21.1.2 关于超链接路径 407

21.1.3 超链接属性控制 408

21.1.4 图像映射 408

21.1.5 实例：实现多页面跳转 409

21.2 超链接特效 411

21.2.1 实例：按钮式超链接 411

21.2.2 实例：浮雕式超链接 412

21.3 鼠标特效 413

21.3.1 CSS控制鼠标箭头 413

21.3.2 实例：鼠标变化的超链接 414

测试题 416

本章小结 416

第22章 CSS中的滤镜 419

22.1 Alpha滤镜 419

22.2 Blur滤镜 420

22.3 Grayscale滤镜 421

22.4 Sepia滤镜 423

22.5 Brightness滤镜 424

22.6 Hue-rotate滤镜 425

22.7 Invert滤镜 426

22.8 Saturate滤镜 427

22.9 Contrast滤镜 429

22.10 Drop-shadow滤镜 430

测试题 431

本章小结 431

第23章 项目实战案例 434

23.1 项目实战案例一：企业门户网站 434

23.1.1 header元素中的内容 436

23.1.2 aside元素中的内容 438

23.1.3 section元素中的内容 439

23.1.4 footer元素中的内容 443

23.2 项目实战案例二：用户管理 445