《HTML5网页设计案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，採取【基础入门→核心技术→高级技能→移动开发→综合案例实战】的讲解模式，深入浅出地讲解HTML 5的各项技术及实战技能。

目录

第Ⅰ篇基础入门

第1章新一代Web前端

技术HTML5 3

1.1HTML的基本概念 4

1.1.1HTML的发展历程 4

1.1.2什幺是HTML 4

1.1.3HTML5档案的基本结构 5

1.2HTML5的优势 5

1.2.1解决了跨浏览器问题 5

1.2.2新增了多个新特性 5

1.2.3用户优先的原则 6

1.2.4化繁为简的优势 7

1.3HTML5网页的开发环境 7

1.3.1案例1——使用记事本手工

编写HTML5 7

1.3.2案例2——使用DreamweaverCC

编写HTML档案 8

1.4使用浏览器查看HTML5档案 11

1.4.1案例3——查看页面效果 11

1.4.2案例4——查看源档案 12

1.5高手解惑 12

第2章HTML5网页的文档结构 13

2.1HTML5档案的基本结构 14

2.1.1HTML5页面的整体结构 14

2.1.2HTML5新增的结构标记 14

2.2HTML5基本标记详解 15

2.2.1文档类型说明 15

2.2.2HTML标记 15

2.2.3头标记head 16

2.2.4网页的主体标记body 18

2.2.5页面注释标记<!----> 19

2.3HTML5语法的变化 20

2.3.1标籤不再区分大小写 20

2.3.2允许属性值不使用引号 20

2.3.3允许部分属性值的属性省略 20

2.4必知必会——HTML5代码规範 21

2.5综合案例——符合W3C标準的

HTML5网页 22

2.6跟我学上机——简单的HTML5网页 22

2.7高手解惑 23

第3章HTML5与HTML4的区别 25

3.1　新增的主体结构元素 26

3.1.1　案例1——section元素的使用 26

3.1.2　案例2——article元素的使用 26

3.1.3　案例3——aside元素的使用 29

3.1.4　案例4——nav元素的使用 31

3.1.5　案例5——time元素的使用 32

3.2　新增的非主体结构元素 34

3.2.1　案例6——header元素的使用 34

3.2.2　案例7——hgroup元素的使用 34

3.2.3　案例8——footer元素的使用 36

3.2.4　案例9——figure元素的使用 37

3.2.5　案例10——address元素的使用 39

3.3　新增其他常用元素 40

3.3.1　案例11——mark元素的使用 40

3.3.2　案例12——rp元素、rt元素与

ruby元素的使用 41

3.3.3　案例13——progress元素的

使用 42

3.3.4　案例14——command元素的

使用 42

3.3.5　案例15——embed元素的

使用 43

3.3.6　案例16——details元素与

summary元素的使用 43

3.3.7　案例17——datalist元素的

使用 44

3.4　新增全局属性 45

3.4.1　案例18——contentEditable

属性的使用 45

3.4.2　案例19——spellcheck属性的

使用 46

3.4.3　案例20——tabIndex属性的

使用 46

3.5　新增的其他属性 47

3.5.1　案例21——表单相关属性的

使用 47

3.5.2　案例22——连结相关属性的

使用 54

3.5.3　案例23——其他新增属性的

使用 55

3.6　HTML5废除的属性 56

3.7　高手解惑 57

第II篇核心技术

第4章设计网页文本内容 61

4.1　标题文字的建立 62

4.1.1　案例1——标题文字标记 62

4.1.2　案例2——标题文字的

对齐方式 63

4.2　设定文字格式 63

4.2.1　案例3——设定文字字型 63

4.2.2　案例4——设定字号 64

4.2.3　案例5——设定文字颜色 66

4.2.4　案例6——设定粗体、斜体、

下画线 67

4.2.5　案例7——设定上标与下标 68

4.2.6　案例8——设定字型风格 68

4.2.7　案例9——设定加粗字型 69

4.2.8　案例10——设定字型

複合属性 70

4.2.9　案例11——设定阴影文本 71

4.2.10　案例12——控制换行 72

4.3　设定段落格式 73

4.3.1　案例13——设定段落标记 73

4.3.2　案例14——设定换行标记 74

4.4　设定网页水平线 75

4.4.1　案例15——添加水平线 75

4.4.2　案例16——设定水平线的

宽度与高度 75

4.4.3　案例17——设定水平线的颜色 76

4.4.4　案例18——设定水平线的

对齐方式 76

4.4.5　案例19——去掉水平线阴影 77

4.5　综合案例——成才教育网文本设计 77

4.6　高手解惑 78

第5章设计网页列表与段落 79

5.1　网页文字列表的设计 80

5.1.1　案例1——建立无序列表<ul> 80

5.1.2　案例2——建立有序列表<ol> 81

5.1.3　案例3——建立不同类型的

无序列表 82

5.1.4　案例4——建立不同类型的

有序列表 82

5.1.5　案例5——嵌套列表 83

5.1.6　案例6——自定义列表<dl> 83

5.2　网页段落格式的设计 84

5.2.1　案例7——设计单词间隔

word-spacing 84

5.2.2　案例8——设计字元间隔

letter-spacing 85

5.2.3　案例9——设计文字修饰

text-decoration 86

5.2.4　案例10——设计垂直

对齐方式vertical-align 87

5.2.5　案例11——设计文本转换

text-transform 88

5.2.6　案例12——设计水平对齐

方式text-align 89

5.2.7　案例13——设计文本缩进

text-indent 91

5.2.8　案例14——设计文本行高

line-height 92

5.2.9　案例15——处理空白

white-space 93

5.2.10　案例16——文本反排

unicode-bidi 94

5.3　综合案例——製作图文混排型

旅游网页 96

5.4　高手解惑 97

第6章HTML5网页中的图像 99

6.1　网页中的图像<img> 100

6.1.1　网页中支持的图片格式 100

6.1.2　图像中的路径 100

6.2　在网页中插入图像 102

6.2.1　案例1——插入图像 102

6.2.2　案例2——从不同位置插入

图像 103

6.3　编辑网页中的图像 103

6.3.1　案例3——设定图像的

宽度和高度 104

6.3.2　案例4——设定图像的

提示文字 104

6.3.3　案例5——将图片设定为

网页背景 105

6.3.4　案例6——排列图像 106

6.4　综合案例——图文并茂的房屋装饰

装修网页 107

6.5　高手解惑 108

第7章使用HTML5建立超连结 109

7.1　网页超连结的概念 110

7.1.1　什幺是网页超连结 110

7.1.2　超连结中的URL 110

7.1.3　超连结的URL类型 111

7.2　建立网页超级连结 111

7.2.1　案例1——创建超文本连结 111

7.2.2　案例2——创建图片连结 113

7.2.3　案例3——创建下载连结 114

7.2.4　案例4——使用相对路径和

绝对路径 115

7.2.5　案例5——设定以新视窗显示

超连结页面 115

7.2.6　案例6——设定电子邮件连结 116

7.3　案例7——浮动框架iframe的使用 117

7.4　综合案例——使用锚连结製作电子书

阅读网页 119

7.5高手解惑 122

第8章使用HTML5创建表单 123

8.1案例1——认识表单 124

8.2表单基本元素的使用 124

8.2.1案例2——单行文本输入框

text 125

8.2.2案例3——多行文本输入框

textarea 125

8.2.3案例4——密码域password 126

8.2.4案例5——单选按钮radio 127

8.2.5案例6——複选框checkbox 128

8.2.6案例7——列表框select 128

8.2.7案例8——普通按钮button 129

8.2.8案例9——提交按钮submit 130

8.2.9案例10——重置按钮reset 131

8.3表单高级元素的使用 132

8.3.1案例11——url属性的使用 132

8.3.2案例12——email属性的使用 132

8.3.3案例13——date和time属性的

使用 133

8.3.4案例14——number属性的

使用 134

8.3.5案例15——range属性的使用 135

8.3.6案例16——required属性的

使用 136

8.4综合案例——创建用户反馈表单 137

8.5跟我学上机——製作用户注册表单 138

8.6高手解惑 139

第9章使用HTML5创建表格 141

9.1案例1——表格的基本结构 142

9.2创建表格 143

9.2.1案例2——创建普通表格 143

9.2.2案例3——创建一个带有标题的

表格 144

9.3编辑表格 145

9.3.1案例4——定义表格的

框线类型 145

9.3.2案例5——定义表格的表头 146

9.3.3案例6——设定表格背景 147

9.3.4案例7——设定单元格的背景 148

9.3.5案例8——合併单元格 148

9.3.6案例9——排列单元格中的

内容 152

9.3.7案例10——设定单元格的

行高与列宽 153

9.4案例11——完整的表格标记 153

9.5综合案例——製作计算机报价表 154

9.6跟我学上机——製作学生成绩表 157

9.7高手解惑 160

第10章HTML5中的音频和视频 161

10.1audio标籤概述 162

10.1.1案例1——认识audio标籤 162

10.1.2audio标籤的属性 163

10.1.3浏览器对audio标籤的

支持情况 163

10.2在网页中添加音频档案 163

10.2.1案例2——添加自动播放的

音频档案 163

10.2.2案例3——添加带有控制项的

音频档案 164

10.2.3案例4——添加循环播放的

音频档案 165

10.2.4案例5——添加预播放的

音频档案 165

10.3video标籤概述 166

10.3.1案例6——认识video标籤 166

10.3.2video标籤的属性 167

10.3.3浏览器对video标籤的

支持情况 167

10.4在网页中添加视频档案 168

10.4.1案例7——添加自动播放的

视频档案 168

10.4.2案例8——添加带有控制项的

视频档案 169

10.4.3案例9——添加循环播放的

视频档案 169

10.5综合案例——设定视频档案的

高度与宽度 170

10.6跟我学上机——添加预播放的

视频档案 171

10.7高手解惑 172

第11章使用HTML5绘製图形 173

11.1添加canvas的步骤 174

11.2绘製基本形状 174

11.2.1案例1——绘製矩形 175

11.2.2案例2——绘製圆形 176

11.2.3案例3——使用moveTo与

lineTo绘製直线 177

11.2.4案例4——使用bezierCurveTo

绘製贝济埃曲线 178

11.3绘製渐变图形 179

11.3.1案例5——绘製线性渐变 179

11.3.2案例6——绘製径向渐变 181

11.4绘製变形图形 182

11.4.1案例7——绘製平移效果的

图形 182

11.4.2案例8——绘製缩放效果的

图形 183

11.4.3案例9——绘製旋转效果的

图形 185

11.4.4案例10——绘製组合效果的

图形 186

11.4.5案例11——绘製带阴影的

图形 188

11.5使用图像 189

11.5.1案例12——绘製图像 189

11.5.2案例13——平铺图像 190

11.5.3案例14——裁剪图像 192

11.5.4案例15——图像的

像素化处理 193

11.6案例16——绘製文字 195

11.7图形的保存与恢复 196

11.7.1案例17——保存与

恢复状态 196

11.7.2案例18——保存档案 197

11.8综合案例——绘製火柴棒人物 199

11.9跟我学上机——绘製商标 201

11.10高手解惑 203

第III篇高级技能

第12章HTML5中的档案与拖放 207

12.1　选择档案 208

12.1.1　案例1——选择单个档案 208

12.1.2　案例2——选择多个档案 208

12.2　使用FileReader接口读取档案 209

12.2.1　检测浏览器是否支持

FileReader接口 209

12.2.2　FileReader接口的方法 210

12.2.3　案例3——使用readAsDataURL

方法预览图片 210

12.2.4　案例4——使用readAsText方法

读取文本档案 212

12.3　使用HTML5实现档案的拖放 213

12.3.1　认识档案拖放的过程 214

12.3.2　浏览器支持情况 214

12.3.3　案例5——在网页中拖放

图片 215

12.4　综合案例——在网页中来回拖放

图片 216

12.5跟我学上机——在网页中拖放文字 217

12.6高手解惑 219

第13章定位地理位置技术 221

13.1　GeolocationAPI获取地理位置 222

13.1.1　地理地位的原理 222

13.1.2　获取定位信息的方法 222

13.1.3　常用地理定位方法 222

13.1.4　判断浏览器是否支持HTML5

获取地理位置信息 223

13.1.5　指定纬度和经度坐标 224

13.1.6　获取当前位置的经度与

纬度 225

13.1.7　处理错误和拒绝 227

13.2　目前浏览器对地理定位的

支持情况 227

13.3　综合案例——在网页中调用Google

地图 228

13.4　跟我学上机——持续获取用户

移动后的位置 230

13.5　高手解惑 231

第14章Web存储和通信技术 233

14.1　认识Web存储 234

14.1.1　本地存储和Cookies的区别 234

14.1.2　Web存储方法 234

14.2　使用HTML5WebStorageAPI 234

14.2.1　测试浏览器的支持情况 235

14.2.2　案例1——使用sessionStorage

方法创建对象 236

14.2.3　案例2——使用localStorage

方法创建对象 237

14.2.4　案例3——WebStorageAPI的

其他操作 238

14.2.5　案例4——使用JSON对象

存取数据 239

14.3　目前浏览器对Web存储的

支持情况 241

14.4跨文档讯息传输 242

14.4.1跨文档讯息传输的基本知识 242

14.4.2案例5——跨文档通信套用

测试 242

14.5WebSocketAPI 245

14.5.1什幺是WebSocketAPI 245

14.5.2WebSocket通信基础 245

14.5.3案例6——伺服器端使用Web

SocketAPI 247

14.5.4案例7——客户端使用

WebSocketAPI 250

14.6综合案例——製作简单

Web留言本 250

14.7跟我学上机——编写简单的

WebSocket伺服器 253

14.8　高手解惑 257

第15章处理执行绪和伺服器

传送事件 259

15.1　WebWorker 260

15.1.1　WebWorker概述 260

15.1.2　执行绪中常用的变数、

函式与类 260

15.1.3　案例1——与执行绪进行

数据的互动 261

15.2　执行绪嵌套 263

15.2.1　案例2——单执行绪嵌套 263

15.2.2　案例3——多个子执行绪中的

数据互动 265

15.3　伺服器传送事件概述 267

15.4　伺服器传送事件的实现过程 267

15.4.1　案例4——检测浏览器是否

支持Server-Sent事件 267

15.4.2　案例5——使用EventSource

对象 268

15.4.3　案例6——编写伺服器端

代码 268

15.5　综合案例——创建WebWorker

计数器 269

15.6跟我学上机——伺服器传送事件

实战套用 270

15.7高手解惑 272

第16章构建离线的Web套用 273

16.1　HTML5离线Web套用概述 274

16.2　案例1——使用HTML5离线

Web套用API 274

16.2.1　检查浏览器的支持情况 274

16.2.2　搭建简单的离线应用程式 275

16.2.3　支持离线行为 275

16.2.4　Manifest档案 276

16.2.5　ApplicationCacheAPI 277

16.3　案例2——使用HTML5离线

Web套用构建套用 278

16.3.1　创建记录资源的manifest

档案 278

16.3.2　创建构成界面的HTML和

CSS 279

16.3.3　创建离线的JavaScript 279

16.3.4　检查ApplicationCache的

支持情况 281

16.3.5　为Update按钮添加

处理函式 281

16.3.6　添加Storage功能代码 282

16.3.7　添加离线事件处理程式 282

16.4　综合案例——离线定位跟蹤 283

16.5　高手解惑 287

第IV篇移动开发

第17章jQueryMobile基础 291

17.1认识jQueryMobile 292

17.2跨平台移动设备网页

jQueryMobile 292

17.2.1案例1——移动设备模拟器 292

17.2.2案例2——jQueryMobile的

安装 294

17.2.3案例3——jQueryMobile

网页的架构 296

17.3案例4——创建多页面的

jQueryMobile网页 297

17.4案例5——将页面作为对话框使用 298

17.5案例6——绚丽多彩的页面切换

效果 299

17.6高手解惑 301

第18章jQueryMobileUI组件 303

18.1套用UI组件 304

18.1.1案例1——表单组件 304

18.1.2案例2——按钮和组按钮 311

18.1.3案例3——按钮图示 313

18.1.4案例4——弹窗 315

18.2列表 316

18.2.1案例5——列表视图 316

18.2.2案例6——列表内容 319

18.2.3案例7——列表过滤 320

18.3面板和可摺叠块 322

18.3.1案例8——面板 322

18.3.2案例9——可摺叠块 323

18.4案例10——导航条 325

18.5综合案例——使用jQueryMobile

主题 328

18.6高手解惑 331

第19章jQueryMobile事件 333

19.1页面事件 334

19.1.1案例1——初始化事件 334

19.1.2案例2——外部页面载入

事件 336

19.1.3案例3——页面过渡事件 338

19.2触摸事件 340

19.2.1案例4——点击事件 340

19.2.2案例5——滑动事件 342

19.3案例6——滚屏事件 344

19.4案例7——定位事件 347

19.5高手解惑 349

第20章数据存储和读取技术 351

20.1WebSQLDatabase概述 352

20.2资料库的基本操作 352

20.3数据表的基本操作 353

20.4数据的基本操作 355

20.5综合案例——WebSQLDatabase的

综合操作技能 356

20.6高手解惑 359

第V篇综合案例实战

第21章製作休闲娱乐类网页 363

21.1　整体布局 364

21.1.1　设计分析 364

21.1.2　排版架构 365

21.2　模组组成 365

21.3　製作步骤 366

21.3.1　製作样式表 366

21.3.2　Logo与导航选单 373

21.3.3　搜寻条 374

21.3.4　左侧视频模组 374

21.3.5　评论模组 375

21.3.6　右侧热门推荐 377

21.3.7　底部模组 378

第22章製作企业门户类网页 381

22.1　整体布局 382

22.1.1　设计分析 382

22.1.2　排版架构 383

22.2　模组组成 383

22.3　製作步骤 384

22.3.1　样式表 384

22.3.2　网页头部 385

22.3.3　导航选单栏 386

22.3.4　中间主体第一栏 386

22.3.5　中间主体第二栏 390

22.3.6　中间主体第三栏 393

22.3.7　中间主体第四栏 398

22.3.8　中间主体第五栏 402

22.3.9　网页底部 407

第23章製作电子商务类网页 409

23.1　整体布局 410

23.1.1　设计分析 410

23.1.2　排版架构 411

23.2　模组组成 411

23.3　製作步骤 411

23.3.1　样式表 411

23.3.2　网页头部 419

23.3.3　主体第一通栏 420

23.3.4　主体第二通栏 420

23.3.5　主体第三通栏 421

23.3.6　网页底部 422

第24章开发连锁酒店订购系统 425

24.1连锁酒店订购的需求分析 426

24.2网站的结构 426

24.3连锁酒店订购系统的代码实现 427

24.3.1设计首页 427

24.3.2订购页面 428

24.3.3连锁分店页面 433

24.3.4查看订单页面 434

24.3.5酒店介绍页面 436