HTML 5与CSS 3网页设计入门与提高

第1章 HTML快速入门 1

1.1 HTML的概念 2

1.2 HTML的文档结构 3

1.2.1 文档编写规范 3

1.2.2 文档声明标记 4

1.2.3 标记文档开始 5

1.2.4 标记文档头部 6

1.2.5 标记文档主体 6

1.2.6 编写注意事项 6

1.2.7 实战——创建第一个HTML文档 7

1.3 文档基础标记 9

1.3.1 元信息标记 9

1.3.2 字体标记 10

1.3.3 超链接标记 14

1.3.4 水平线标记 16

1.3.5 段落标记 17

1.4 列表标记 19

1.4.1 编号列表 19

1.4.2 项目符号列表 21

1.4.3 说明项目列表 21

1.5 表格标记 22

1.5.1 表格的结构 22

1.5.2 表格的属性 23

1.6 表单标记 27

1.6.1 创建表单 27

1.6.2 创建表单元素 27

1.7 实战——制作卡通类页面 30

1.8 本章习题 32

第2章 CSS基础 35

2.1 CSS概述 36

2.1.1 CSS简介 36

2.1.2 CSS的使用 37

2.2 CSS基础语法 40

2.3 CSS高级语法 41

2.4 CSS的常用样式 43

2.4.1 CSS常用样式概述 43

2.4.2 背景样式 44

2.4.3 文本样式 47

2.4.4 字体样式 53

2.4.5 链接样式 58

2.4.6 列表样式 59

2.4.7 表格和轮廓 63

2.4.8 其他样式 67

2.5 实战——诗词鉴赏页面设计 71

2.6 本章习题 73

第3章 JavaScript脚本语言 75

3.1 JavaScript脚本概述 76

3.2 JavaScript的基本语法 77

3.2.1 简单的JavaScript例子 77

3.2.2 JavaScript语句 79

3.3 JavaScript变量 81

3.3.1 变量 81

3.3.2 数据类型 82

3.4 运算符 86

3.5 JavaScript语句的类型 87

3.5.1 选择语句 88

3.5.2 循环语句 92

3.5.3 跳转语句 95

3.5.4 异常处理语句 96

3.6 对象 97

3.6.1 对象概述 97

3.6.2 函数 99

3.6.3 构造函数 100

3.7 常用对象 101

3.7.1 Array对象 101

3.7.2 Document对象 102

3.7.3 HTML DOM Event对象 103

3.7.4 Window对象 104

3.8 实战——长方体几何计算 105

3.9 本章习题 106

第4章 网页设计实战案例 109

4.1 网页设计流程 110

4.2 网页设计工具 110

4.2.1 记事本 111

4.2.2 FrontPage 111

4.2.3 Dreamweaver 112

4.2.4 实战——制作个人主页 113

4.3 网页布局 117

4.3.1 常见的网页布局结构 117

4.3.2 设计居中布局 120

4.3.3 设计自适应布局 121

4.3.4 DIV+CSS重构网站布局 122

4.4 布局理论 124

4.4.1 区块的概念 124

4.4.2 定义区块 125

4.4.3 定位 126

4.4.4 实战——具有固定位置的广告框 127

4.4.5 空白边叠加 129

4.5 实战——制作网页导航条 130

4.6 实战——制作文本环绕图片 132

4.7 实战——制作三栏博客页面 133

4.8 CSS设计规范 139

4.9 本章习题 141

第5章 认识HTML 5 143

5.1 了解HTML 5 144

5.1.1 HTML 5的发展历史 144

5.1.2 开发HTML 5的三大组织 144

5.1.3 使用HTML 5的五大原因 145

5.1.4 HTML 5的未来发展趋势 147

5.2 HTML 5的语法 148

5.2.1 文档媒体类型 148

5.2.2 编码类型 149

5.2.3 DOCTYPE声明 150

5.2.4 其他内容 150

5.3 HTML 5表单 150

5.3.1 HTML 5输入类型 150

5.3.2 HTML 5表单元素 152

5.3.3 HTML 5表单属性 152

5.4 HTML 5的元素 154

5.4.1 新增的元素 154

5.4.2 更改元素 155

5.4.3 废除的元素 156

5.5 HTML 5的属性 157

5.5.1 标准属性 157

5.5.2 事件属性 158

5.6 支持HTML 5的浏览器 161

5.6.1 浏览器内核 161

5.6.2 常用的浏览器 162

5.7 实战——Chrome浏览器的安装和测试 164

5.8 本章习题 166

第6章 HTML 5快速入门 169

6.1 结构元素 170

6.1.1 header元素 170

6.1.2 article元素 171

6.1.3 section元素 173

6.1.4 nav元素 174

6.1.5 aside元素 175

6.1.6 footer元素 177

6.2 分组元素 177

6.2.1 hgroup元素 177

6.2.2 figcaption和figure 178

6.3 文本语义元素 179

6.3.1 mark元素 179

6.3.2 ruby、rt和rp元素 180

6.3.3 time元素 180

6.3.4 wbr元素 181

6.4 交互元素 181

6.4.1 meter元素 181

6.4.2 progress元素 183

6.4.3 details元素 185

6.4.4 summary元素 185

6.5 音频和视频元素 186

6.5.1 video元素 186

6.5.2 audio元素 191

6.6 标准属性 193

6.6.1 hidden属性 193

6.6.2 contenteditable属性 194

6.6.3 spellcheck属性 195

6.7 实战——使用HTML 5元素构建网页 196

6.8 本章习题 199

第7章 HTML 5新型表单的使用 201

7.1 了解表单 202

7.1.1 表单概述 202

7.1.2 表单的基本结构 203

7.2 表单元素 204

7.2.1 datalist元素 204

7.2.2 keygen元素 205

7.2.3 output元素 206

7.3 输入类型 207

7.3.1 email类型 207

7.3.2 url类型 208

7.3.3 number类型 209

7.3.4 range类型 210

7.3.5 datepickers类型 211

7.3.6 search类型 212

7.3.7 color类型 213

7.3.8 tel类型 214

7.4 表单属性 214

7.4.1 表单属性 214

7.4.2 input属性 217

7.5 实战——修改用户个人资料 223

7.6 表单验证 225

7.6.1 表单验证概述 226

7.6.2 checkValidity()验证 226

7.6.3 setCustomValidity()验证 227

7.7 本章习题 229

第8章 HTML 5操作页面图形 231

8.1 了解canvas元素 232

8.1.1 canvas历史 232

8.1.2 canvas元素 232

8.1.3 CSS和canvas 233

8.1.4 Canvas API 233

8.1.5 浏览器支持情况 233

8.2 绘制文本 235

8.2.1 绘制普通文本 235

8.2.2 绘制阴影文本 237

8.3 绘制矩形 239

8.3.1 用rect()方法绘制 239

8.3.2 用fillRect()方法绘制 240

8.3.3 用strokeRect()方法绘制 241

8.3.4 用clearRect()方法清除 241

8.4 绘制路径 242

8.4.1 路径绘图方法 242

8.4.2 绘制基本图形 243

8.4.3 绘制圆形和扇形 245

8.4.4 贝塞尔曲线 247

8.5 图形变换和组合 249

8.5.1 图形变形 249

8.5.2 矩阵变换 252

8.5.3 图形组合 254

8.6 绘制颜色渐变 256

8.6.1 线性渐变 256

8.6.2 径向渐变 258

8.7 图片的常用操作 259

8.7.1 drawImage()绘制 259

8.7.2 createPattern()方法 261

8.7.3 clip()方法 263

8.8 实现动画特效 264

8.8.1 了解动画 264

8.8.2 实战——绘制动态闪动线条 265

8.9 本章习题 266

第9章 HTML 5的其他新特性 269

9.1 文件新增特性 270

9.1.1 获取多个文件的信息 270

9.1.2 新增的FileReader接口简介 272

9.1.3 使用FileReader接口读取

文件 273

9.1.4 使用FileReader接口监听事件 276

9.1.5 文件读取时的异常处理 278

9.1.6 实战——实现文件上传 279

9.2 拖放功能 282

9.2.1 拖放API简介 282

9.2.2 拖放对象的方法和属性 283

9.2.3 实战——模拟图片删除 285

9.3 新增的客户端数据存储特性 288

9.3.1 客户端存储对象简介 288

9.3.2 操作本地数据 289

9.3.3 实战——以JSON方式存取数据 293

9.4 新增的本地数据库特性 295

9.4.1 HTML 5本地数据库简介 296

9.4.2 数据库操作API 296

9.4.3 实战——实现基于数据库的收藏夹管理 297

9.5 跨文档传输信息 301

9.6 多线程 303

9.6.1 认识HTML 5多线程 304

9.6.2 实战——Worker对象的简单应用 305

9.7 获取位置信息 307

9.7.1 认识地图API 307

9.7.2 Position对象 308

9.8 HTML 5的离线缓存特性 310

9.9 本章习题 312

第10章 CSS 3快速入门 315

10.1 了解CSS 3 316

10.1.1 CSS 3发展概述 316

10.1.2 CSS 3的优缺点 316

10.1.3 浏览器支持情况 317

10.2 CSS 3的新增颜色 319

10.2.1 HSL属性 319

10.2.2 HSLA属性 321

10.2.3 RGBA属性 323

10.2.4 Opacity属性 324

10.3 CSS 3新增的选择器 326

10.3.1 属性选择器 327

10.3.2 结构化伪类选择器 328

10.3.3 目标伪类选择器 329

10.3.4 UI元素状态伪类选择器 329

10.3.5 否定伪类 329

10.3.6 通用兄弟选择器 330

10.4 CSS 3的新增属性 330

10.4.1 边框属性 330

10.4.2 背景属性 331

10.4.3 文本属性 331

10.4.4 盒模型属性 331

10.4.5 用户界面属性 332

10.4.6 新增的其他属性 332

10.5 实战——以CSS 3属性制作漂亮按钮 333

10.6 本章习题 336

第11章 CSS 3新增的选择器 337

11.1 属性选择器 338

11.1.1 E[att^=value]选择器 338

11.1.2 E[att$=value]选择器 340

11.1.3 E[att*=value]选择器 340

11.2 结构化伪类选择器 341

11.2.1 E:root选择器 341

11.2.2 E:nth-child(n)选择器 341

11.2.3 E:nth-last-child(n)选择器 342

11.2.4 E:nth-of-type(n)选择器 343

11.2.5 E:nth-last-of-type(n)选择器 344

11.2.6 E:last-child选择器 345

11.2.7 E:first-of-type选择器 345

11.2.8 其他选择器 346

11.3 目标伪类选择器 346

11.4 UI元素状态伪类选择器 347

11.4.1 常用的选择器 347

11.4.2 E::selection选择器 349

11.5 否定伪类选择器 350

11.6 通用兄弟选择器 350

11.7 实战——设计直观的表单页面 351

11.8 本章习题 354

第12章 CSS 3页面美化样式 357

12.1 CSS 3页面美化 358

12.2 文本样式 358

12.2.1 新增样式 358

12.2.2 新增样式的用法 359

12.3 字体样式 363

12.4 背景样式 366

12.4.1 background-clip属性 366

12.4.2 background-origin属性 366

12.4.3 background-size属性 366

12.5 边框样式 368

12.5.1 box-shadow属性 369

12.5.2 border-image属性 370

12.5.3 border-radius属性 372

12.6 实战——表格的艺术 374

12.7 本章习题 376

第13章 CSS 3页面布局样式 377

13.1 新增的多列布局属性 378

13.1.1 columns属性 378

13.1.2 column-width属性 379

13.1.3 column-count属性 380

13.1.4 column-gap属性 381

13.1.5 column-rule属性 381

13.1.6 column-span属性 383

13.1.7 column-fill属性 383

13.2 新增的盒模型属性 383

13.2.1 box-orient属性 384

13.2.2 box-direction属性 385

13.2.3 box-ordinal-group属性 386

13.2.4 box-flex属性 387

13.2.5 box-flex-group属性 389

13.2.6 box-pack属性 389

13.2.7 box-align属性 391

13.2.8 box-lines属性 392

13.3 新增的界面布局属性 393

13.3.1 box-sizing属性 393

13.3.2 resize属性 395

13.3.3 zoom属性 396

13.3.4 outline-offset属性 397

13.3.5 nav-index属性 398

13.4 本章习题 398

第14章 CSS 3动画特效 401

14.1 渐变特效 402

14.1.1 线性渐变 402

14.1.2 径向渐变 406

14.2 转换 408

14.2.1 2D转换 408

14.2.2 3D转换 413

14.3 过渡 416

14.3.1 常用的单个属性 416

14.3.2 transition的简写属性 418

14.4 动画 419

14.4.1 动画相关属性 419

14.4.2 @keyframes 420

14.5 实战——制作动画海报圈 421

14.6 本章习题 425

第15章 HTML 5 + CSS 3页面案例 427

15.1 JavaScript经典贪吃蛇 428

15.1.1 案例分析 428

15.1.2 JavaScript实现 428

15.1.3 页面美化 431

15.2 jQuery导航特效 432

15.2.1 jQuery简介 432

15.2.2 jQuery实现导航特效 433

15.3 CSS 3图片特效 436

15.4 其他页面效果 439

15.4.1 页面悬浮广告 439

15.4.2 鼠标特效 441

本书从初学者的角度出发，由浅入深、循序渐进地介绍了HTML 5和CSS 3应用与开发的相关知识，书中提供了大量操作HTML 5和CSS 3新增功能的示例，还提供了用于演练的实战和上机练习。本书共分为15章，主要内容包括HTML文档结构、文档基础标记、列表标记、表格标记和表单标记，CSS发展历史、基本语法和常用样式，JavaScript脚本的基本语法、变量、运算符、语句类型、对象和函数，网页设计流程和网页布局，HTML 5的发展历史、使用HTML 5的原因、HTML 5的语法，新增的结构元素、分组元素、文本语义元素、交互元素、音频和视频元素、标准属性，新增表单元素、新增输入类型、新增表单属性、表单验证，canvas元素及其API绘图，文件操作和文件拖放、客户端存储数据、本地数据库、跨文档传输信息、多线程、获取位置信息，CSS 3新增颜色、新增选择器、新增文件属性、字体属性、背景属性、边框属性、盒模型、页面布局，以及渐变、转换、过渡和动画等内容。在本书最后一章利用HTML 5和CSS 3等技术实现一个案例作为结束。本书几乎涉及HTML 5和CSS 3应用与开发的所有重要知识，适合所有的HTML 5和CSS 3初学者进行学习。另外，对于大中专和培训班的学生来说，本书更是一本不可多得的教材。