HTML 5+CSS3网页设计经典范例PDF电子书下载

01HTML 5概述 1

1.1 HTML 5介绍 1

1.2 HTML 5的发展历程 2

1.3认识HTML5 3

1.3.1兼容性 3

1.3.2用户优先和效率 3

1.3.3化繁为简 4

1.3.4通用访问 4

1.4 HTML5的新增功能 5

1.4.1字符集和DOCTYPE的改进 5

1.4.2新元素 5

1.4.3标准改进 6

1.4.4使用Selectors API简化选取操作 6

1.4.5 window.JSON 8

1.5使用HTML 5的优势 9

1.6 HTML 5的未来发展 9

1.6.1 Internet Explorer 8 9

1.6.2众多全新浏览器的支持 9

1.7本章小结 10

02HTML 5与HTML4的区别 11

2.1语法上的差异 11

2.1.1 HTML5的语法变化 11

2.1.2 HTML 5中的标记方法 12

2.1.3 HTML 5与旧版本的兼容性 12

2.2元素上的差异 13

2.2.1 HTML 5中新增加的元素 13

2.2.2 HTML5中废除的元素 19

2.3属性上的差异 19

2.3.1 HTML5中新增加的属性元素 19

2.3.2 HTML5中废除的属性 20

2.3.3全局属性 20

2.4本章小结 22

03HTML5的结构 23

3.1新的主体结构元素 23

3.1.1 article元素 23

3.1.2 section元素 24

3.1.3 nav元素 25

3.1.4 aside元素 27

3.1.5 time元素与微格式 28

3.1.6 pubdate属性 29

3.2新的非主体结构元素 30

3.2.1 header元素 30

3.2.2 hgroup元素 30

3.2.3 footer元素 31

3.2.4 address元素 32

3.3 HTML 5的结构阐述 32

3.3.1 HTML 5大纲 33

3.3.2对新的结构元素使用样式 35

3.4本章小结 36

04绘图功能的实现 37

4.1 canvas API概述 37

4.1.1canvas是什么 37

4.1.2 canvas的历史 38

4.1.3 canvas坐标 38

4.1.4什么情况下不使用canvas 39

4.1.5替代内容 39

4.1.6 CSS和canvas 39

4.1.7浏览器对canvas的支持 39

4.1.8 canvas的核心Context 40

4.2如何使用canvas API 40

4.2.1检测浏览器是否支持 40

4.2.2在页面中加入canvas 41

4.2.3上机操作——绘制矩形 41

4.3应用canvas API绘制曲线路径 45

4.3.1路径 45

4.3.2上机操作——描边样式 46

4.3.3上机操作——对矩形填充样式 47

4.3.4上机操作——绘制曲线 48

4.4应用canvas API绘制图像 49

4.4.1上机操作——在canvas中插入图像 49

4.4.2上机操作——绘制渐变图像 50

4.4.3上机操作——缩放canvas对象 52

4.4.4上机操作——canvas变换 53

4.5 canvas文本应用 55

4.5.1上机操作——canvas文本绘制 55

4.5.2上机操作——应用阴影 56

4.5.3上机操作——像素数据 57

4.6实例精讲——动态时钟 58

4.7本章小结 62

05网络上的视频和音频应用 63

5.1 HTML 5中audio和video概述 63

5.1.1视频容器 63

5.1.2音频和视频编解码器 65

5.1.3 HTML 5音视频的问题 67

5.1.4哪些浏览器支持Audio和Video元素 67

5.1.5 HTML 5音视频支持格式 68

5.2 HTML 5中audio和video元素的应用 69

5.2.1检测浏览器是否支持 69

5.2.2 audio元素 70

5.2.3上机操作——使用audio元素 72

5.2.4 video元素 72

5.2.5上机操作——使用video元素 74

5.3实例精讲——在HTML4中实现音频和视频的播放 75

5.4实例精讲——在HTML5中实现音频和视频的播放 78

5.5本章小结 82

06表单的应用 83

6.1HTML 5 Forms概述 83

6.1.1 Forms和XForms 83

6.1.2 HTML 5 Forms的新特性 84

6.1.3浏览器对HTML 5 Forms的支持情况 84

6.1.4输入型控件 86

6.2表单新特性与函数 86

6.2.1新增属性 87

6.2.2大幅度地增加与改良input元素的种类 90

6.2.3上机操作——对新的表单元素使用样式 93

6.2.4上机操作——追加output元素 95

6.3验证表单 95

6.3.1验证状态对象 95

6.3.2上机操作——自动验证 96

6.3.3上机操作显示验证 97

6.3.4取消验证 98

6.3.5上机操作——自定义错误信息 98

6.4实例精讲——HTML 5中的Forms应用 99

6.5本章小结 102

07全新的文件应用 103

7.1新增的页面元素 103

7.1.1上机操作——figure元素Forms 103

7.1.2上机操作——figcaption元素Forms 104

7.1.3上机操作——details元素Forms 104

7.1.4上机操作——mark元素Forms 105

7.1.5上机操作——progress元素Forms 105

7.1.6上机操作——meter元素Forms 106

7.1.7上机操作——menu元素Forms 107

7.1.8上机操作——command元素Forms 108

7.2增强的页面元素 109

7.2.1上机操作——ol列表 109

7.2.2上机操作——dl列表 111

7.2.3上机操作——cite元素 111

7.2.4上机操作——small元素 112

7.3文件API 112

7.3.1 filelist对象与fiile对象 112

7.3.2 blob对象 113

7.3.3 FileReader接口 113

7.4拖放API 115

7.4.1实现拖放API的过程 115

7.4.2 dataTransfer对象的属性与方法 116

7.4.3上机操作——设置拖放时的视觉效果 116

7.4.4上机操作——自定义拖放图标 118

7.5实例精讲——在HTML5中实现文件拖放 120

7.6本章小结 123

08地理位置信息处理 125

8.1关于地理位置信息 125

8.1.1经度和纬度坐标 125

8.1.2 IP地址定位数据 126

8.1.3 GPS地理定位数据 126

8.1.4 Wi-Fi地理定位数据 126

8.1.5手机地理定位数据 126

8.1.6用户自定义的地理定位 127

8.2浏览器对Geolocation的支持 127

8.2.1 Geolocation API概述 127

8.2.2 HTML 5 Geolocation的浏览器支持情况 130

8.3隐私的处理 131

8.3.1应用隐私保护机制 131

8.3.2处理位置信息 132

8.4使用Geolocation API 132

8.4.1检测浏览器是否支持 132

8.4.2位置请求 133

8.5实例精讲——在网页中使用电子地图 135

8.6本章小结 136

09 web本地存储应用 137

9.1 Web Storage概述 137

9.1.1 Web Storage介绍 137

9.1.2上机操作——简易的Web留言本 138

9.1.3上机操作——简单的数据库应用 142

9.2 Web Storage的浏览器支持情况 145

9.3使用Web Storage API 145

9.3.1检测浏览器的支持情况 145

9.3.2上机操作——设置和获取数据 147

9.3.3封堵数据泄露 148

9.3.4 IocalStorage与sessionStorage 148

9.3.5探索Web Storage 148

9.4本地数据库 149

9.4.1什么是本地数据库 149

9.4.2用executesql来执行查询的实现方法 150

9.4.3上机操作——使用数据库实现网页留言 150

9.4.4 transaction方法 155

9.5本章小结 156

10离线Web应用 157

10.1离线Web概述 157

10.1.1离线Web介绍 157

10.1.2离线Web应用的浏览器支持情况 158

10.2使用离线Web 158

10.2.1构建简单的离线应用程序 158

10.2.2支持离线行为 159

10.2.3 mannifest文件介绍 159

10.2.4上机操作——applicationCache对象 161

10.3实例精讲——HTML5中离线Web的具体应用 166

10.4本章小结 172

11 Web Workers API应用 173

11.1 Web Workers概述 173

11.1.1Web Workers介绍 173

11.1.2上机操作——Web Workers的简单应用 174

11.2使用Web Workers API 176

11.2.1上机操作——检测浏览器是否支持 176

11.2.2创建Web Workers 177

11.2.3多线程文件的加载与执行 177

11.2.4上机操作——与Web Workers通信 178

11.3 Web Workers线程应用 179

11.3.1上机操作——与线程进行数据的交互 180

11.3.2上机操作——线程嵌套 182

11.3.3上机操作——在多个子线程中进行数据交互 185

11.4实例精讲——HTML5中的Web Workers应用 189

11.5本章小结 194

12应用WebSockets API通信 195

12.1 WebSockets概述 195

12.1.1WebSockets介绍 195

12.1.2实时通信与HTTP请求 195

12.1.3 WebSockets工作原理 196

12.1.4 WebSockets的浏览器支持情况 197

12.2上机操作——编写简单的Echo WebSocket服务器 198

12.3 WebSockets通信 202

12.3.1 WebSockets通信的基本知识 202

12.3.2上机操作——使用WebSockets API 203

12.4实例精讲——HTML5中的WebSockets应用程序 205

12.5本章小结 208

13 Css样式入门 209

13.1 CSS概述 209

13.1.1 CSS的概念 209

13.1.2 CSS的特点 210

13.1.3 CSS选择器分类 210

13.2 CSS选择器类型 211

13.2.1 CSS选择器分类 211

13.2.2通用选择器 212

13.2.3多元素的组合选择器 213

13.2.4属性选择器 214

13.2.5伪元素和伪类选择器 218

13.3 CSS的继承特性 238

13.3.1继承关系 238

13.3.2 CSS继承的局限性 238

13.4样式表的类型 239

13.4.1内联样式表 239

13.4.2嵌入样式表 239

13.4.3外部样式表 240

13.4.4导入样式表 240

13.5本章小结 240

14使用Css控制文字样式 241

14.1字体设置 241

14.1.1字体样式 241

14.1.2字体大小 243

14.1.3字体粗细 243

14.1.4字体颜色 244

14.1.5斜体 245

14.1.6字体变体 246

14.1.7字符转换 247

14.1.8文本修饰 247

14.2设置段落样式 248

14.21设置段落对齐 248

14.2.2设置行间距 251

14.2.3设置字间距和字母间距 252

14.2.4文本缩进 253

14.2.5首字下沉 254

14.2.6处理空白符 255

14.3本章小结 256

15使用Css设置背景 257

15.1设置背景 257

15.1.1设置背景颜色 257

15.1.2设置背景图片 258

15.1.3设置背景图片重复 259

15.1.4设置图片的位置 260

15.1.5设置背景滚动模式 261

15.1.6设置背景定位 264

15.1.7设置背景裁剪 265

15.1.8设置背景图像的大小 267

15.2设置图片样式 269

15.2.1设置图片边框 269

15.2.2设置图片缩放 271

15.3设置其他边框样式 272

15.3.1 border-radius属性 272

15.3.2 border-image属性 273

15.4本章小结 274

16使用Css控制列表 275

16.1列表控制简述 275

16.1.1列表的控制原则 275

16.1.2列表符号类型 276

16.2列表相关属性 279

16.2.1设置列表类型 279

16.2.2设置列表项图像 281

16.2.3设置列表符号位置 282

16.2.4列表综合属性 283

16.3本章小结 283

17CSS盒模型 285

17.1盒模型的概念 285

17.1.1什么是盒模型 285

17.1.2设置外边距的大小 286

17.1.3设置边框 287

17.1.4设置内边距的大小 289

17.1.5外边距合并 290

17.2盒的浮动 292

17.2.1元素的浮动属性 292

17.2.2清除浮动属性 293

17.3盒的定位 294

17.3.1静态定位 294

17.3.2相对定位 295

17.3.3绝对定位 296

17.3.4固定定位 298

17.3.5 z-index空间位置 299

17.4本章小结 300

18 Div+Css布局方法 301

18.1 Div概述 301

18.1.1什么是Div 301

18.1.2插入Div 302

18.2 CSS布局方式 304

18.2.1两列布局 304

18.2.2三列布局 307

18.2.3多列布局 308

18.3使用Div+CSS布局网页 311

18.3.1网页布局页面分析 311

18.3.2制作网页 312

18.4本章小结 319