HTML5+CSS3从入门到精通

目 录

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.1HTML5的语法变化...........................................................................15

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

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

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

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

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

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

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

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

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

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

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

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

2.4.2section元素....................................................................................30

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

2.4.4aside元素.......................................................................................34

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

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

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

2.5.1header元素....................................................................................36

2.5.2hgroup元素....................................................................................37

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

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

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

Chapter03 HTML5绘图功能

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

3.1.1canvas是什么.................................................................................43

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

3.1.3canvas历史....................................................................................43

3.1.4canvas坐标....................................................................................44

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

3.2 使用canvasAPI................................................................................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.5canvas文本应用................................................................................64

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

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

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

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

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

Chapter04 视频和音频应用

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

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

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

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

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

4.2.2audio元素.......................................................................................77

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

4.2.4video元素.......................................................................................80

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

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

Chapter05 表单应用

5.1 HTML5form概述.............................................................................83

5.1.1HTML5 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.2dataTransfer对象的属性与方法........................................................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.4Wi-Fi地理定位数据.........................................................................109

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

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

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

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

7.3 隐私的处理..........................................................................................112

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

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

7.4 使用GeolocationAPI..................................................................... 113

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

7.4.2 位置请求.......................................................................................114

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

本章小结.............................................................................................120

Chapter08 本地储存应用

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

8.1.1webStorage简介...........................................................................122

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

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

8.3 使用webstorageAPI..................................................................... 124

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

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

8.3.3 WebStorage事件机制...................................................................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.3mannifest文件...............................................................................140

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

9.4 WebWorkers概述..........................................................................143

9.4.1 WebWorkers简介.........................................................................144

9.4.2 WebWorkers的简单应用...............................................................144

9.5 使用Web WorkersAPI.................................................................. 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.1CSS简介...................................................................................157

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

10.1.3CSS的基本语法..........................................................................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.2CSS继承的局限性.......................................................................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.3position属性...................................................................................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