HTML5应用开发与实践

目　录

第1章　HTML5概述　11．1　HTML5简介　11．1．1　HTML发展历程　11．1．2　HTML开发组织　21．1．3　HTML5的新特性　21．2　HTML的标签构成　31．2．1　HTML标签概述　31．2．2　开始标签　41．2．3　头部标签

第2章　HTML5的元素与属性　122．1　HTML5的语法变化　122．1．1　HTML5中的标记方法　122．1．2　HTML5与之前版本的不同　132．2　新增的元素和废除的元素　142．2．1　新增的结构元素　142．2．2　新增的行内(inline)语义元素　152．2．3　新增的块级(block)语义元素　152．2．4　新增的input元素的类型　162．2．5　新增的多媒体元素与交互性元素　162．2．6　废除的元素　172．3　新增的属性和废除的属性　182．3．1　新增的属性　182．3．2　废除的属性　202．4　全局属性　222．4．1　designMode属性　222．4．2　hidden属性　222．4．3　contentEditable属性　222．4．4　tabindex属性　232．4．5　spellcheck属性　232．5　综合实例——检查单词的拼写情况　24知识点提炼　24习题　24

第3章　HTML5表单　253．1　表单概述　253．2　表单的基本元素　263．2．1　表单标记及其属性　263．2．2　表单基本元素　293．3　表单新增元素　403．3．1　新增表单元素与属性　403．3．2　验证表单　463．3．3　新增和改良的页面元素　483．4　综合实例——search搜索类型的input元素　55知识点提炼　56习题　56

第4章　文件与拖放　584．1　选择文件　584．1．1　FileList对象与file对象　584．1．2　Blob对象的属性　594．1．3　通过类型过滤文件　604．2　使用FileReader对象读取文件　624．2．1　检测浏览器对FileReader对象的支持　624．2．2　FileReader对象的方法　624．2．3　实现图片的预览　624．2．4　文本文件的读取　644．2．5　FileReader对象中的事件　654．3　拖放API的使用　664．3．1　实现拖放的步骤　664．3．2　拖放实例　674．4　dataTransfer对象　694．4．1　设置拖放效果　694．4．2　设置拖放图标　704．5　综合实例——使用拖放API将商品拖入购物车　71知识点提炼　73习题　73

第5章　绘制图形　745．1　canvas基础　745．1．1　canvas元素简介　745．1．2　插入canvas元素　745．1．3　绘制矩形实例　765．2　使用路径绘制圆形　775．2．1　绘制圆形　775．2．2　绘制火柴人　785．2．3　绘制贝塞尔曲线　805．3　运用样式与颜色　825．3．1　fillStyle 和 strokeStyle属性　825．3．2　globalAlpha属性　845．3．3　线型Line styles　855．4　实现图形的变形　875．4．1　坐标的变换　875．4．2　矩阵变换　885．5　绘制渐变图形　915．5．1　绘制线性渐变　915．5．2　绘制径向渐变　925．6　绘制阴影和组合图形　935．6．1　绘制阴影　935．6．2　绘制组合图形　945．7　绘制文字　965．8　应用图像　975．8．1　绘制图像　975．8．2　图像的局部放大　995．8．3　图像平铺　1005．8．4　图像裁剪　1025．8．5　处理像素　1025．9　保存与恢复状态　1035．10　文件的保存　1045．11　使用画布绘制动画　1045．12　综合实例——绘制桌面时钟　105知识点提炼　108习题　108

第6章　HTML5中的多媒体　1096．1　HTML5页面中的多媒体　1096．2　多媒体元素的属性　1106．3　多媒体元素的方法　1146．3．1　媒体播放时的方法　1146．3．2　canPlayType方法　1156．4　多媒体元素的事件　1166．4．1　事件处理　1166．4．2　事件介绍　1166．5　综合实例——用timeupdate事件动态显示媒体文件播放时间　117知识点提炼　119习题　119

第7章　HTML5的数据存储　1207．1　Web Storage　1207．1．1　Web Storage简介　1207．1．2　WebStorage的API　1217．1．3　两种不同存储类型的实例——计数器　1227．1．4　JSON对象的存储实例——用户信息卡　1247．2　Web SQL数据库　1267．2．1　Web SQL数据库简介　1267．2．2　Web SQL Database API的使用　1267．3　跨文档消息通信　1287．3．1　postMessageAPI的使用　1287．3．2　跨文档消息传输　1287．4　综合实例——简单的Web留言本　130知识点提炼　132习题　132

第8章　离线Web应用和地理定位　1338．1　HTML5离线Web应用　1338．1．1　HTML5离线Web应用概述　1338．1．2　创建HTML5离线应用　1358．1．3　浏览器与服务器的交互　1378．1．4　applicationCache对象　1388．2　获取地理位置　1428．2．1　Geolocation API概述　1428．2．2　position对象　1448．3　综合实例——在页面上使用google地图　146知识点提炼　147习题　148

第9章　CSS3基础　1499．1　CSS3概述　1499．2　CSS3新特性　1509．3　CSS3选择器　1519．3．1　选择器概述　1519．3．2　属性选择器　1529．3．3　结构性伪类选择器　1549．3．4　UI元素状态伪类选择器　1619．3．5　通用兄弟元素选择器　1669．4　综合实例——生动的列表导航　167知识点提炼　170习题　171

第10章　CSS字体与文本相关属性　17210．1　给文字添加阴影——text-shadow属性　17210．1．1　text-shadow属性的使用方法　17210．1．2　指定多个阴影　17410．2　文本相关属性　17410．2．1　文本自动换行：word-break　17410．2．2　长单词和URL地址换行　17510．3　CSS 3新增的服务器字体　17610．3．1　使用服务器字体　17610．3．2　定义粗体、斜体字　17710．3．3　优先使用客户端字体　17910．4　使用font-size-adjust属性微调字体大小　18010．4．1　字体不同导致文字大小的不同　18010．4．2　font-size-adjust属性的使用方法　18110．4．3　font-size-adjust属性的使用示例　18110．5　综合实例——设计立体文本　182知识点提炼　183习题　183

第11章　CSS3美化背景与边框　18411．1　设置背景　18411．1．1　设置背景颜色　18411．1．2　设置背景图片　18611．1．3　CSS 3新增的与背景相关的属性　18911．2　边框设置　19311．2．1　设置边框的线宽　19311．2．2　设置边框的样式　19511．2．3　设置边框的颜色　19611．2．4　边框综合属性　19711．2．5　CSS 3新增的与边框相关的属性　19811．3　内外边距的相关属性　20111．3．1　设置内边距　20111．3．2　设置外边距　20211．4　综合实例——设计企业门户网站首页　203知识点提炼　205习题　205

第12章　变形与动画相关属性　20612．1　CSS变形(Transformation)　20612．1．1　变形基础——transform属性　20612．1．2　旋转动画——rotate()函数　20712．1．3　缩放动画——scale()函数　20812．1．4　移动动画——translate()函数　21012．1．5　倾斜动画——skew()函数　21112．1．6　变形原点——transform-origin属性　21312．2　CSS过渡——transition属性　21412．2．1　设置过渡的CSS属性——transition-property属性　21412．2．2　设置过渡的时间——transition-duration属性　21612．2．3　设置过渡延迟时间——transition-delay属性　21712．2．4　设置过渡效果——transition-timing-function属性　21812．3　CSS动画——animation属性　22012．4　综合实例——模拟进度条效果　223知识点提炼　224习题　225

第13章　JavaScript概述　22613．1　JavaScript概貌　22613．1．1　JavaScript的历史起源　22613．1．2　JavaScript的主要特点　22713．1．3　JavaScript成功案例　22713．2　搭建JavaScript开发环境　22913．2．1　硬件要求　22913．2．2　软件要求　22913．2．3　浏览器对JavaScript的支持　23013．3　编写JavaScript的工具　23113．3．1　Adobe Dreamweaver　23113．3．2　Microsoft FrontPage　23213．4　JavaScript在HTML中的使用　23213．4．1　在页面中直接嵌入JavaScript　23213．4．2　链接外部JavaScript　23313．5　综合实例——用JS输出中文字符串　233知识点提炼　234习题　234

第14章　JavaScript语言基础　23514．1　JavaScript数据结构　23514．1．1　标识符　23514．1．2　关键字　23614．1．3　常量　23614．1．4　变量　23614．2　数据类型　23814．2．1　数字型数据　23814．2．2　字符串型数据　23914．2．3　布尔型数据　24014．2．4　特殊数据类型　24014．2．5　数据类型的转换规则　24114．3　运算符与表达式　24214．3．1　算术运算符　24314．3．2　比较运算符　24314．3．3　赋值运算符　24414．3．4　字符串运算符　24514．3．5　布尔运算符　24514．3．6　条件运算符　24514．3．7　其他运算符　24614．3．8　运算符优先级　24714．3．9　表达式　24814．4　流程控制语句　24814．4．1　条件控制语句　24814．4．2　循环控制语句　25514．4．3　跳转语句　25714．5　函数　25914．5．1　函数的定义　25914．5．2　函数的调用　26014．5．3　几种特殊的函数　26314．6　综合实例——将长数字分位显示　268知识点提炼　269习题　269

第15章　JavaScript内置对象　27115．1　字符串对象String　27115．1．1　search方法　27115．1．2　match方法　27215．1．3　split方法　27215．1．4　replace方法　27315．2　常用的数值处理对象　27315．2．1　Math对象　27315．2．2　Number对象　27515．2．3　Boolean对象　27915．2．4　Date对象　28015．3　数组对象　28315．3．1　数组对象Array　28315．3．2　常用的数组操作方法　28615．3．3　获取数组中的某段数组元素　28915．3．4　将数组转换成字符串　29015．4　综合实例——使用数组存储商品信息　291知识点提炼　291习题　292

第16章　JavaScript对象编程与事件处理　29316．1　文档(document)对象　29316．1．1　文档对象的常用属性、方法与事件　29416．1．2　Document对象的应用　29616．2　窗口(window)对象　30216．2．1　窗口对象的常用属性与方法　30216．2．2　控制窗口　30416．2．3　窗口事件　31116．3　DOM对象　31216．3．1　DOM概述　31216．3．2　DOM对象节点属性　31316．3．3　操作节点　31816．3．4　获取文档中的指定元素　32416．4　事件处理　32516．4．1　事件与事件处理概述　32516．4．2　DOM事件模型　32816．4．3　表单相关事件　33116．4．4　鼠标键盘事件　33516．4．5　页面事件　33916．5　综合实例——动态设置网页的标题栏　341知识点提炼　342习题　343

第17章　HTML5、CSS3与JavaScript综合应用　34417．1　综合实例 1——文字升降特效　34417．2　综合实例 2——闪烁的图片　34517．3　综合实例 3——左右移动的图片　34617．4　综合实例 4——自动隐藏菜单　34817．5　综合实例 5——树状导航菜单　35117．6　综合实例 6——颜色选择器　353

第18章　课程设计——旅游信息网前台　35718．1　需求分析　35718．2　系统设计　35718．2．1　系统目标　35718．2．2　网站预览　35718．3　开发及运行环境　35918．4　关键技术　36018．4．1　网站主题结构设计　36018．4．2　HTML5结构元素的使用　36018．5　网站公共部分设计　36118．5．1　设计网站公共header　36118．5．2　设计网站公共footer　36718．6　网站主页设计　36718．6．1　显示网站介绍及相关图片　36818．6．2　主页左侧导航的实现　36918．7　“留下足迹”页面设计　37118．7．1　播放音乐　37218．7．2　添加留言功能的实现　37218．8　课程设计总结　374