HTML5+CSS3从入门到精通(配1DVD)

 

无论初学还是巩固，一本适合各个层面网页设计员的通用教材！

从未系统学习过，网页布局能力比较薄弱怎么办？

学校教材太简单，想提高实际网页设计能力怎么办？

从事开发工作，急需提高APP前端开发能力怎么办？

想要同时掌握HTML5 CSS3技术，却找不到相关教程？

……

这些困惑，本书统统可以解决，让你一本就够！

光盘20小时高清多媒体教学视频——讲解到位，条理清晰。

搭配多个小例子与代码进行实际讲解——理论 实践，层次分明。

对如何设计构建网站进行详解——十分透彻，一看就懂。

无论是刚刚接触，还是学有小成，都能在本书中发现你需要的东西！

 

本书内容充实条理，结构严谨，循序渐进有层次的进行讲解，分别对HTML5及CSS3进行了全方位的介绍。书中所列举案例的选择均突出知识点的实际应用性，并配合有“TIPS”技巧讲解，让读者真正掌握HTML5 CSS3。

本书共27章，前半部分介绍了HTML5的基本功能、绘图功能 、视频和音频应用、表单的应用、拖放、地理位置信息处理计、本地储存应用、Web与Web Workers API应用。后半部分介绍了CSS的基础、样式、背景属性与宽高 、显示相关、盒子模型、定位机制、光标和滤镜、概述及新增的选择器、文本与边框样式、背景、渐变、转换、过渡、动画、多列布局、用户界面、弹性盒子、多媒体查询等。*后提供了7个拓展知识附录速查指南。

创客诚品团队是由多位前端开发工程师、具有项目实战经验的总监级讲师、高校计算机专业导师组成。团队核心成员有多年的教学经验，后加入知名科技有限公司担任高端工程师。现为网页设计类畅销图书作者，曾在“全国计算机图书排行榜”同品类排行中身居前列，受到广大工程设计人员的好评。

目  录 

 

Chapter01   HTML5概述

1.1 什么是HTML5…………………………………………………………………………..
2

1.2 HTML5发展历程……………………………………………………………………….
2

1.3 认识HTML5………………………………………………………………………………
3

1.3.1 兼容性
…………………………………………………………………………………
3

1.3.2 用户优先和效率………………………………………………………………………
4

1.3.3 化繁为简………………………………………………………………………………
4

1.3.4 通用访问……………………………………………………………………………….
5

1.4 HTML5新增功能……………………………………………………………………….
5

1.4.1 字符集和DOCTYPE的改进………………………………………………………..
5

1.4.2 语义化的标签…………………………………………………………………………
6

1.4.3 新元素…………………………………………………………………………………
6

1.4.4 页面的交互性更加强大………………………………………………………………
7

1.4.5 标准改进………………………………………………………………………………
8

1.4.6 使用Selectors API简化选取操作………………………………………………….
8

1.5 使用HTML5的优势…………………………………………………………………..10

1.6 HTML5的发展趋势…………………………………………………………………..12

本章小结…………………………………………………………………………………..
13

 

 

Chapter02  HTML5的新增元素

2.1 语法差异……………………………………………………………………………………15

2.1.1
HTML5的语法变化…………………………………………………………………15

2.1.2
HTML5的标记方法…………………………………………………………………15

2.1.3
HTML5与旧版本的兼容性…………………………………………………………16

2.2 元素和属性差异…………………………………………………………………………17

2.2.1
HTML5中新增的元素……………………………………………………………….17

2.2.2
HTML5中废弃的元素……………………………………………………………..
25

2.3 HTML5中新增的元素属性………………………………………………………..
26

2.3.1 表单相关属性……………………………………………………………………….
26

2.3.2 其他相关属性……………………………………………………………………….
26

2.3.3
HTML5中废弃的属性……………………………………………………………..
27

2.3.4 全局属性…………………………………………………………………………….
27

2.4 新的主体结构元素……………………………………………………………………..
29

2.4.1
article元素…………………………………………………………………………..
29

2.4.2
section元素…………………………………………………………………………
30

2.4.3 nav元素……………………………………………………………………………..
32

2.4.4
aside元素……………………………………………………………………………
34

2.4.5
time元素与微格式………………………………………………………………….
34

2.4.6
pubdate属性……………………………………………………………………….
35

2.5 新的非主体结构元素………………………………………………………………….
36

2.5.1
header元素…………………………………………………………………………
36

2.5.2
hgroup元素…………………………………………………………………………
37

2.5.3
footer元素…………………………………………………………………………..
39

2.5.4
address元素……………………………………………………………………….
40

本章小结…………………………………………………………………………………..
41

 

 

Chapter03  HTML5绘图功能

3.1
canvas概述…………………………………………………………………………….
43

3.1.1
canvas是什么………………………………………………………………………
43

3.1.2
canvas的主要应用领域…………………………………………………………..
43

3.1.3
canvas历史…………………………………………………………………………
43

3.1.4
canvas坐标…………………………………………………………………………
44

3.1.5 CSS和canvas……………………………………………………………………..
45

3.2 使用canvas
API……………………………………………………………………..
45

3.2.1 检测浏览器是否支持……………………………………………………………….
45

3.2.2 在页面中加入canvas……………………………………………………………..
46

3.2.3 绘制矩形与三角形………………………………………………………………….
48

3.3 绘制曲线路径…………………………………………………………………………….51

3.3.1 路径……………………………………………………………………………………51

3.3.2 描边样式…………………………………………………………………………….
53

3.3.3 填充样式…………………………………………………………………………….
54

3.3.4 绘制树干…………………………………………………………………………….
55

3.3.5 绘制曲线……………………………………………………………………………..
56

3.4 绘制图像…………………………………………………………………………………..
57

3.4.1 插入图像…………………………………………………………………………….
58

3.4.2 绘制渐变图像……………………………………………………………………….
59

3.4.3 缩放对象…………………………………………………………………………….
62

3.4.4 变换对象…………………………………………………………………………….
63

3.5
canvas文本应用……………………………………………………………………..
64

3.5.1 文本绘制…………………………………………………………………………….
65

3.5.2 应用阴影……………………………………………………………………………..
66

3.5.3 像素数据…………………………………………………………………………….
67

实例精讲动态时钟……………………………………………………………………………
68

本章小结…………………………………………………………………………………..
73

 

Chapter04  视频和音频应用

4.1 audio和video概述…………………………………………………………………..
75

4.1.1
HTML5中音视频的问题…………………………………………………………..
75

4.1.2 浏览器支持情况…………………………………………………………………….
75

4.2 使用audio和video元素……………………………………………………………
76

4.2.1 检测浏览器是否支持……………………………………………………………….
76

4.2.2
audio元素……………………………………………………………………………
77

4.2.3 使用audio元素……………………………………………………………………..
79

4.2.4
video元素……………………………………………………………………………
80

4.2.5 使用video元素……………………………………………………………………..
80

本章小结…………………………………………………………………………………..
81

 

Chapter05   表单应用

5.1 HTML5
form概述…………………………………………………………………..
83

5.1.1
HTML5 form的新特性…………………………………………………………….
83

5.1.2 浏览器支持情况…………………………………………………………………….
83

5.1.3 输入型控件………………………………………………………………………….
85

5.2 新的表单元素……………………………………………………………………………
87

5.3 表单新属性……………………………………………………………………………….
89

实例精讲form应用………………………………………………………………………….
92

本章小结…………………………………………………………………………………..95

 

 

Chapter06   HTML5拖放

6.1 拖放API…………………………………………………………………………………..
97

6.1.1 实现拖放API的过程………………………………………………………………..
97

6.1.2
dataTransfer对象的属性与方法………………………………………………..
97

6.1.3 拖放列表……………………………………………………………………………
100

实例精讲重现邮箱附件拖拽上传………………………………………………………
103

本章小结…………………………………………………………………………………
106

 

 

Chapter07  地理位置信息处理

7.1 关于地理位置信息……………………………………………………………………
108

7.1.1 经度和纬度坐标……………………………………………………………………
108

7.1.2 IP地址定位数据……………………………………………………………………
108

7.1.3 GPS地理定位数据………………………………………………………………..
108

7.1.4
Wi-Fi地理定位数据……………………………………………………………….
109

7.1.5 用户自定义的地理定位……………………………………………………………
109

7.2 浏览器支持情况……………………………………………………………………….
109

7.2.1
Gerlocation API概述…………………………………………………………….
109

7.2.2
HTML5 Geolocation的浏览器支持情况………………………………………
112

7.3 隐私的处理………………………………………………………………………………
112

7.3.1 应用隐私保护机制…………………………………………………………………
112

7.3.2 处理位置信息………………………………………………………………………
113

7.4 使用Geolocation
API…………………………………………………………… 113

7.4.1 检测浏览器是否支持………………………………………………………………
113

7.4.2 位置请求……………………………………………………………………………
114

实例精讲在地图上显示你的位置………………………………………………………
117

本章小结…………………………………………………………………………………
120

 

Chapter08   本地储存应用

8.1
webStorage概述………………………………………………………………….
122

8.1.1
webStorage简介…………………………………………………………………
122

8.1.2 简单的数据库应用…………………………………………………………………
122

8.2 浏览器支持情况……………………………………………………………………….
124

8.3 使用webstorage
API…………………………………………………………… 124

8.3.1 存储和获取数据……………………………………………………………………
125

8.3.2
localstorage和sessionstorage……………………………………………….
126

8.3.3 Web
Storage事件机制………………………………………………………….
126

8.4 本地数据库………………………………………………………………………………
127

8.4.1 什么是本地数据库…………………………………………………………………
127

8.4.2 用executesql执行查询…………………………………………………………..
128

8.4.3 使用数据库实现网页留言…………………………………………………………
131

本章小结……………………………………………………………………………
135

 

Chapter09   Web与Web Workers API应用

9.1 离线Web概述………………………………………………………………………….
137

9.1.1 离线Web简介……………………………………………………………………..
137

9.1.2 离线Web应用的浏览器支持情况………………………………………………..
137

9.2 使用离线Web………………………………………………………………………….
137

9.2.1 构建简单的离线应用程序…………………………………………………………
138

9.2.2 支持离线行为………………………………………………………………………
139

9.2.3
mannifest文件…………………………………………………………………….
140

9.2.4
applicationCache对象…………………………………………………………..
142

9.4 Web
Workers概述………………………………………………………………..
143

9.4.1 Web
Workers简介……………………………………………………………….144

9.4.2 Web
Workers的简单应用………………………………………………………144

9.5 使用Web Workers
API………………………………………………………… 147

9.5.1 检测浏览器是否支持………………………………………………………………
147

9.5.2 创建Web Workers……………………………………………………………….148

9.5.3 多线程文件的加载与执行…………………………………………………………
148

9.5.4 与Web Workers通信…………………………………………………………….148

实例精讲离线Web的具体应用………………………………………………………..
151

本章小结…………………………………………………………………………………
155

 

 

Chapter10   CSS基础

10.1 CSS概述……………………………………………………………………………….
157

10.1.1
CSS简介………………………………………………………………………..
157

10.1.2
CSS的特点及优点……………………………………………………………..
157

10.1.3
CSS的基本语法………………………………………………………………..
158

10.1.4 引入CSS的方法………………………………………………………………..
158

10.2 CSS选择器……………………………………………………………………………
161

10.2.1 三大基础选择器………………………………………………………………..
161

10.2.2 集体选择器………………………………………………………………………
164

10.2.3 属性选择器………………………………………………………………………
165

10.2.4 后代选择器………………………………………………………………………
167

10.2.5 子元素选择器……………………………………………………………………
170

10.2.6 相邻兄弟选择器…………………………………………………………………
171

10.2.7 伪类………………………………………………………………………………
173

10.2.8 伪元素……………………………………………………………………………
175

10.3 CSS的继承……………………………………………………………………………
181

10.3.1 继承关系…………………………………………………………………………
181

10.3.2
CSS继承的局限性……………………………………………………………..
182

10.4 CSS数值单位…………………………………………………………………184

10.5 CSS相对数值单位…………………………………………………………………184

本章小结…………………………………………………………………………………
185

 

Chapter11   CSS样式

11.1 字体样式………………………………………………………………………………..
187

11.2 段落样式………………………………………………………………………………..
197

11.3 边框……………………………………………………………………………………..
205

11.4 外轮廓………………………………………………………………………………….
209

11.5 列表样式简介…………………………………………………………………………
214

11.6 列表相关属性…………………………………………………………………………
217

本章小结…………………………………………………………………………………
223

 

Chapter12   CSS背景属性与宽/高

12.1 设置背景内容………………………………………………………………………..
225

12.2 设置背景平铺………………………………………………………………………..
229

12.3 设置背景固定/滚动………………………………………………………………..
233

12.4 设置背景的位置…………………………………………………………………….
235

12.5 背景简写属性………………………………………………………………………..
239

12.6 宽/高属性………………………………………………………………………………
239

本章小结…………………………………………………………………………………
242

Chapter13   CSS显示相关

13.1 设置可见性……………………………………………………………………………
244

13.1.1 元素隐藏………………………………………………………………………..
244

13.2 内容溢出与隐藏……………………………………………………………………..
249

本章小结…………………………………………………………………………………
252

Chapter14  CSS盒子模型

14.1 盒子模型简介………………………………………………………………………..
254

14.2 设置内/外边距……………………………………………………………………….
254

本章小结…………………………………………………………………………………
265

Chapter15   CSS定位机制

15.1 CSS定位机制简介………………………………………………………………..
267

15.2 常规定位与浮动定位………………………………………………………………
268

15.2.1 常规定位………………………………………………………………………..
268

15.2.2 浮动定位………………………………………………………………………..
268

15.3
position属性………………………………………………………………………..
272

15.3.1 定位………………………………………………………………………..
272

15.3.2 相对定位………………………………………………………………………..
275

15.3.3 固定定位………………………………………………………………………..
277

15.4 Z轴索引的优先级设置……………………………………………………………
278

实例精讲导航栏……………………………………………………………………………
281

本章小结…………………………………………………………………………………
290

Chapter16   光标和滤镜

16.1 光标属性……………………………………………………………………………….
292

16.2 滤镜属性……………………………………………………………………………….
293

本章小结…………………………………………………………………………………
295

Chapter17   CSS3概述及新增功能

17.1 CSS3简介……………………………………………………………………………
297

17.2 新增长度单位………………………………………………………………………..
297

17.3 新增结构性伪类…………………………………………………………………….
299

17.4 新增UI元素状态伪类……………………………………………………………..
306

17.5 新增属性和目标伪类………………………………………………………………
308

本章小结…………………………………………………………………………………
313

Chapter18   CSS3文本与边框样式

18.1 文本阴影text-shadow………………………………………………………..
315

18.2 文本溢出text-overflow………………………………………………………
316

18.3 文本换行word-wrap……………………………………………………………
318

18.4 单词拆分word-break………………………………………………………….
319

18.5 圆角边框border-radius………………………………………………………
320

18.6 盒子阴影box-shadow………………………………………………………..
322

18.7 边界边框border-image………………………………………………………
324

本章小结………………………………………………………………………
326

 

Chapter19   CSS3背景

19.1 多重背景图片………………………………………………………………………..
328

19.2 背景尺寸……………………………………………………………………………….
329

19.3 背景的绘制区域……………………………………………………………………..
330

本章小结…………………………………………………………………………………
332

 

Chapter20   CSS3渐变

20.1 渐变简介……………………………………………………………………………….
334

20.2 浏览器支持情况…………………………………………………………………….
334

20.3 线性渐变……………………………………………………………………………….
335

20.4 径向渐变……………………………………………………………………………….
339

本章小结…………………………………………………………………………………
341

Chapter21   CSS3转换

21.1 CSS3转换及浏览器支持……………………………………………………….
343

21.2 2D转换…………………………………………………………………………………
343

21.3 3D转换…………………………………………………………………………………
353

本章小结…………………………………………………………………………………
360

 

Chapter22   CSS3过渡

22.1 过渡简介……………………………………………………………………………….
362

22.2 浏览器支持情况…………………………………………………………………….
362

22.3 实现过渡……………………………………………………………………………….
363

22.4 过渡属性……………………………………………………………………………….
367

实例精讲模拟苹果桌面…………………………………………………………………..
368

本章小结…………………………………………………………………………………
370

Chapter23   CSS3动画

23.1 动画简介……………………………………………………………………………….
372

23.2 浏览器支持情况…………………………………………………………………….
372

23.3 实现动画……………………………………………………………………………….
373

23.4 动画属性……………………………………………………………………………….
376

实例精讲太阳系星球运转图…………………………………………………………….
378

本章小结…………………………………………………………………………………
383

Chapter24   CSS3多列布局

24.1 多列布局简介………………………………………………………………………..
385

24.2 浏览器支持情况…………………………………………………………………….
385

24.3 多列布局属性………………………………………………………………………..
386

本章小结…………………………………………………………………………………
390

Chapter25   CSS3用户界面

25.1 用户界面简介………………………………………………………………………..
392

25.2 浏览器支持情况…………………………………………………………………….
392

25.3 用户界面属性………………………………………………………………………..
393

本章小结…………………………………………………………………………………
400

Chapter26   CSS3弹性盒子

26.1 弹性盒子简介………………………………………………………………………..
402

26.2 浏览器支持情况…………………………………………………………………….
402

26.3 设置弹性盒子………………………………………………………………………..
403

本章小结…………………………………………………………………………………
422

Chapter27  CSS3多媒体查询

27.1 多媒体查询简介…………………………………………………………………….
424

27.2 浏览器支持情况…………………………………………………………………….
424

27.3 多媒体查询的应用………………………………………………………………….
424

实例精讲自适应导航栏…………………………………………………………………..
428

本章小结…………………………………………………………………………………
434

 

Appendix   附录

附录A HTML5标签……………………………………………………………………..
436

附录B HTML事件属性…………………………………………………………………
450

附录C CSS属性一览……………………………………………………………………
453

附录D CSS3选择器…………………………………………………………………….
463

附录E JavaScript对象参考手册………………………………………………… 464

附录F jQuery参考手册………………………………………………………………..
471

附录G HTML支持的符号……………………………………………………………..
479

互联网技术日新月异，在2011年以前，HTML5和CSS3看起来还遥不可及，但如今很多公司都已经开始运用这些技术了（如火狐、IE等主流浏览器公司）。HTML5和CSS3奠定了打造下一代Web应用的基础，这两项技术可以让网站更易开发，也更容易维护。本书系统讲解了HTML5和CSS3的基础理论和实际应用技术，通过大量实例对HTML5和CSS3进行深入浅出的分析，着重讲解如何运用HTML5和CSS3进行Web运用和网页布局。全书注重实际操作，使读者在学习技术的同时也掌握Web开发和设计的精髓，提高综合应用能力。

 

 

选择一本合适的书

本书面向的是已具备HTML和CSS基础知识的人群。如果你刚刚涉足HTML或CSS领域，或者已经从事了数年网站开发，那这本书就是为你而准备的。然而，如果你已对HTML5及CSS3做过一些初步的尝试，但尚未充分理解它所提供的全部好处，那么你将从本书得到的收获。为了帮助你掌握现代Web标准，我们组织一线设计人员及高校教师共同编写了网页设计“从入门到精通”系列图书。

 

本书内容设置

章节                     主要知识        
内容概述

Chapter
01～09           HTML5    
介绍了新增和废除的一些元素，同时系统讲解了HTML5中的绘图功能、视频和音频添加方式的简化、拖放功能、地理位置信息处理、本地存储的应用，后还讲解了Web Workers API应用的知识

 

Chapter
10～27           CSS3 介绍了CSS的样式、显示、背景效果、盒子模型、定位、渐变、转换、过渡、动画、多列布局、弹性盒子、多媒体查询及文本与边框的属性等知识，同时还讲解了CSS3新增的选择器、光标和滤镜的知识

 

 

本书特色

 零基础入门轻松掌握

为了符合初级网页设计入门读者的需求，本书采用“从入门到精通”基础大全图书的写作方法，科学安排知识结构，内容由浅入深，循序渐进逐步展开，让读者平稳地从基础知识过渡到实战项目。

 

 理论 实践完美结合，学 练两不误

200多个基础知识 近200个实战案例，让你轻松掌握“基础入门—核心技术—技能提升—实例精讲”四大学习阶段的重点难点。章节后提供本章小结，总结本章的重点和难点，真正做到举一反三，提升网页设计和开发能力。

 

 讲解通俗易懂，知识技巧贯穿全书

知识内容不是简单的理论罗列，而是在讲解过程中随时插入一些实战技巧，让读者知其然并知其所以然，掌握解决问题的关键。

 

 同步高清多媒体教学视频，提升学习效率

该系列每书附赠一张DVD光盘，里面包含书中所有案例的网页源文件和每章的重点案例教学视频，这些视频能解决读者在随书操作中遇到的问题，还能帮助读者快速理解所学知识，方便参考学习。

 

 网页开发人员入门必备海量开发资源库

为了给读者提供一个全面的“基础 实例 项目实战”学习套餐，本书的DVD光盘中提供了本书所有案例的网页源文件，方便读者参考和测试。还有1500个前端开发JavaScript特效；实用网页配色方案；精美网页欣赏等海量素材。

 

 QQ群在线答疑 微信平台互动交流

笔者为了方便为读者解惑答疑，提供了QQ群、微信平台等技术支持，以便读者之间相互交流、学习

网页开发交流QQ群：650083534

微信学习平台： 微信扫一扫，关注“德胜书坊”，即可获得更多让你惊叫的代码和海量素材！

 

读者对象

 初学网页设计的自学者                          网页设计爱好者

 刚毕业的莘莘学子                        互联网公司网页相关职位的“菜鸟”

 大中专院校计算机专业教师和学生            计算机培训机构的教师和学员

 

作者团队

创客诚品团队由多位网页开发工程师、高校计算机专业教师组成。团队核心成员都有多年的教学经验，后加入知名科技有限公司担任高级工程师。现为网页设计类畅销图书作者，曾在“全国计算机图书排行榜”同品类图书排行中身居前列，受到广大网页设计人员的好评。

本书由徐飞、李恒老师编写，他们都是网页教学方面的优秀教师，将多年的教学经验和技术都融入了本书编写中，在此对他们的辛勤工作表示衷心的感谢，也特别感谢中原工学院教务处对本书的大力支持。

 

致谢

在此首先感谢选择并阅读本系列图书的读者朋友，你们的支持是我们的动力来源。其次感谢为顺利出版给予支持的出版社领导及编辑，感谢为本书付出过辛苦劳作的所有人。本人编写水平毕竟有限，书中难免有错误和疏漏之处，恳请广大读者给予批评指正。后感谢您选择购买本书。从基本概念到实战练习，终升级为完整项目开发，本书能帮助零基础的您快速掌握网页设计！