('HTML5介绍1.HTML5的发展1.1HTML的定义HTML（HypertextMarkupLanguage）超文本标记语言，与其说它是用于描述网页文档的一种标记语言，也可以理解为一种规范或标准。HTML文件本身是一种包含标记的文本文件，这些标记可以告诉浏览器如何显示其中的内容，比如文字如何处理，画面如何安排，图片如何显示等。图-1HTML结构如图-1所示，通用的HTML结构可以归纳为(1)创建一个超文本标记语言文档(2)
设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码LanguageCode、指定字典中的元信息等(3)
设置文档的标题(4)
文档体，文档的可见部分1.2HTML5的由来我们都知道开发HTML5需要成立相应的组织，并且肯定需要有人来负责。这正是下面三个重要组织的工作WHATWG:由来自Apple，Mozilla，Google，Opera等浏览器厂商的人组成，成立于2004年，WHATWG开发HTML和WEB应用API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作W3C:W3C下辖的HTML工作组目前负责发布HTML5规范IETF:因特网工程任务组，这个任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API依赖于新的WebSocket协议，IETF工作组正在开发这个协议总的来说，HTML5是基于各种各样的理念进行设计的，而这些设计理念体现了对可能性和可行性的新认识:兼容性，实用性，互通性，通用访问性。表-1HTML的发展历程在HTML的发展历程中，有以下几件重要事件:(1)1991年，TimBerners-Lee为使世界各地的物理学家能够方便的进行合作研究，建立了使用于其系统的HTML，这是一种以纯文字格式为基础的语言，最初仅含有20多个标签，被广大用户接受，但是并没得到官方的发布。(2)HTML没有1.0版本是因为当时有很多不同的版本。有些人认为TimBerners-Lee的版本应该算初版，这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始，最初是被设计成为“HTML的一个超集”。第一个正式规范在为了和当时的各种HTML标准区分开来，使用了2.0作为其版本号。(3)HTML3。0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂，在草案于1995年9月过期时，标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出，而下一个被提出的版本是开发代号为Wilbur的HTML3.2，去掉了大部分3.0中的新特性，但是加入了很多特定浏览器，例如Netscape和Mosaic的元素和属性。(4)HTML4.01规范在1999年12月作为W3C的推荐规范发布，并于2000年5月成为国际标准。HTML4.01规范试图解决HTML3.2规范中引入的与展示相关的元素的问题，与此同时，又需要考虑规范的向后兼容性。HTML4.01规范把许多与表示相关的元素标记为废弃的，不推荐使用。同时引入了三种“风格（flavor）”。在“严格（Strict）”风格中，废弃的元素是不能使用的；在“过渡性（Transitional）”风格中，废弃的元素是可以使用的；在“框架（Frameset）”风格中，只允许使用与框架相关的元素。(5)从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。(6)HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本2.HTML5的主要特性目前HTML5是网络热词，所以我们就先从它的定义入手。在我看来，HTML5主要包含两个要素：1.新HTML标签，对播放视频和音效来说尤为重要；2.可供浏览器托管JavaScript应用利用的新编程界面。从根本来说，这是可供程序员利用的两个新功能。下面我们就HTML5的主要特性逐一介绍2.1多媒体HTML5所推出的诸多新特性中，canvas，video和audio这几个多媒体标签对得到的关注是。互联网多媒体技术的发展即将掀起巨大的浪潮，结合脚本技术将原本只能在系统级别上的视频处理，音效处理等功能带入到互联网应用的范围内。同时HTML5带来的限制有（1）有些格式不支持（2）全屏视频无法通过脚本控制（3）字幕支持规范仍在编写中2.1.1视频许多时髦的网站都提供视频。HTML5提供了展示视频的标准。直到现在，在整个web网络上，仍然不存在一项旨在网页上显示视频的标准今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法，支持3种视频格式:格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+WebMNo4.0+10.6+6.0+No如需在HTML5中显示视频，您所有需要的是：
…control属性供添加播放、暂停和音量控件。与 之间插入的内容是供不支持video元素的浏览器显示的。其实也就是浏览器内置解码器，以及开放部分图形处理的能力（比如视频截图）,它是移动设备上网络视频播放的Flash的替代方案，然而如果你要让自己网站支持HTML5视频播放，主要的工作还是把你的视频文件编码成用户浏览器支持的格式。因为视频编码本身涉及到很大的利益链(专利、授权)，种种原因造成众多浏览器支持的视频编码格式不一致，所以你的服务器存储成本必须成倍增加（至少准备3种视频格式），也得准备大量的运算能力去编码这些视频。而至于前端的播放器设计，则只是用户体验上的设计罢了。当然，如果你以为就是简单地播放视频就大错特错了，还是涉及到版权管理，字幕引擎，多音轨等等，同样需要一整本书来描述这些技术。2.1.2音频除了借助插件或者一些特定的浏览器接口，以前的网页是无法播放声音的，而今提供了音频播放的能力，每个浏览器都有默认的播放器外观，当然你也可以利用它的API自己实现一个播放器外观HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。格式IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbisΔΔΔMP3ΔΔΔWavΔΔΔ如需在HTML5中播放音频，您所有需要的是：… control属性供添加播放、暂停和音量控件。与 之间插入的内容是供不支持audio元素的浏览器显示的2.1.3画布画布(canvas)：HTML5中的新属性，为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。画布是一个矩形区域，您可以控制其每一像素，另外，canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。开发者可以用Canvas做任何表现层可以做的事情：动画引擎、交互界面等等，你可以制作一款Canvas版的PhoneShop，或者制作一款游戏引擎，更别说使用Canvas来制作彩信、设计名片这种小菜一碟了。不过要开发游戏，你离不开音频处理，要开发一款图形处理软件，你还得依赖一些对数据处理的API，所以说要做成一件事情，光单独的HTML5的某项技术是不够的。目前，标记并不能提供所有的Flash具有的功能，但假以时日，Flash必将从web上淘汰1、你可以对画布中的每一像素点进行控制，绘制或者编辑复杂图像（比如通常的照片）時很方便。2、可以方便的将图形存储为常用的jpg或者png格式的图片。3、一般而言图像的色彩较矢量图要丰富逼真。画布不依赖于外部插件、与浏览器渲染引擎紧密结合、节约资源，最重要的是极大的简化了图形和网页中其他元素的交互过程。对于Flash来说，使Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的，另外在编程上也相当不方便。而canvas本身就是HTML5的一个元素，可以像操作普通HTML元素一样操作它。开发人员可以将所有的代码整齐的写在一个文件里，降低了维护与更新的难度。2.2存储2.2.1本地存储在客户端存储数据，HTML5提供了两种在客户端存储数据的新方法：\uf0b7localStorage-没有时间限制的数据存储\uf0b7sessionStorage-针对一个session的数据存储之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。2.2.2IndexedDBIndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库，是未来一切Web应用的基石和我们熟知的cookies类似，IndexedDB是每个域名独立存储数据的。IndexedDB可以存储任意格式的jsonobject，而localStorage则只能存stringIndexedDB也分数据库，每个数据库可以建立多个不同配置的表，而且所有的操作都在事务（transaction）中完成不同之处在于websqldatabase是通过SQL执行语句来完成操作的，而IndexedDB则直接通过JS的API完成操作图-2IndexedDB的工作流程2.2.3FileReaderFileReader提供的API可以支持往浏览器直接拖拽上传附件，值得注意的是，到目前为止，只有Firefox3。6+和Chrome6。0+实现了FileReader接口。FileReader接口实现对本地文件的异步操作,主要是将文件读入内存，并提供相应的方法，来读取文件中的数据。FileReader提供了3个读取文件方法(readAsBinaryString()，readAsText()，readAsDataURL())和1个中断读取的方法（abort()），因为FileReader实现的是异步的文件读取接口，所以读取的结果不作为以上3个读取方法的返回（或输出），而是存储在result属性中。2.3应用2.3.1离线应用HTML5的webstorageAPI采用了离线缓存，会生成一个清单文件(manifestfile)，这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML，CSS，JavaScript，图片等相关内容。当使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。图-3HTML5离线应用的原理2.3.2多线程在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了。一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。JS是单线程的程序，在浏览器上与UI线程共享，以当JS处于运行状态的时候，界面上会出现阻塞，无法响应用户操作，运行时间稍微长一点浏览器就可能弹出对话框说运行时间过长是否中止，所以在前端进行密集型的运算体验会很差。WebWorker提供了JS在浏览器后台运算的支持，不阻塞UI线程，当然在worker线程运行的程序无法访问页面元素，但是可以访问网络资源，以回调的形式与主线程通讯。WebWorker是HTML5提供的一种多线程编程方法。运行在后台的JavaScript，独立于其他脚本，不影响页面的性能，开发者可以继续做任何要做的事情：如线上的点击，选取内容等等操作。2.4通讯浏览器的XHR对象是AJAX开发的基石，它是开创Web2.0时代的一个技术。简单地讲，XHR是以不刷新网页的形式构造http请求，向服务端提交数据，以及获得服务端返回的报文的对象封装。以前XHR只能传输UTF8编码的文本类型的数据，HTML5的时代给它扩展更丰富的能力：跨站点访问能力文件上传能力、多类型返回报文（以前的xml&纯文本增加到支持二进制、html文档、JSON）2.4.1WebSocketHTML5定义了一个全双工通信信道，仅通过WEB上的一个Socket即可与后台进行通信。(1)使用轮询时，浏览器会定期发送HTTP请求，并随时接受响应；(2)使用长轮询时，浏览器向服务器发送一个请求，服务器会在一段时间内将其保持在打开状态，如果服务器在此期间收到一个通知，就会想客户端发送一个包含消息的响应，如果时间已到还没收到通知，服务器会发送一个响应消息来终止打开的请求。(3)使用流解决方案时，浏览器会发送一个完整的HTTP请求，但服务器会发送并保持一个处于打开状态的响应，该响应持续更新并无限制（或是一段时间内），每当有消息可发送时该响应就会被更新，但服务器永远不会发出响应完成的信号，这样连接就会一直保持在打开状态以便后续消息的发送，但是，由于流仍是封装在HTTP中，期间的防火墙和代理服务器可能会对响应消息进行缓冲，造成消息传递的时延WebSocketAPI最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。1）一个WEB客户端只建立一个TCP连接2）Websocket服务端可以推送(push)数据到web客户端。3）有更加轻量级的协议头，减少数据传送量2.4.2地理位置地理位置（Geolocation）是HTML5的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。HTML5Geolocation提供API用于获得用户的地理位置。1单次定位请求getCurrentPosition2重复性的位置更新请求watchjPosition位置服务用于估计您所在位置的本地网络信息包括：有关可见WiFi接入点的信息（包括信号强度）、有关您本地路由器的信息、您计算机的IP地址。位置服务的准确度和覆盖范围因位置不同而异。总的来说，在PC的浏览器中HTML5的地理位置功能获取的位置精度不够高，如果借助这个HTML5特性做一个城市天气预报是绰绰有余，但如果是做一个地图应用，那误差还是太大了。不过，如果是移动设备上的HTML5应用，可以通过设置enableHighAcuracy参数为true，调用设备的GPS定位来获取高精度的地理位置信息。2.5表单元素HTML表单一直都是Web的核心技术之一，有了它我们才能在Web上进行各种各样的应用。HTML5Forms新增了许多新控件及其API，方便我们做更复杂的应用，而不用借助其它Javascript框架2.5.1Input类型2.5.2属性2.5.3标签3.HTML5的现状与发展HTML5到底有多神奇呢？首先，我认为她是以“统治者”的心态来定位自己的，她的出现期望实现互联网络“大一统”局面。其次，HTML5将触角已经延伸到了数据库内部，虽然只是初级的本地SQL数据库，“野心”不小。最后，与浏览器深度“联姻”，桌面操作系统的日子怎么过啊？Google、Apple积极推动HTML5发展，微软后知后觉，IE9已支持部分现有应用Gmail,YoububeHTML5视频播放器（演示版）,移动平台上的geolocation应用,Google将启用HTML5离线解决方案弃用Gears等.当然，我们也要注意到HTML5还处于草案阶段，尚未成熟，有可能发生规范上的重大变化，不适宜大规模部署。HTML5技术的浪潮，真的值得你去开一家技术公司，然后专门做HTML5的技术方案。如果经常关注业界消息，你可以经常看到哪家HTML5技术公司获得了投资。比如PhoneGap，手机上用HTML5开发NativeAPP，它不久前刚被Adobe公司收购。HTML5使web技术越来越复杂，你很难靠自己去研究所有的东西开发应用，需要寻找各种专业的解决方案，比如开发游戏，则有设计好对Canvas接口进行二次封装的游戏引擎；做课件，有专门的课件解决方案，物理引擎，数学公式等等。(1)不盲目使用新技术有些HTML5特性是为了更容易地实现以前HTML4能够做的工作，但是当前这个阶段它并不是一种合理的解决方案，比如使用Canvas可以设计出一个彩信编辑器，但是否一定要用这种技术去实现呢？用简单Div+CSS也能实现，而且兼容性更好，可以在IE6下面使用。产品经理说，我们来开发一个HTML5的产品吧，可以在智能手机上面用，很炫。原型设计出来后，因为听说是“HTML5产品”，所以页面工程师用了很多CSS3技术来编写网页（CSS3的排版技术和动画），采用了很多新特性去减少图片文件的使用。产品进入测试阶段后，发现很多终端设备不兼容，低版本的环境很多特定不支持，一些支持的特性则表现很差，甚至有性能问题。跟HTML5扯上边后事情变的很糟糕，其实可以用CSS2.0去实现同样的效果，虽然可能增加图片的使用量(其实从原型效果就注定产品很难成功了，界面太复杂，功能太多)。(2)用户授权与限制HTML5毕竟是运行在浏览器上的程序，面向广大web产品和用户，安全性应该是接口设计首先要考虑的问题，因此某些如获取用户地理位置、页面全屏化、桌面提醒、读写本地文件、创建本地数据库等等操作都需要用户手动授权。跟手机上安装时一次性请求权限不同，Web上的授权是碎片化的，每请求一个接口都需要授权一次。此外这些能力都伴随着各种限制，比如本地存储接口，一般会限制存储空间的大小，手机侧的限制更多，存储空间更少。',) 
下载