《HTML5网页开发实例详解》目录

2023年6月21日发(作者：)

《HTML5⽹页开发实例详解》⽬录第⼀篇 从宏观上认识HTML 5讲述了HTML 5引发的Web⾰命、HTML 5的整体特性、HTML 5相关概念和框架和开发环境搭建。第1章 HTML 5引发的Web⾰命1.1 你是不是真的了解HTML 51.1.1 通过W3C认识HTML 5的发展史1.1.2 HTML 5、HTML4、XHTML的区别1.1.3 什么⼈应该学HTML 51.1.4 ⼀个图告诉你如何学习HTML 51.2 浏览器之争1.2.1 说说这些常见的浏览器1.2.2 浏览器的兼容烦恼与策略1.2.3 给你的浏览器打个分1.3 学习制作⼀个简单的HTML 5页⾯1.3.1 搭建开发HTML 5的浏览器环境1.3.2 检测浏览器是否⽀持HTML 5标签1.4 常见问题1.4.1 学好HTML 5要学好Java嘛？1.4.2 谁是HTML 5新规则下的牺牲品？1.4.3 HTML 5是否有未来？1.4.4 HTML 5在移动应⽤开发是否有前景？1.5 本章⼩结第2章 HTML 5的整体特性2.1 HTML 5的元素们2.1.1 最新的交互元素——内容交互、菜单交互、状态交互2.1.2 HTML 5页⾯结构2.1.3 DOCTYPE和字符集2.1.4 其他标签元素2.2 检测HTML 5特性Modernizr库2.2.1 Modernizr库是什么2.2.2 使⽤Modernizr库提供的⽅法检测浏览器的各项指标2.3 表单和⽂件2.3.1 input元素的新增类型2.3.2 input元素新增的公⽤属性2.3.3 新增表单元素2.3.4 表单新增的验证⽅法2.3.5 File对象2.3.6 FileSystem接⼝2.3.7 jQueryhtml5Validate HTML5表单验证插件2.4 图形绘制2.4.1 Canvas是什么2.4.2 什么情况下⽤Canvas2.4.3 检测浏览器对Canvas的⽀持情况2.4.4 在页⾯中加⼊Canvas2.4.5 SVG是什么2.4.6 SVG的使⽤2.4.7 WebGL是什么2.4.8 WebGL的使⽤2.4.9 图形库2.5 ⾳频视频2.5.1 ⾳频和视频编码解码器2.5.2 使⽤脚本控制播放2.5.3 audio元素和video元素的浏览器⽀持情况2.5.4 ⾳视频的实时通信2.6 地理位置2.6.1 纬度和经度坐标2.6.2 有哪些定位数据2.6.3 怎么保护⾃⼰的隐私2.6.4 构建地理位置应⽤2.7 拖放2.7.1 Datatransfer对象2.7.2 拖放的事件监听2.7.3 看看这些带拖放功能的⽹站2.7.4 构建⽹页的拖放应⽤2.8 Web存储2.8.1 设置和获取数据2.8.2 LocalStorage与SessionStorage2.8.3 ⽹站本地存储兼容性⽅案2.8.4 如何在实际开发中使⽤本地存储2.9 HTML 5的通信2.9.1 PostMessage API2.9.2 XMLHttpRequest Level 22.9.3 WebSocketAPI2.9.4 通信框架介绍2.10 WebWorkers2.10.1 与HTML5 Web Workers通信2.10.2 多个JavaScript⽂件的加载与执⾏2.10.3 ⼦Web Workers和内嵌Web Workers2.10.4 构建Web Workers应⽤2.11 离线Web应⽤2.11.1 离线Web应⽤相关API2.11.2 Manifest使⽤介绍2.11.3 使⽤ApplicationCache API2.11.4 搭建简单的离线应⽤程序2.12 微数据2.12.1 语义化概念2.12.2 Microdata的前世今⽣2.12.3 如何使⽤Microdata优化⽹页2.12.4 国内⽹站如何使⽤Microdata2.13 HTML 5History2.13.1 HistoryAPI介绍2.13.2 History与Hash2.13.3 什么是MVC2.13.4 主流MVC框架介绍2.14 选择器2.14.1 选择器分类2.14.2 使⽤选择器操作页⾯中的元素2.15 CSS 3特性2.15.1 CSS 3带来了什么2.15.2 开放字体格式（WOFF）2.15.3 背景（Backgrounds）2.15.4 ⽂字效果（Text Effects）2.15.5 边框（Border）2.15.6 ⽤户界⾯（User interface）2.15.7 多列（Multiple Columns）2.15.8 转换（Transform）2.15.9 过渡（Transition）2.16 本章⼩结第3章 HTML 5相关概念和框架3.1 响应式Web设计3.1.1 什么是响应式Web设计3.1.2 流式布局3.1.3 媒体查询3.1.4 TwitterBootstrap理念3.1.5 TwitterBootstrap应⽤3.2 移动JavaScript框架3.2.1 SenchaTouch介绍和例⼦3.2.2 jQueryMobile介绍和例⼦3.2.3 PhoneGap介绍和例⼦3.2.4 介绍和例⼦3.3 CSS 3 UI框架3.3.1 HTML 5Boilerplate介绍3.3.2 Less Framework介绍3.4 HTML 5图表库3.4.1 Raphael介绍和例⼦3.4.2 Highcharts介绍和例⼦3.5 游戏库——的使⽤3.6 本章⼩结第4章 环境搭建4.1 选择⼀款编辑器4.1.1 Notepad++编辑器4.1.2 UltraEdit编辑器4.1.3 SublimeText 2编辑器4.2 4.2.1 介绍4.2.2 安装4.2.3 使⽤的NPM.4.2.4 如何在中调试4.2.5 ⽤搭建⼀个Web Server4.3 jQuery框架4.3.1 jQuery框架简介4.3.2 jQuery常⽤API4.4 其他实战开发技巧4.4.1 如何在Chrome浏览器调试脚本4.4.2 如何通过Fiddler加速开发4.5 本章⼩结第⼆篇 从微观上应⽤HTML 5讲述了HTML 5的元素与表单⼤演练、Canvas图画⼤演练、⾳频和视频⼤演练、地理位置⼤演练、拖放⼤演练、本地存储⼤演练、通信⼤演练和离线Web应⽤⼤演练，并提供了⼤量的实际开发案例。第5章 HTML 5元素与表单⼤演练⽰例001 创建跨浏览器的HTML5表单⽰例002 搞定低版本浏览器的兼容性⽰例003 创建⼀个HTML 5版的注册页⾯⽰例004 ⽤HTML 5的验证⽅法验证注册页⾯⽰例005 搞定输⼊框⾃动聚焦⽰例006 搞定表单的⾃动完成⽰例007 使⽤数字微调控件⽰例008 添加滑动控件⽰例009 发送多个⽂件⽰例010 利⽤正则表达式创建⾃定义输⼊类型⽰例011 预览上传的图⽚⽰例012 ⽆刷新异步上传⽰例013 拖拽上传⽂件第6章 Canvas图画⼤演练⽰例001 绘制图形（矩形和圆形）⽰例002 在图形中写字⽰例003 画布中使⽤渐变⾊⽰例004 输出图⽚⽂件⽰例005 操作图⽚像素⽰例006 制作⼀个动画计时器⽰例007 在画布中剪贴图像⽰例008 实现相⽚的360度旋转特效⽰例009 ⼀个HTML 5版销售数据图表⽰例010 制作⼀个简单动画第7章 ⾳频和视频⼤演练⽰例001 在⽹页中加⼊已有的视频⽰例002 做⼀个⾃⼰的在线⾳频播放器⽰例003 做⼀个⾃⼰的视频播放器⽰例004 动态显⽰媒体⽂件播放时间⽰例005 解决视频⾃定义⼯具条全屏问题⽰例006 实现⼀个视频的进度条⽰例007 给播放器添加快进慢进按钮⽰例008 处理带字幕的视频⽰例009 ⽤HTML5拍照和摄像第8章 地理位置⼤演练⽰例001 通过IP地址获取地理定位⽰例002 通过WI-FI获取地理定位⽰例003 通过GPS获取地理定位⽰例004 ⼿机地理定位⽰例005 ⽤户⾃定义的地理定位⽰例006 在Google Map显⽰我在这⾥⽰例007 处理定位错误⽰例008 使⽤Google地图追踪⽤户的位置⽰例009 使⽤Google地图查找路线第9章 拖放⼤演练⽰例001 实现⽹页元素的拖放⽰例002 拖放图标⽰例003 设置拖放的效果⽰例004 对照⽚进⾏排序⽰例005 拖放⽂件⽰例006 将商品拖⼊购物车⽰例007 拖放图⽚保存服务器⽰例008 拖动脚本⽂件进⾏压缩⽰例009 可拖放⽂本阅读器第10章 本地存储⼤演练⽰例001 保存与读取登录⽤户名与密码⽰例002 保存与读取临时数据⽰例003 使⽤本地数据库⽰例004 ⼀个桌⾯提醒⼯具⽰例005 存储JSON对象⽰例006 封堵数据泄漏⽰例007 存储数据的共享⽰例008 删除本地缓存第11章 HTML 5通信⼤演练⽰例001 微博消息实时推送⽰例002 在线代码编辑器⽰例003 在iFrame中嵌⼊⼀个可变⼤⼩的编辑器⽰例004 预览⽹站内容⽰例005 定时给客户发消息⽰例006 通过WebSocket创建聊天室第12章 离线Web应⽤⼤演练⽰例001 使⽤定时器⽰例002 排队处理订单⽰例003 后台运⾏⼀段JavaScript吧⽰例004 开发⼀个简单的离线应⽤⽰例005 检测⽹络的当前状态⽰例006 开发⼀个离线留⾔⽹页⽰例007 添加Geolocation跟踪⽰例008 设计离线事件处理程序第三篇 HTML 5完美实战案例讲述了两个完整的案例分析，分别为HTML 5⼿机遥控PPT和响应式之新闻阅读列表设计，将前⾯所学的HTML 5特性应⽤在现实的场景中。第13章 HTML 5⼿机遥控PPT13.1 控制器页⾯预览13.2 使⽤移动设备访问控制器页⾯13.3 代码设计和分析13.3.1 启动服务器13.3.2 index路由的逻辑规则和对应模板内容13.3.3 handle路由的逻辑规则和对应模板内容13.4 整个实例的流程图13.5 相关知识点13.5.1 Swig模板13.5.2 库13.6 本章⼩结第14章 响应式之新闻阅读列表设计14.1 原型设计14.2 模块设计14.2.1 视觉模块设计14.2.2 前端模块设计14.2.3 使⽤Media Queries⾃适应各种屏幕分辨率客户端14.3 运⾏效果14.4 本章⼩结

附录A 主流浏览器对HTML 5新特性的⽀持情况附录B 传统HTML标签及说明

2023年6月21日发(作者：)

《HTML5⽹页开发实例详解》⽬录第⼀篇 从宏观上认识HTML 5讲述了HTML 5引发的Web⾰命、HTML 5的整体特性、HTML 5相关概念和框架和开发环境搭建。第1章 HTML 5引发的Web⾰命1.1 你是不是真的了解HTML 51.1.1 通过W3C认识HTML 5的发展史1.1.2 HTML 5、HTML4、XHTML的区别1.1.3 什么⼈应该学HTML 51.1.4 ⼀个图告诉你如何学习HTML 51.2 浏览器之争1.2.1 说说这些常见的浏览器1.2.2 浏览器的兼容烦恼与策略1.2.3 给你的浏览器打个分1.3 学习制作⼀个简单的HTML 5页⾯1.3.1 搭建开发HTML 5的浏览器环境1.3.2 检测浏览器是否⽀持HTML 5标签1.4 常见问题1.4.1 学好HTML 5要学好Java嘛？1.4.2 谁是HTML 5新规则下的牺牲品？1.4.3 HTML 5是否有未来？1.4.4 HTML 5在移动应⽤开发是否有前景？1.5 本章⼩结第2章 HTML 5的整体特性2.1 HTML 5的元素们2.1.1 最新的交互元素——内容交互、菜单交互、状态交互2.1.2 HTML 5页⾯结构2.1.3 DOCTYPE和字符集2.1.4 其他标签元素2.2 检测HTML 5特性Modernizr库2.2.1 Modernizr库是什么2.2.2 使⽤Modernizr库提供的⽅法检测浏览器的各项指标2.3 表单和⽂件2.3.1 input元素的新增类型2.3.2 input元素新增的公⽤属性2.3.3 新增表单元素2.3.4 表单新增的验证⽅法2.3.5 File对象2.3.6 FileSystem接⼝2.3.7 jQueryhtml5Validate HTML5表单验证插件2.4 图形绘制2.4.1 Canvas是什么2.4.2 什么情况下⽤Canvas2.4.3 检测浏览器对Canvas的⽀持情况2.4.4 在页⾯中加⼊Canvas2.4.5 SVG是什么2.4.6 SVG的使⽤2.4.7 WebGL是什么2.4.8 WebGL的使⽤2.4.9 图形库2.5 ⾳频视频2.5.1 ⾳频和视频编码解码器2.5.2 使⽤脚本控制播放2.5.3 audio元素和video元素的浏览器⽀持情况2.5.4 ⾳视频的实时通信2.6 地理位置2.6.1 纬度和经度坐标2.6.2 有哪些定位数据2.6.3 怎么保护⾃⼰的隐私2.6.4 构建地理位置应⽤2.7 拖放2.7.1 Datatransfer对象2.7.2 拖放的事件监听2.7.3 看看这些带拖放功能的⽹站2.7.4 构建⽹页的拖放应⽤2.8 Web存储2.8.1 设置和获取数据2.8.2 LocalStorage与SessionStorage2.8.3 ⽹站本地存储兼容性⽅案2.8.4 如何在实际开发中使⽤本地存储2.9 HTML 5的通信2.9.1 PostMessage API2.9.2 XMLHttpRequest Level 22.9.3 WebSocketAPI2.9.4 通信框架介绍2.10 WebWorkers2.10.1 与HTML5 Web Workers通信2.10.2 多个JavaScript⽂件的加载与执⾏2.10.3 ⼦Web Workers和内嵌Web Workers2.10.4 构建Web Workers应⽤2.11 离线Web应⽤2.11.1 离线Web应⽤相关API2.11.2 Manifest使⽤介绍2.11.3 使⽤ApplicationCache API2.11.4 搭建简单的离线应⽤程序2.12 微数据2.12.1 语义化概念2.12.2 Microdata的前世今⽣2.12.3 如何使⽤Microdata优化⽹页2.12.4 国内⽹站如何使⽤Microdata2.13 HTML 5History2.13.1 HistoryAPI介绍2.13.2 History与Hash2.13.3 什么是MVC2.13.4 主流MVC框架介绍2.14 选择器2.14.1 选择器分类2.14.2 使⽤选择器操作页⾯中的元素2.15 CSS 3特性2.15.1 CSS 3带来了什么2.15.2 开放字体格式（WOFF）2.15.3 背景（Backgrounds）2.15.4 ⽂字效果（Text Effects）2.15.5 边框（Border）2.15.6 ⽤户界⾯（User interface）2.15.7 多列（Multiple Columns）2.15.8 转换（Transform）2.15.9 过渡（Transition）2.16 本章⼩结第3章 HTML 5相关概念和框架3.1 响应式Web设计3.1.1 什么是响应式Web设计3.1.2 流式布局3.1.3 媒体查询3.1.4 TwitterBootstrap理念3.1.5 TwitterBootstrap应⽤3.2 移动JavaScript框架3.2.1 SenchaTouch介绍和例⼦3.2.2 jQueryMobile介绍和例⼦3.2.3 PhoneGap介绍和例⼦3.2.4 介绍和例⼦3.3 CSS 3 UI框架3.3.1 HTML 5Boilerplate介绍3.3.2 Less Framework介绍3.4 HTML 5图表库3.4.1 Raphael介绍和例⼦3.4.2 Highcharts介绍和例⼦3.5 游戏库——的使⽤3.6 本章⼩结第4章 环境搭建4.1 选择⼀款编辑器4.1.1 Notepad++编辑器4.1.2 UltraEdit编辑器4.1.3 SublimeText 2编辑器4.2 4.2.1 介绍4.2.2 安装4.2.3 使⽤的NPM.4.2.4 如何在中调试4.2.5 ⽤搭建⼀个Web Server4.3 jQuery框架4.3.1 jQuery框架简介4.3.2 jQuery常⽤API4.4 其他实战开发技巧4.4.1 如何在Chrome浏览器调试脚本4.4.2 如何通过Fiddler加速开发4.5 本章⼩结第⼆篇 从微观上应⽤HTML 5讲述了HTML 5的元素与表单⼤演练、Canvas图画⼤演练、⾳频和视频⼤演练、地理位置⼤演练、拖放⼤演练、本地存储⼤演练、通信⼤演练和离线Web应⽤⼤演练，并提供了⼤量的实际开发案例。第5章 HTML 5元素与表单⼤演练⽰例001 创建跨浏览器的HTML5表单⽰例002 搞定低版本浏览器的兼容性⽰例003 创建⼀个HTML 5版的注册页⾯⽰例004 ⽤HTML 5的验证⽅法验证注册页⾯⽰例005 搞定输⼊框⾃动聚焦⽰例006 搞定表单的⾃动完成⽰例007 使⽤数字微调控件⽰例008 添加滑动控件⽰例009 发送多个⽂件⽰例010 利⽤正则表达式创建⾃定义输⼊类型⽰例011 预览上传的图⽚⽰例012 ⽆刷新异步上传⽰例013 拖拽上传⽂件第6章 Canvas图画⼤演练⽰例001 绘制图形（矩形和圆形）⽰例002 在图形中写字⽰例003 画布中使⽤渐变⾊⽰例004 输出图⽚⽂件⽰例005 操作图⽚像素⽰例006 制作⼀个动画计时器⽰例007 在画布中剪贴图像⽰例008 实现相⽚的360度旋转特效⽰例009 ⼀个HTML 5版销售数据图表⽰例010 制作⼀个简单动画第7章 ⾳频和视频⼤演练⽰例001 在⽹页中加⼊已有的视频⽰例002 做⼀个⾃⼰的在线⾳频播放器⽰例003 做⼀个⾃⼰的视频播放器⽰例004 动态显⽰媒体⽂件播放时间⽰例005 解决视频⾃定义⼯具条全屏问题⽰例006 实现⼀个视频的进度条⽰例007 给播放器添加快进慢进按钮⽰例008 处理带字幕的视频⽰例009 ⽤HTML5拍照和摄像第8章 地理位置⼤演练⽰例001 通过IP地址获取地理定位⽰例002 通过WI-FI获取地理定位⽰例003 通过GPS获取地理定位⽰例004 ⼿机地理定位⽰例005 ⽤户⾃定义的地理定位⽰例006 在Google Map显⽰我在这⾥⽰例007 处理定位错误⽰例008 使⽤Google地图追踪⽤户的位置⽰例009 使⽤Google地图查找路线第9章 拖放⼤演练⽰例001 实现⽹页元素的拖放⽰例002 拖放图标⽰例003 设置拖放的效果⽰例004 对照⽚进⾏排序⽰例005 拖放⽂件⽰例006 将商品拖⼊购物车⽰例007 拖放图⽚保存服务器⽰例008 拖动脚本⽂件进⾏压缩⽰例009 可拖放⽂本阅读器第10章 本地存储⼤演练⽰例001 保存与读取登录⽤户名与密码⽰例002 保存与读取临时数据⽰例003 使⽤本地数据库⽰例004 ⼀个桌⾯提醒⼯具⽰例005 存储JSON对象⽰例006 封堵数据泄漏⽰例007 存储数据的共享⽰例008 删除本地缓存第11章 HTML 5通信⼤演练⽰例001 微博消息实时推送⽰例002 在线代码编辑器⽰例003 在iFrame中嵌⼊⼀个可变⼤⼩的编辑器⽰例004 预览⽹站内容⽰例005 定时给客户发消息⽰例006 通过WebSocket创建聊天室第12章 离线Web应⽤⼤演练⽰例001 使⽤定时器⽰例002 排队处理订单⽰例003 后台运⾏⼀段JavaScript吧⽰例004 开发⼀个简单的离线应⽤⽰例005 检测⽹络的当前状态⽰例006 开发⼀个离线留⾔⽹页⽰例007 添加Geolocation跟踪⽰例008 设计离线事件处理程序第三篇 HTML 5完美实战案例讲述了两个完整的案例分析，分别为HTML 5⼿机遥控PPT和响应式之新闻阅读列表设计，将前⾯所学的HTML 5特性应⽤在现实的场景中。第13章 HTML 5⼿机遥控PPT13.1 控制器页⾯预览13.2 使⽤移动设备访问控制器页⾯13.3 代码设计和分析13.3.1 启动服务器13.3.2 index路由的逻辑规则和对应模板内容13.3.3 handle路由的逻辑规则和对应模板内容13.4 整个实例的流程图13.5 相关知识点13.5.1 Swig模板13.5.2 库13.6 本章⼩结第14章 响应式之新闻阅读列表设计14.1 原型设计14.2 模块设计14.2.1 视觉模块设计14.2.2 前端模块设计14.2.3 使⽤Media Queries⾃适应各种屏幕分辨率客户端14.3 运⾏效果14.4 本章⼩结

附录A 主流浏览器对HTML 5新特性的⽀持情况附录B 传统HTML标签及说明