基于新信息技术的HTML 5和CSS 3网页设计进阶教程

第1章 HTML5的重要使命 1 1.1 Web时代的变迁 1 1.1.1 Web1.0 1 1.1.2 Web2.0 2 1.1.3 Web3.0 3 1.2 HTML5的目标 3 1.2.1 HTML的发展历程 4 1.2.2 HTML5要解决的问题 5 1.3 HTML5的新功能 5 1.3.1 无插件范式 6 1.3.2 新的DOCTYPE和字符集 6 1.3.3 新的HTML元素 7 1.3.4 新的输入类型和属性 7 1.3.5 简化页面元素查找方式 9 第2章 HTML5的多媒体 12 2.1 容器格式和编/解码格式 12 2.1.1 视频、音频的容器 12 2.1.2 视频、音频的编/解码器 13 2.2 浏览器支持特性检测 14 2.3 视频、音频的脚本控制 16 2.4 HTML5中的音频 17 2.4.1 audio元素的基本操作 17 2.4.2 使用source元素 21 2.4.3 浏览器支持音频格式检测 21 2.5 HTML5中的视频 23 2.5.1 video元素的基本操作 23 2.5.2 使用source元素 25 2.5.3 浏览器支持视频格式检测 26 第3章 HTML5的拖放 28 3.1 浏览器支持检测 28 3.2 实现简单拖放 28 3.3 拖放相关的属性和事件 32 3.4 dataTransfer对象 33 3.5 拖放图片到浏览器 34 第4章 HTML5的绘图 39 4.1 canvas API简介 39 4.2 浏览器支持检测 39 4.3 什么是canvas 40 4.4 canvas中的坐标 41 4.5 在canvas上绘图 42 4.5.1 绘制直线 43 4.5.2 绘制方框 45 4.5.3 绘制圆或弧 47 4.5.4 开始和关闭路径 49 4.5.5 绘制文字 52 4.5.6 绘制图像 55 第5章 HTML5的本地存储 58 5.1 Web Storage 58 5.1.1 浏览器支持检测 58 5.1.2 Web Storage API 59 5.1.3 永久本地存储对象localStorage 60 5.1.4 会话存储对象sessionStorage 66 5.2 Web SQL Database 66 5.3 IndexedDB 70 5.3.1 IndexedDB的特点 70 5.3.2 兼容检测 71 5.3.3 IndexedDB API 71 5.3.4 IndexedDB数据库基本操作流程 72 5.3.5 综合实例 77 第6章 Web Workers多线程 83 6.1 Web Workers简介 84 6.2 浏览器支持检测 84 6.3 Web Workers分类 84 6.4 Web Workers API 85 6.5 Web Workers基本用法 86 6.5.1 主线程 86 6.5.2 Worker线程 88 6.5.3 数据通信 88 6.6 Web Workers完整实例 89 第7章 HTML5的离线缓存 92 7.1 APPCache 92 7.1.1 浏览器支持情况 93 7.1.2 使用APPCache实现页面缓存 93 7.1.3 APPCache API 95 7.1.4 其他注意事项 96 7.2 Service Workers 96 7.2.1 浏览器支持检测 97 7.2.2 Service Workers生命周期 97 7.2.3 Service Workers基本用法 98 第8章 CSS3边框变换 102 8.1 浏览器支持情况 102 8.2 圆角边框 102 8.3 盒子阴影 105 8.4 图片边框 108 8.4.1 border-image-source 108 8.4.2 border-image-slice 109 8.4.3 border-image-repeat 109 8.4.4 border-image-width 110 8.4.5 border-image-outset 110 8.4.6 实例 110 第9章 CSS3的变形处理 112 9.1 Transform 2D转换 112 9.1.1 移动translate() 112 9.1.2 缩放scale() 114 9.1.3 转动rotate() 115 9.1.4 倾斜skew() 116 9.1.5 Transform 2D综合应用 117 9.2 Transform 3D转换 119 9.2.1 3D坐标系和透视效果 119 9.2.2 3D移动translate3d() 121 9.2.3 3D转动rotate3d() 121 9.2.4 3D缩放scale3d() 122 9.2.5 整体3D转换 123 9.3 变形后的坐标轴 126 第10章 CSS3的动画处理 130 10.1 关键帧@keyframes 130 10.2 过渡Transition 132 10.2.1 transition-property 132 10.2.2 transition-duration 133 10.2.3 transition-timing-function 133 10.2.4 transition-delay 133 10.3 动画Animation 134 10.3.1 animation-name 135 10.3.2 animation-duration 135 10.3.3 animation-timing-function 135 10.3.4 animation-delay 136 10.3.5 animation-iteration-count 136 10.3.6 animation-direction 136 10.3.7 animation-play-state 136 10.3.8 animation-fill-mode 136 10.4 动画在页面中的实际应用 137 附录 141 一、HTML 视频API 141 二、HTML拖放API 156 三、HTML Canvas API 162 四、HTML IndexedDB API 179 五、HTML Web Worker API 194 参考文献 200