通过本书你能学到网页的框架制作、HTML 5的新增知识点、新型表单的制作方法、网页中的绘图方法、定位及拖放等；给网页添加样式的方法、动画的制作、网页的自适应、图片文字的各种流行样式的制作方法；为网页设计特效的方法、轮播图的制作方法原理、表单中的特效运用方法等一系列实用知识点；在介绍各个知识点时，采用了更为通俗易懂的描述方式，做到简洁而不空洞、详细而不烦琐，且都是在网页设计中经常使用的知识点；全书采用彩色印刷、简洁大方的排版方式，选用的实例也都非常精美；在保证学会的前提下，追求多方法操作，为了配合正文讲解，书中还总结了一些小知识板块，以帮助读者掌握更多的知识内容。

编辑推荐：

专治Web前端新手入门“水土不服”！12堂生动有趣的课程让HTML 5小白彻底爱上网页开发！

本书从问题出发，专业讲解，实用性超强；文字轻松，图解丰富，贴近实战；多方位互动，没有很长的代码；关键代码突出显示，让你更容易抓住重点。

目录

Chapter 01一起来学HTML 5

Warming Up HTML 5能做什么

Section 01 更强大的元素

01 一起来画图

02 一个实用的表单

03 路痴的救星

04 让图片可以拖拽

Section 02 更精美的样式

01 漂亮的文字

02 炫酷的图片

03 设置动画效果

04 自适应网页

Section 03 更炫酷的特效

01 banner是怎样制作的

02 消息的提示框

Test 课后作业

Chapter 02网页绘图如此有趣

Warming Up 强大的canvas

Section 01 潜心修行canvas

01 圆形表盘

Try it 制作圆形表盘

02 分针、时针和秒针

Try it 制作表针

03 时间刻度线

Try it 制作时间刻度线

04 看看几点了

Try it 计时开始

Section 02 图像好看的样式

01 让图片更加高级

Try it 修饰图片

02 观看图片的局部

Try it 图片的局部显示

03 给图片添加“蒙版”

Try it 微信聊天框效果

04 图片的立体显示

Try it 图片的阴影效果

Try it 文字、边框、图片的阴影效果

Section 03 图形的各种效果

01 螺旋形旋转

Try it 螺旋旋转图形

02 两种渐变设置

Try it 图形的渐变设置

03 当图形重叠时

Try it 组合图形的绘制

Test 课后作业

Chapter 03生成漂亮的表单

Warming Up 怎样让表单变漂亮

Section 01 一起制作表单

01 改变传统登录方式

Try it 制作一个登录表单

02 注册简洁大方型表单

Try it 制作简洁的注册型表单

Section 02 多姿多彩的表单

01 年月日的出现

Warming Up 怎样让表单变漂亮

Section 01 一起制作表单

01 改变传统登录方式

Try it 制作一个登录表单

02 注册简洁大方型表单

Try it 制作简洁的注册型表单

Section 02 多姿多彩的表单

01 年月日的出现

Chapter 04播放器的打开姿势

Warming Up 网页播放器

Section 01 看视频听音乐之前

01 了解浏览器支持情况

02 测试浏览器

Try it 亲测浏览器是否支持

Try it 嵌入插件作为备选解决不支持

Section 02 享受视听盛宴

01 沉浸在音乐的海洋

Try it 制作音乐播放器

02 打开视频的正确方式

Try it 制作视频播放器

03 了解播放器中的方法

Test 课后作业

Chapter 05定位自己的位置

Warming Up 一起学习定位知识

Section 01 有导航不迷路

01 学习经纬度知识

02 IP地址定位数据

03 GPS地理定位

Section 02 开始定位

01 获取地理位置

Try it 获取当前的地理位置

02 浏览器的支持情况

Try it 测试浏览器支持情况

Section 03 找到自己

01 保护用户的隐私

02 调用地图接口

Try it 调用谷歌地图

03 显示你的位置

Try it 定位自己的位置

Test 课后作业

Chapter 06 实用的上传方式

Warming Up 拖拽上传的应用

Section 01 调整图片位置

01 实现拖放的步骤

02 实现拖拽的方法

Section 02 拖放操作

01 拖放应用

Try it 最简单的拖放操作

02 拖放列表

Try it 制作拖放列表

03 拖拽上传文件

Try it 附件的拖拽上传

Section 03 离线知识

01 支持离线行为

Try it 演示网页是否在线

02 检测浏览器支持与否

Try it 检测浏览器是否支持

03 Web Workers的简单应用

Test 课后作业

Chapter 07开启样式的大门

Warming Up 让网页多姿多彩

Section 01 给样式作修饰

01 选择元素进行样式设置

Try it 需要重点标注的句子

02 设置一类元素的样式

Try it 给所有元素设置相同样式

Try it 使用什么方法能制作出相同的效

03 属性也可以设置样式

Try it 设置其中一张图片的属性

Section 02 选择性地修饰

01 新版本与旧版本的比较

02 让设计更高级

Try it 单击链接发生颜色变化

Try it 设置多彩的输入框

Try it 单击时按钮颜色发生变化

03 结构性伪类的用法

Try it 变化的字体颜色

04 伪类选择器

Try it 给第一句诗添加背景颜色

Try it 设置首字母的大小写

Try it 运用其他方法做出图片效果

Test 课后作业

Chapter 08网页中的“动画片”

Warming Up 怎样让元素动起来

Section 01 过渡知识

01 与用户的互动

Try it 让元素不再呆板

02 变化出更多样式

Try it 多种变化效果

03 模拟DOCK的缩放特效

Try it 制作一个有导航的电脑桌面

Section 02 实现动画

01 动起来的关键

Try it 一起荡秋千

02 制作旋转的圈圈

Try it 制作loading图标

Try it 制作loading进度条

03 使用放大镜查看

Try it 使用放大镜查看图片

Test 课后作业

Chapter 09让浏览更轻松

Warming Up 三站合一

Section 01 自适应效果

01 多媒体查询能做什么

02 窗口大小控制颜色

Try it 网页背景随浏览器大小改变而改变

03 自适应导航栏

Try it 制作流行的网页导航栏

Section 02 与用户的互动

01 制作一张电子报纸

Try it 多列布局的用法

02 Photoshop中的滤镜效果

Try it ps一张美女图片

03 修饰图片

Try it 修饰图片的轮廓

04 开关按钮样式

Try it 用最简单的方法制作按钮

Test 课后作业

Chapter 10重要的网页元素

Warming Up 变花样的文字和边框

Section 01 文字让网页更突出

01 文字的阴影效果

Try it 让文字显得立体

Try it 用阴影增加前景色与背景色的对比

02 更多的文字效果

Try it 制作更多文字效果

03 文本溢出的设置

Try it 制作文本的溢出效果

04 英文单词的换行

Try it 长单词的换行

Try it 拆分单词

Section 02 颜色让网页更好看

01 多变的颜色

Try it 制作颜色渐变

Try it 制作一颗闪闪的星星

02 色彩的模式

Try it 制作一个HsL颜色模式表

03 扩展的色彩模式

Try it 制作颜色的不透明度

Section 03 动作让网页更高级

01 图片的3D旋转

Try it 制作图片的3D旋转

02 高级图标

Try it 制作扁平化的图标

Test 课后作业

Chapter11特效是用什么做的

Warming Up Javascript怎样嵌入

Section 01 流行的网页样式

01 JavaScript的作用

02 JavaScript的特点

03 JavaScript的应用

Try it 单击按钮出现文字

Section 02 炫酷特效的前提

01 掌握一些类型

02 了解一些语句

Try it 单击按钮出现问候语

Try it 用时间点来设置问候语

Try it 让代码循环计算5次

Try it 一直循环代码

03 应用哪些事件

04 事件的句柄

05 怎样处理事件

Test 课后作业

Chapter12炫酷效果应用方向

Warming Up 怎样制作滚动banner

Section 01 这个函数不一样

01 函数定义

Try it 单击按钮显示“你好”

Try it 单击按钮出现欢迎词

Try it 制作一个计算器

02 函数参数

Try it 给参数设置默认值

Try it 设置查找值的函数

03 函数调用

Section 02 表单中的应用

01 按钮对象

Try it 设置表单的按钮对象

02 复选框对象

Try it 可以全选的复选框

03 列表框对象

Try it 设置列表框对象

04 增加列表框

Try it 与用户的互动效果

05 表单中的时间

Try it 调用时间

Section 03 网页中的应用

01 轮播图效果

Try it 制作一个网页的轮播图

02 字体闪烁效果

Try it 制作文字的闪烁效果

03 鼠标滑过效果

Try it 制作鼠标滑过图片的震动效果

Section 04 网页中的特效

01 显示网页停留时间

Try it 显示所在网页停留的时间

02 制作定时关闭窗口

Try it 让窗口在设定好的时间自动关闭

Test 课后作业