从零开始学HTML 5+CSS 3

第1章 html 5 + css 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中新增的api13

测试题14

本章小结14

第2章 html元素、属性与结构

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音频和视频

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

4.1 canvas基础入门50

4.1.1 什么是canvas50

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 图像数据与url76

4.8.1 存储图像数据76

4.8.2 将彩色转为灰度77

4.8.3 图像数据url78

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

5.1 svg简介91

5.1.1 什么是svg91

5.1.2 svg有哪些优势91

5.2 html 5中的svg91

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

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 表单重写属性 overrides113

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

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

8.1 拖放api141

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章 本地存储与离线应用

9.1 认识web storage152

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

9.1.2 web storage概述152

9.1.3 示例：一个web storage的简单应用153

9.2 使用web storage155

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

10.1 认识communication api167

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 2171

10.3.1 跨源xmlhttprequest171

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

11.1 web workers183

11.1.1 web workers简介183

11.1.2 web workers简单应用184

11.1.3 web workers嵌套186

11.2 web sql189

11.2.1 web sql基本使用189

11.2.2 数据库的基本应用189

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

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

测试题196

本章小结196

第12章 websocket api

12.1 websocket概述199

12.2 websocket服务器199

12.3 使用websocket api200

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

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

14.1 history api概述220

14.2 为什么要用history api220

14.3 如何使用history api220

14.4 实例：浏览历史记录221

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

测试题226

本章小结226

第15章 css基础知识

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 使用!important252

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选择器

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 ~ f311

测试题312

本章小结312

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

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设置文本样式

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设置图片与背景样式

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设置列表与表单样式

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章 对超链接和鼠标应用样式

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中的滤镜

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章 项目实战案例

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 项目实战案例二：用户管理