HTML 5+CSS3从入门到精通

作品简介

本书全面系统地讲解了HTML5+CSS3基础理论和实际运用技术，通过大量实例对HTML5+CSS3应用进行深入浅出的分析。全书主要包括两部分共19章，其中HTML5部分主要介绍了HTML5概述，创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。CSS3部分主要介绍了CSS3概述，CSS选择器，文本、字体与颜色，背景和边框，2D变形，设计动画，网页布局、用户界面以及CSS3的其他新特性。（视频内容参见本书附录）

李东博，编著

作品目录

• 前言Preface
• 本书特色
• 本书内容
• 本书读者
• 本书约定
• 关于我们
• 第1章　Web开发新时代
• 1.1　HTML5概述
• 1.1.1　HTML5新特性
• 1.1.2　HTML5组织
• 1.1.3　HTML5构成
• 1.2　HTML5设计原理
• 1.2.1　HTML开发历程
• 1.2.2　HTML5开发动力
• 1.2.3　HTML5设计理念
• 1.3　编写第一个HTML5页面
• 1.3.1　搭建上机练习环境
• 1.3.2　检测浏览器是否支持
• 1.3.3　使用HTML5编写简单的Web页面
• 1.4　HTML5页面的特征
• 1.4.1　使用HTML5结构化元素
• 1.4.2　使用CSS美化HTML5文档
• 第2章　从HTML、XHTML到HTML5
• 2.1　HTML基础
• 2.1.1　HTML简介
• 2.1.2　HTML特性
• 2.1.3　HTML结构
• 2.1.4　HTML语法
• 2.1.5　HTML标签
• 2.1.6　HTML属性
• 2.2　XHTML基础
• 2.2.1　XHTML结构
• 2.2.2　XHTML语法
• 2.2.3　XHTML类型
• 2.2.4　DTD解析
• 2.2.5　命名空间
• 2.3　HTML5基础
• 2.3.1　HTML5语法
• 2.3.2　HTML5元素
• 2.3.3　HTML5增加及废除的属性
• 2.3.4　HTML5全局属性
• 2.3.5　HTML5其他功能
• 第3章　创建HTML5文档
• 3.1　认识HTML5文档结构
• 3.2　HTML5元素分类
• 3.3　构建主体内容
• 3.3.1　标识文章
• 3.3.2　给内容分段
• 3.3.3　设计导航信息
• 3.3.4　设计辅助信息
• 3.3.5　设计微格式
• 3.3.6　添加发布日期
• 3.4　添加语义模块
• 3.4.1　添加标题块
• 3.4.2　给标题分组
• 3.4.3　添加脚注块
• 3.4.4　添加联系信息
• 3.5　综合实战：使用HTML5设计博客主页
• 3.5.1　设计大纲
• 3.5.2　设计样式
• 第4章　实战HTML5表单
• 4.1　新增的input输入类型
• 4.1.1　email类型的应用
• 4.1.2　url类型的应用
• 4.1.3　number类型的应用
• 4.1.4　range类型的应用
• 4.1.5　日期检出器类型的应用
• 4.1.6　search类型的应用
• 4.1.7　tel类型的应用
• 4.1.8　color类型的应用
• 4.2　新增的input属性
• 4.2.1　新增的autocomplete属性
• 4.2.2　新增的autofocus属性
• 4.2.3　新增的form属性
• 4.2.4　新增的表单重写属性
• 4.2.5　新增的height与width属性
• 4.2.6　新增的list属性
• 4.2.7　新增的min、max和step属性
• 4.2.8　新增的multiple属性
• 4.2.9　新增的pattern属性
• 4.2.10　新增的placeholder属性
• 4.2.11　新增的required属性
• 4.3　新增的form元素
• 4.3.1　新增的datalist元素
• 4.3.2　新增的keygen元素
• 4.3.3　新增的output元素
• 4.4　新增的form属性
• 4.4.1　新增的autocomplete属性
• 4.4.2　新增的novalidate属性
• 第5章　实战HTML5画布
• 5.1　认识HTML5 canvas元素
• 5.1.1　在页面中添加canvas元素
• 5.1.2　Canvas如何绘制图形
• 5.1.3　认识Canvas坐标
• 5.1.4　何时不用Canvas
• 5.1.5　如果浏览器不支持Canvas
• 5.1.6　检测浏览器支持
• 5.2　绘制简单图形
• 5.2.1　绘制直线
• 5.2.2　绘制矩形
• 5.2.3　绘制圆形
• 5.2.4　绘制三角形
• 5.2.5　清空画布
• 5.3　绘制贝塞尔曲线
• 5.3.1　绘制二次方贝塞尔曲线
• 5.3.2　绘制三次方贝塞尔曲线
• 5.4　图形的变换
• 5.4.1　保存与恢复Canvas状态
• 5.4.2　移动坐标空间
• 5.4.3　旋转坐标空间
• 5.4.4　缩放图形
• 5.4.5　矩阵变换
• 5.5　图形的组合与裁切
• 5.5.1　图形的组合
• 5.5.2　裁切路径
• 5.6　更多的颜色和样式选项
• 5.6.1　应用不同的线型
• 5.6.2　绘制线性渐变
• 5.6.3　绘制径向渐变
• 5.6.4　绘制图案
• 5.6.5　设置图形的透明度
• 5.6.6　创建阴影
• 5.7　绘制文字
• 5.7.1　绘制填充文字
• 5.7.2　文字相关属性
• 5.7.3　绘制轮廓文字
• 5.7.4　测量文字宽度
• 5.8　操作与使用图像
• 5.8.1　向Canvas中引入图像
• 5.8.2　改变图像大小
• 5.8.3　创建图像切片
• 第6章　HTML5音频与视频
• 6.1　HTML5多媒体技术概述
• 6.1.1　关于编解码器
• 6.1.2　音频编解码器
• 6.1.3　视频编解码器
• 6.2　浏览器支持概述
• 6.2.1　用JavaScript检测音频格式支持情况
• 6.2.2　用JavaScript检测视频格式支持情况
• 6.3　在HTML5中播放音频
• 6.3.1　认识audio元素
• 6.3.2　播放音频
• 6.4　在HTML5中播放视频
• 6.4.1　认识video元素
• 6.4.2　播放视频
• 6.5　音频与视频相关属性、方法与事件
• 6.5.1　音频与视频相关属性
• 6.5.2　音频与视频相关方法
• 6.5.3　音频与视频相关事件
• 6.6　综合实战
• 6.6.1　用脚本控制音乐播放
• 6.6.2　查看视频帧画面
• 第7章　Web存储
• 7.1　认识Web Storage
• 7.1.1　Cookie存储机制的优缺点
• 7.1.2　为什么要用Web Storage
• 7.1.3　Web Storage的优缺点
• 7.1.4　浏览器支持概述
• 7.2　使用Web Storage
• 7.2.1　检查浏览器的支持性
• 7.2.2　设置和获取数据
• 7.2.3　防止数据泄露
• 7.2.4　Web Storage的其他用法
• 7.2.5　Web Storage事件监测
• 7.2.6　实例1：设计网页皮肤
• 7.2.7　实例2：跟踪localStorage数据
• 7.2.8　实例3：设计计数器
• 7.2.9　综合应用：Web应用项目实时跟踪
• 7.3　Web SQL数据库
• 7.3.1　Web SQL数据库概述
• 7.3.2　使用Web SQL数据库
• 7.3.3　实例1：创建简单的本地数据库
• 7.3.4　实例2：批量存储本地数据
• 7.3.5　综合应用：Web Storage和Web SQL混合开发
• 第8章　离线应用
• 8.1　HTML5离线应用概述
• 8.1.1　为什么要学习HTML5离线应用
• 8.1.2　浏览器支持概述
• 8.2　HTML5离线应用详解
• 8.2.1　解析manifest文件
• 8.2.2　搭建离线应用程序
• 8.2.3　检查浏览器是否支持
• 8.2.4　离线缓存更新实现
• 8.2.5　JavaScript接口实现
• 8.2.6　离线存储事件监听
• 8.3　实战1：缓存首页
• 8.4　实战2：离线编辑内容
• 8.5　实战3：离线跟踪
• 第9章　Workers多线程处理
• 9.1　认识Web Workers
• 9.1.1　Web Workers概述
• 9.1.2　浏览器支持概述
• 9.1.3　熟悉Web Workers成员
• 9.2　使用Web Workers
• 9.2.1　检查浏览器支持性
• 9.2.2　创建Web Workers
• 9.2.3　与Web Workers通信
• 9.2.4　使用Web Workers上机练习
• 9.3　案例实战
• 9.3.1　使用多线程实现后台运算
• 9.3.2　在后台过滤值
• 9.3.3　多任务并发处理
• 9.3.4　在多线程之间通信
• 9.3.5　使用线程技术计算Fibonacci数列
• 9.3.6　使用多线程绘图
• 9.4　综合应用：模拟退火算法
• 9.4.1　认识模拟退火算法
• 9.4.2　编写应用主页面
• 9.4.3　编写worker.js
• 9.4.4　与Web Workers通信
• 第10章　Geolocation地理位置
• 10.1　位置信息概述
• 10.1.1　为什么要学习Geolocation
• 10.1.2　位置信息表示方式
• 10.1.3　位置信息来源
• 10.1.4　IP定位
• 10.1.5　GPS定位
• 10.1.6　Wi-Fi定位
• 10.1.7　手机定位
• 10.1.8　自定义定位
• 10.2　使用Geolocation API
• 10.2.1　检查浏览器支持性
• 10.2.2　获取当前地理位置
• 10.2.3　监视位置信息
• 10.2.4　停止获取位置信息
• 10.2.5　隐私保护
• 10.2.6　处理位置信息
• 10.2.7　使用position对象
• 10.3　案例实战
• 10.3.1　使用Google地图
• 10.3.2　跟踪行走速度
• 第11章　CSS3概述
• 11.1　回顾CSS
• 11.1.1　CSS发展简史
• 11.1.2　CSS 1.0和CSS 2.0概述
• 11.1.3　CSS与DIV标记之缘
• 11.1.4　CSS编码规范
• 11.2　了解CSS3新增特性
• 11.2.1　属性选择器
• 11.2.2　RBGA透明度
• 11.2.3　多栏布局
• 11.2.4　多背景图片
• 11.2.5　字符串溢出
• 11.2.6　块阴影与圆角阴影
• 11.2.7　圆角
• 11.2.8　边框图片
• 11.2.9　形变
• 11.3　CSS3前景展望
• 11.3.1　CSS3的应用范围
• 11.3.2　当前支持CSS3的浏览器
• 11.4　案例实战：设计漂亮的表单
• 第12章　CSS选择器
• 12.1　属性选择器
• 12.1.1　认识属性选择器
• 12.1.2　案例实战
• 12.2　结构伪类选择器
• 12.2.1　认识结构伪类选择器
• 12.2.2　案例实战
• 12.3　UI伪类选择器
• 12.3.1　认识常用UI伪类选择器
• 12.3.2　案例实战
• 12.4　其他选择器
• 第13章　文本、字体与颜色
• 13.1　设计文本阴影
• 13.1.1　定义text-shadow属性
• 13.1.2　应用阴影效果
• 13.1.3　综合实战：设计黑客网站首页
• 13.2　定义文本样式
• 13.2.1　文本样式简介
• 13.2.2　溢出文本
• 13.2.3　文本换行
• 13.3　设计颜色样式
• 13.3.1　使用RGBA颜色值
• 13.3.2　使用HSL颜色值
• 13.3.3　使用HSLA颜色值
• 13.3.4　定义opacity属性
• 13.3.5　定义transparent颜色值
• 第14章　背景和边框
• 14.1　设计多色边框
• 14.1.1　用法详解
• 14.1.2　案例实战
• 14.2　设计边框背景
• 14.2.1　用法详解
• 14.2.2　案例实战
• 14.3　设计圆角
• 14.3.1　用法详解
• 14.3.2　案例实战：设计椭圆图形
• 14.4　设计阴影
• 14.4.1　用法详解
• 14.4.2　案例实战：设计Windows7界面效果
• 14.5　设计背景
• 14.5.1　定义背景坐标
• 14.5.2　定义背景裁剪区域
• 14.5.3　定义背景图像大小
• 14.5.4　定义背景图像循环方式
• 14.5.5　定义多背景图像
• 第15章　2D变形
• 15.1　认识transform
• 15.2　2D变形
• 15.2.1　旋转动画
• 15.2.2　缩放动画
• 15.2.3　移动动画
• 15.2.4　倾斜动画
• 15.2.5　变形动画
• 15.2.6　案例实战：设计涂鸦墙
• 15.3　自定义变形
• 15.4　定义复杂变形
• 第16章　设计动画
• 16.1　平滑过渡
• 16.1.1　定义过渡属性
• 16.1.2　定义过渡时间
• 16.1.3　定义过渡延迟时间
• 16.1.4　定义过渡效果
• 16.1.5　案例实战：设计Mac OS导航器
• 16.2　3D动画
• 16.2.1　定义动画名称
• 16.2.2　定义动画时间
• 16.2.3　定义动画播放方式
• 16.2.4　定义动画延迟时间
• 16.2.5　定义动画播放次数
• 16.2.6　定义动画播放方向
• 16.2.7　案例实战：设计图片翻转特效
• 16.3　渐变效果
• 16.3.1　设计Webkit渐变
• 16.3.2　Webkit案例实战
• 16.3.3　设计Gecko渐变
• 16.3.4　Gecko案例实战
• 16.3.5　设计IE渐变
• 16.3.6　设计W3C渐变
• 16.4　案例综合实战
• 16.4.1　设计礼品盒
• 16.4.2　设计折叠面板
• 16.4.3　设计易拉罐
• 16.4.4　设计光盘滑动动画
• 16.4.5　设计下拉菜单
• 16.4.6　设计精致按钮
• 第17章　网页布局
• 17.1　设计多列布局
• 17.2　设置多列显示样式
• 17.2.1　定义列宽
• 17.2.2　定义列数
• 17.2.3　定义列间距
• 17.2.4　定义列边框样式
• 17.2.5　定义跨列显示
• 17.2.6　定义列高度
• 17.2.7　定义打印列
• 17.3　设计盒布局
• 17.4　设置盒布局格式
• 17.4.1　定义自适应宽度
• 17.4.2　定义列显示顺序
• 17.4.3　定义列排列方向
• 17.4.4　定义模块大小自适应
• 17.4.5　消除空白
• 17.4.6　定义对齐方式
• 17.5　综合实战：设计多列网页
• 第18章　用户界面
• 18.1　改变盒模型组成方式
• 18.2　调节元素尺寸
• 18.3　设计轮廓
• 18.3.1　定义轮廓线
• 18.3.2　定义轮廓线宽度
• 18.3.3　定义轮廓线样式
• 18.3.4　定义轮廓线颜色
• 18.3.5　定义轮廓线位移
• 18.4　设计导航
• 18.4.1　定义导航顺序
• 18.4.2　定义方向键控制顺序
• 18.5　添加显示内容
• 18.6　恢复默认样式
• 18.6.1　取消元素样式
• 18.6.2　慎用initial的情况
• 第19章　CSS3其他新特性
• 19.1　溢出处理
• 19.2　自定义字体类型
• 19.2.1　使用@font-face规则
• 19.2.2　开放字体
• 19.3　定义设备类型
• 19.3.1　认识Media Queries模块
• 19.3.2　认识@media规则
• 19.3.3　使用@media规则
• 19.3.4　在网站中应用@media规则
• 19.4　添加语音功能
• 19.5　设计倒影
• 附录