HTML 5网页开发实例详解.pdf

HTML 5网页开发实例详解.pdf
 

书籍描述

内容简介
本书从实际的应用场景出发,结合当下的热门技术,深入浅出地介绍了 HTML 5所包含的各项新技术。本书分为 14章。第 1~4章介绍了 HTML 5和浏览器的发展史、 HTML 5新特性的使用,最新的前端设计概念和第三方流行应用框架,如响应式设计、移动端框架、 MVC、图形库、游戏库、 Node.js;第 6~12章介绍了表单、 Canvas、多媒体、地理、拖放、存储、通信、离线应用等多个方向,并给出了大量实例;第 13~14章通过两个完整的大型应用实例,详细分析 HTML 5的项目流程及设计技巧。
本书适用于所有前端开发初学者和网页设计入门者,也可作为大中专院校及培训学校教材及上机指导用书。

编辑推荐
大众点评网资深前端工程师周瑶和聚划算资深前端工程师李春城联袂奉献 Google、苹果都支持HTML 5标准了
BAT互联网三巨头也用上HTML 5了
语义性、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成、CSS 3,HTML 5技术的核心都有了
响应式设计、移动端框架、MVC、Node.js、游戏库、图形库、案例、兼容、标准、跨浏览器、原生解决方案,这些例子齐全了

作者简介
周遥,资深WEB开发工程师,具有多年的软件开发经验,致力于互联网相关技术的研究,是国内率先在HTML5这一领域进行研究与实践的人员,在前端开发•前端自动化•前端性能优化方面拥有丰富的实战经验,同时擅长后端开发技术,在C#,ASP.NET,SQL Server,Oracle,Node.js,Pathon等方面也积累了大量的实战经验。目前在大众点评网担任前端开发和培训工作。
李春城,毕业于电子科技大学,软件工程专业,硕士。5年互联网从业经验,3年WEB前端开发经验,从事过产品,前端,后端等开发工作。精通LN(A)MP平台的开发,软件架构的设计,设计模式等等。目前在聚划算担任前端开发和基础架构工作

目录
目 录
第1章 HTML 5引发的 Web革命
1.1你是不是真的了解 HTML
1.1.1通过 W3C认识 HTML 5的发展史
1.1.2 HTML 4、XHTML、HTML 5的区别
1.1.3什么人应该学 HTML 5
1.1.4一张图告诉你如何学习 HTML 5
1.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 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 jQuery html5Validate HTML 5表单验证插件
2.4图形绘制
2.4.1 Canvas是什么
2.4.2什么情况下用 Canvas
2.4.3检测浏览器对 Canvas的支持情况
2.4.4在页面中加入Canvas
2.4.5 SVG是什么
2.4.6 SVG的使用
2.4.7 WebGL是什么
2.4.8 WebGL的使用
2.4.9 Paper.js图形库
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与SessionStorage
2.8.3网站本地存储兼容性方案
2.8.4如何在实际开发中使用本地存储
2.9 HTML 5的通信
2.9.1 PostMessage API
2.9.2 XMLHttpRequest Level
2.9.3 WebSocket API
2.9.4 Socket.IO通信框架介绍
2.10 Web Workers
2.10.1与HTML5 Web Workers通信
2.10.2多个 JavaScript文件的加载与执行
2.10.3子Web Workers和内嵌 Web Workers
2.10.4构建 Web Workers应用
2.11离线 Web应用API
2.11.4搭建简单的离线应用程序
2.12微数据
2.12.1语义化概念
2.12.2 Microdata的前世今生
2.12.3如何使用 Microdata优化网页
2.12.4国内网站如何使用 Microdata
2.13 HTML 5 History
2.13.1 History API介绍
2.13.2 History与Hash
2.13.3什么是 MVC
2.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 Twitter Bootstrap理念
3.1.5 Twitter Bootstrap应用
3.2移动 JavaScript框架
3.2.1 Sencha Touch
3.2.2 jQuery Mobile介绍和例子
3.2.3 PhoneGap
3.2.4 JQ.Mobi
3.3 CSS3UI框架
3.3.1 HTML 5 Boilerplate
HTML 5网页开发实例详解
3.3.2 Less Framework
3.4 HTML 5图表库
3.4.1 Raphael
3.4.2 Highcharts
3.5游戏库 ——Three.js的使用
3.6本章小结
第4章环境搭建
4.1选择一款编辑器
4.1.1 Notepad++编辑器
4.1.2 UltraEdit编辑器
4.1.3 Sublime Text 2编辑器
4.2 Node.js
4.2.1 Node.js介绍
4.2.2 Node.js安装
4.2.3使用 Node.js的
4.2.4如何在 Node.js中调试
4.2.5使用 Node.js搭建 Web Server
4.3 jQuery框架
4.3.1 jQuery框架简介
4.3.2 jQuery常用
4.4其他实战开发技巧
4.4.1如何在 Chrome浏览器调试脚本
4.4.2如何通过 Fiddler加速开发
4.5本章小结
第5章 HTML 5元素与表单大演练
5.1示例 1创建跨浏览器的 HTML 5表单
5.1.1示例效果
5.1.2代码设计
5.1.3代码分析
5.1.4相关知识
5.2示例 2搞定低版本浏览器的兼容性问题
5.2.1示例效果
5.2.2代码设计
5.2.3代码分析
5.2.4相关知识
5.3示例 3创建 HTML 5版的注册页面
5.3.1示例效果
5.3.2代码设计
5.3.3代码分析
5.3.4相关知识
5.4示例 4用HTML 5的验证方法验证注册页面
5.4.1示例效果
5.4.2代码设计
5.4.3代码分析
5.4.4相关知识
5.5示例 5搞定输入框自动聚焦问题
5.5.1示例效果
5.5.2代码设计
5.5.3代码分析
5.5.4相关知识
5.6示例 6搞定表单的自动完成
5.6.1示例效果
5.6.2代码设计
5.6.3代码分析
5.7示例 7使用数字微调控件
5.7.1示例效果
5.7.2代码设计
5.7.3代码分析
5.7.4相关知识
5.8示例 8添加滑动控件
5.8.1示例效果
5.8.2代码设计
5.8.3代码分析
5.8.4相关知识
5.9示例 9发送多个文件
5.9.1示例效果
5.9.2代码设计
5.9.3代码分析
5.9.4相关知识
5.10示例 10利用正则表达式创建自定义输入类型
5.10.1示例效果
5.10.2代码设计
5.11示例 11预览上传的图片
5.11.1示例效果
5.11.2代码设计
5.11.3代码分析
5.11.4相关知识
5.12示例 12无刷新异步上传
5.12.1示例效果
5.12.2代码设计
5.12.3代码分析
5.12.4相关知识
5.13示例 13拖曳上传文件
5.13.1示例效果
5.13.2代码设计
5.13.3代码分析
第6章 Canvas图画大演练
第7章音频和视频大演练
第8章地理位置大演练
第9章拖放大演练
第10章本地存储大演练
第11章 HTML 5通信大演练
第12章离线 Web应用大演练
第13章 HTML 5手机遥控 PPT
第14章响应式设计之新闻阅读列表设计
附录 A主流浏览器对 HTML 5新特性的支持情况
附录 B传统 HTML标签及说明

序言
前 言
你还在用 Flash吗?“帮主 ”早不用了
乔布斯生前在公开信《Flash之我见》中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利。 ——国际巨头 Google、苹果等都支持 HTML 5标准,要不要学,你看着办!
BAT三巨头都偷偷用上 HTML 5了
HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,它们都已经争先恐后地将 HTML 5的新技术融入到了现实的开发领域中。本书的例子会涉及 WebQQ、一淘网、大众点评网等公司在 HTML 5方向的技术运用情况。
——还不知道 BAT是谁?太out了,百度、阿里、腾讯,地球上的国人应该都知道吧。
HTML 5做了哪些改变
语义性、本地存储、设备访问、连接性、多媒体、平面和三维效果、性能和集成、CSS 3是HTML 5技术的核心,本书不光介绍八大特性的理论,重点是通过实战示例让读者精通它们。
——世界上有八大奇迹,HTML 5也有八大特性。
本书真的适合你吗
本书帮你从 HTML 4时代过渡到 HTML 5时代;本书提供现实生活中的应用,包括移动应用和普通 PC应用;本书会涉及 HTML 5的游戏库、图表库、框架介绍和案例;本书从现实的表单使用场景出发,解决低版本浏览器的兼容问题;本书介绍各种 W3C规范来自什么标准,用向何处;本书提供多套作者自己实际应用的跨浏览器的原生解决方案。
——怕HTML 5不兼容?没关系,本书给出了优雅降级和各种跨浏览器兼容方案。
本书涉及的技术或框架
Modernizr jQuery Mobile Chrome浏览器调试
jQuery JQ.Mobi Fiddler加速
Paper.js HTML 5 Boilerplate JSONP
WebGL Less Framework JSON
SVG Raphael Google地图
WebRTC Highcharts Swig模板
Socket.IO Three.js Consolidate.js
MVC Sublime Text 2
Sencha Touch Node.js
本书涉及的示例和案例
当前天气的APPWebQQ的通讯
新闻阅读列表APP花开花落的动画
一个网站的用户增长曲线图MP3播放器
网页中的3D效果追踪用户位置
用Node.js搭建Web Server用浏览器拍照和摄像
销售数据图表类iPhone鼠标拖动效果
带字幕的视频播放器文件拖放上传
手机定位桌面提醒工具
可拖放文本阅读器微博信息实时推送
聊天室在线代码编辑器
排队处理订单预览网页内容
离线留言手机遥控PPT
新消息提醒 响应式新闻阅读列表
本书特点
1.本书不论是理论知识的介绍,还是实例的开发,都从实际应用角度出发,精心选择开发中的典型例子,讲解细致,分析透彻。
2.深入浅出、轻松易学,以实例为主线,激发读者的阅读兴趣,让读者能够真正学习到 HTML 5最实用、最前沿的技术。
3.技术新颖、与时俱进,结合时下最热门的技术,如Node.js、响应式设计、移动开发、 MVC,让读者在学习HTML 5的同时,了解熟识更多相关的世界先进技术。对于一些无法全面讲解的框架,给出了GitHub的详细地址供读者参考。
4.贴近读者、贴近实际,大量成熟第三方组件和框架的使用和说明,帮助读者快速找到问题的最优解决方案,书中很多实例来自作者工作的大众点评网。
5.贴心提醒,本书根据需要在各章使用了很多“注意”、“说明”等小栏目,让读者可以在学习过程中可以更轻松地理解相关知识点及概念。
本书读者
HTML 5开发初学者和前端爱好者
前端开发工程师
从事后端开发但对前端开发有兴趣的人员
想把网站移植到HTML 5技术上来的网页设计人员或站长
大中专院校及培训学校的学生
从HTML 4向HTML 5过渡的开发人员
作者 2014年1月

文摘
第6章 Canvas图画大演练
图6.1使用 Chrome打开网页文件图6.2调整 “矩形 ”和“圆形 ”颜色控件
6.1.2代码设计
利用编辑器打开 “001.绘制图形:矩形和圆形 .html”文件,代码如下:
(代码略)
6.1.3代码分析
代码第 12~20行是矩形调节区的 HTML结构,第21~28行是圆形调整区的 HTML结构。
代码第 31行和第 33行分别是矩形和圆形的画布。
代码第 38行和第 40行,分别从文档中获取对应画布的上下文。
代码第 41行~第50行为函数 draw_rect,用于在画布上绘制矩形。该函数第 42行代码清空画布上固定矩形区域的内容,就像平时所用的橡皮擦。clearRect方法拥有 4个参数,语法如下:
x:要清除的矩形左上角的 x轴坐标。
y:要清除的矩形左上角的 y轴坐标。
width:要清除矩形的宽度,以像素计。
height:要清除矩形的高度,以像素计。
代码第 43行,获取矩形调节区颜色控制的值,设置矩形画布的颜色。
代码第 44行~第49行填充一个矩形,fillRect方法拥有 4个参数,参数用法与 clearRect方法相同,语法如下:
HTML 5网页开发实例详解
代码第 51~55行,获取矩形调节区颜色控件和各滑块元素。代码第 57~59行,监听矩形调节区各控件的 change事件。当各控件的值发生变化时,调用
函数 draw_rect重新绘制矩形。
代码第 60行,调用函数 draw_rect,使用矩形调节区各控件的默认值绘制默认矩形。
圆形区的代码基本与矩形区的相似,只是在调用画布上下文的方法上略有不同,绘制圆
形通过 draw_circle函数实现。代码第 64行,调用方法 beginPath,告诉画布开始一条新的路径。假使不调用该方法,每次绘制的图形也会被重叠。代码第 65~73行,调用方法 arc以给定的坐标点为中心点以指定半径画一条弧,语法如下:
x,y:弧圆心坐标。
radius:弧半径。
startAngle,endAngle:弧的开始点和结束点。
counterclockwise:设置弧沿逆时针或顺时针绘制。
代码第 74行调用 closePath方法关闭之前打开的路径。第75行调用 fill方法,使用设置的 .llStyle属性颜色填充绘制的路径。
示例2 在图形中写字
6.2.1示例效果
随着互联网的发展,图片已成为人们分享信息的一种重要手段,但随之而来的图片盗用问题成为了阻碍用户分享的一大障碍。目前,被认为行之有效的方法是给用户上传的图片加上水印,防止图片被盗用。本例提供了 HTML 5加水印的解决方案。
使用 Chrome浏览器打开网页文件,运行效果如图 6.3所示。
图6.3使用 Chrome打开网页文件
单击 “选择文件 ”按钮,选择任意图片并打开(示例中选择了 “考拉 ”图),效果如图
6.4所示。
图6.4单击 “选择文件 ”按钮选择一张图片并打开
在画布设置区调节 “宽高 ”滑块为最大值,然后将光标移入画布框,此时光标样式变为拖动状态。拖动画布框中的图片,直到合适位置后松开,效果如图 6.5所示。
图6.5调整画布大小并拖动图片到合适位置
此时画布内出现一个完整的考拉头像。接下来给图片打上水印 “我是考拉 ”,并将水印移动到图片的右下角。调整文字的字体、颜色和大小,效果如图 6.6所示。
HTML 5网页开发实例详解
图6.6调整文字内容和样式
6.2.2代码设计
利用编辑器打开 “002.在图形中写字 .html”文件,代码如下:
(代码略)
6.2.3代码分析
本例涉及多个逻辑功能点,将代码功能分成三大块进行分析。
1.在画布中显示本地图片
代码第 88行创建一个图片实例赋予变量 img。代码第 109行监听变量 img的load事件,当图片的 src属性发生改变时触发函数 draw。代码第 111行~第125行添加对上传控件 change事件的监听,当上传的控件值改变时触发
事件。代码第 112行定义变量 .les存储上传文件列表。代码第 114行~第124行循环文件列表,判断文件类型是否为图片类型。遇到图片文件,
通过 FileReader读取文件内容。当文件读取完毕,重新设置变量 img的src属性时,待图片加载完毕以后触发函数 draw。函数 draw中绘制图片方法代码如下:
context.drawImage(img, x || move_x, y || move_y);
drawImage语法如下:
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY,destWidth, destHeight)
image:所要绘制的 Image元素。
sourceX,sourceY:图像在画布左上角坐标位置。
sourceWidth,sourceHeight:图像的宽和高。
destX,destY:所要绘制的图像区域的左上角的画布坐标。
destWidth,destHeight:图像区域所要绘制的画布大小。
在画布中绘制图像必须在图像加载完毕以后执行,即在图像的 load事件回调中进行,否则绘制为空图。
2.在画布中写入文字
函数 draw有两个功能,一个是绘制图片,另外一个是在画布上写入文字。代码第 91行,清空对应画布大小区域的内容。代码第 92行、第93行,读取画布调节区宽高滑块的值,重新设置画布宽高。代码第 95行~第97行,分别设置画布文字的颜色、水平位置、大小和字体。代码第 99行,调用画布的 .llText方法写入文字,.llText语法如下:
text:文本内容。
x:相对于画布的 x轴坐标。
y:相对于画布的 y轴坐标。
maxWidth:可选,允许的最大文本宽度,以像素计。
3.光标拖动画布中的图片
使用脚本完成拖动元素效果,首先要明白元素的三种事件。
mousedown:事件会在鼠标按键被按下时发生。
mouseup:事件会在鼠标按键被松开时发生。
mousemove:事件会在鼠标指针移动时发生。
本例实现画布中图片拖动的效果见代码第 126~148行,下面分析相关的代码逻辑。代码第 126行,定义了两个初始化为 0的变量,用于记录图片拖动后的坐标偏移量。代码第 136行~第141行,单击画布时被触发。mousedown被触发后,先判断画布中是否已
经存在图片,假使已经上传图片(即img变量的 src属性不为空),获取鼠标指针位置相对于当前窗口的 x轴坐标和 y轴坐标,并将两个坐标值缓存在 canvas元素变量上。最后监听 canvas元素的 mousemove事件,绑定 canvas_mousemove函数。
代码第144行~第147行,鼠标在文档内松开时被触发。mouseup被触发后,将move_x, move_y两个图片坐标偏移量缓存在 canvas元素变量上,并将移除 mousedown时绑定在 canvas元素上的 mousemove事件进行监听。
代码第 127行~第134行是完成拖动效果的关键。拖动时计算图画和画布的相对位置,代码如下:
首先分析如何得到 move_x,即当前图片拖动后相对于画布 x轴坐标(move_y的计算方法与move_x类似)。
6.3.2代码分析
本例代码基本与示例 2相同,下面就不同部分做分析。
去掉了原有的文字 “颜色 ”控件后,新增了三个颜色选择控件,代码如下:
(代码略)
6.4.1示例效果
回顾示例 3,已经具备了添加图片、文字、渐变色功能。本例在其基础上,加入图片导出功能,同时还可以选择导出图片的类型和名称。使用 Chrome浏览器打开网页文件,运行效果如图 6.9所示。
在画框的左侧调节框进行如下操作:
选择图片库中的 “水母 .jpg”图片。
调整画布的宽高。
调整文字字体为 “方正舒体 ”。
修改图片文字内容为 “我是只水母 ”。
调整文字在画框中的 X轴和 Y轴距离。
修改下载区的文件名为 “水母 ”。
运行效果如图 6.10所示。
图6.10选择图片并调整相关设置单击 “下载 ”按钮,浏览器出现 “另存为 ”对话框,如图 6.11所示。
读者可以通过修改 “类型 ”下拉框的值,调整下载图片类型。本例一共提供了 png、jpeg、 bmp、gif这4种类型。
6.4.2代码分析
本例代码基本与示例 3相同,下面就不同部分做一个分析。 HTML文档增加了 33个元素,代码如下:
在draw函数的末尾增加两行代码,代码如下:
toDataURL方法,返回一张使用 canvas绘制的符合 data:URL格式图片。该方法接收一个 type参数,表示为 MIME类型,如image/png、image/jpeg等。如果是 image/jpeg,可以有第二个参数,表示 JPEG的质量等级,范围在 0.0~1.0之间。
toDataURL方法绘制的图片格式在各个浏览器中的支持情况不同。
第一行代码,将获取的图片值赋予下载按钮的 href属性,用于给下载提供图片内容。第二行代码,设置 A元素的 download属性。download属性在 HTML 5的草案中被添加,用于表明一个资源是让用户下载的,并且下载文件与 download属性值相同。另外增加了对图片类型下拉框 change事件的监听、对文件名输入框 keyup事件监听。

购买书籍

当当网购书 京东购书 卓越购书

PDF电子书下载地址

相关书籍

搜索更多