精通HTML5编程

《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！第一章：内容概述老狗在群里面传了一本书《Pro.HTML5.Programming》，图书的出版说明技术开始走向实用，同时说明关注的人开始增多了。新技术的第一批书免不了有些不够深厚，大都是泛泛的介绍。我看了之后挑出重要的内容整理成一个提纲，懒得看书的同学直接看这个就可以了。书中提到的代码可以再这里下载。第一章主介绍了HTML5的优点和新特性，优点就不罗嗦了。特性如下：1111、简化的DOCTYPEDOCTYPEDOCTYPEDOCTYPE和CharacterCharacterCharacterCharacterSetSetSetSet：!DOCTYPEhtmlmetacharset=”utf-8″2222、语义标签更利于搜索引擎理解页面内容，同时也在一定程度上简化页面的编写。header页面的头部或者文章的头部footer页面的尾部或者文章的尾部section网页中的一节article独立的文章内容aside相关文章或引用nav导航HTML5文档实例如下：HTML5代码CSS示例3333、JSJSJSJS的增强查询选择器(querySelector)：JS中终于加入了查询选择器querySelector()和querySelectorAll()，其行为类似jQuery或者CSS选择器。querySelector()返回第一个匹配元素，querySelectorAll()返回所有的匹配元素，两个选择器的查询规则类似，如：querySelector(“input.error”)，querySelectorAll(“#resultstd”)等。JS记录和调试：此功能并非HTML5提供，而是近期的浏览器在前台开发与调试上比以前几年都有了极大的改进。比如说，FF的FireBug，Chrome的DeveloperTools等《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！原生JSON支持：window.JSON，提供parse()和stringify()方法，相比JS实现极大的提高了性能。DOMLevel3：IE9终于支持DOMLevel2和3了，终于快要可以统一了。JS性能大增：浏览器进入JS性能良性竞争，是JS性能极大提高。其中2~10章还分别介绍了，Canvas，Audio和Video，GeolocationAPI，CommunicationAPI，WebSocket，FormAPI，WebWorkders，WebStorageAPI等，我看完一章贴一篇总结出来。《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！第二章：CanvasCanvasCanvasCanvas画布本书第二章介绍Canvas。一、简介1111、历史Web之前有三种绘图的方式，AdobeFlash，SVG和VML。此次HTML5元素新添加的Canvas实际上是一个像素画布（bitmapcanvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。WHATWG的HTML5选择Canvas作为标准原因有二：1、由于不用存储画出的每一个元素，所以性能更好。2、和其他语言的二维绘图API类似，更容易实现。2222、结构Canvas在HTML页面中是一个“canvas/canvas”标签，显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0)，向右为X轴，向下为Y轴。3333、检测浏览器支持JavaScriptCode复制内容到剪贴板1try{2document.createElement(“canvas”).getContext(“2d”);3document.getElementById(“support”).innerHTML=4“HTML5Canvasissupportedinyourbrowser.”;5}catch(e){6document.getElementById(“support”).innerHTML=“HTML5CanvasisnotsupportedÉ7inyourbrowser.”;8}4444、失败回退对于不支持canvas的浏览器，会显示canvas标签中间的备选文字。注意：还有两点不足的地方，在canvas中绘制的图片不能设置备选文字（textalternatives）。5555、浏览器支持除了IE其他浏览器都支持，微软承诺在IE9中会支持Canvas二、使用方法Canvas可以画直线，弧线，支持各种线条样式和使用纯色或图片填充，可以绘制文字和阴影等，API和一般语言的2D绘图API类似，就不在重复摘抄了，可以参看MozillaDeveloperCenter上的的官方教程或者Opera的教程。《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！Canvas有两点需要注意：1、可以以像素的方式读写Canvas对象；2、可以跨站在canvas中载入图片，但是跨站载入的图片不可以以像素的方式编辑。也就是说跨站载入的图片可以显示，但是不能读取和复制。本章的第二部分还介绍了一个使用Canvas元素的例子：HeatMap,，具体看附带的源代码。《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！第三章：介绍AudioAudioAudioAudio和VideoVideoVideoVideo标签这两个标签提供了在浏览器中不使用插件播放视频和音频的特性。书中提到了那场著名的HTML5视频格式大战，最后不同的浏览器还是选择了支持不同的格式。各浏览器对编码格式的支持：浏览器对媒体格式的支持两个标签的实际使用，请参考w3school的教程。://检测浏览器支持：varhasVideo=!!(document.createElement(‘video’).canPlayType);回退：XML/HTMLCode复制内容到剪贴板1videosrc=”video.ogg”2objectdata=”videoplayer.swf”type=”application/x-shockwave-flash”《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！3paramname=”movie”value=”video.swf”/4/object5/video如果浏览器不支持HTML5的浏览器会载入flash标签，支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。同样对于audio元素，不同的浏览器支持不同的格式，可以提供两种不同的格式供浏览器选择。XML/HTMLCode复制内容到剪贴板6audiocontrols7sourcesrc=”johann_sebastian_bach_air.ogg”8sourcesrc=”johann_sebastian_bach_air.mp3″9AnaudioclipfromJohannSebastianBach.10/audio非常酷的实例：最后书里面提供了一个canvas和video标签结合的实例：视频时间线浏览器，非常酷。使用video元素播放视频，然后用canvas显示视频的缩略图。在这个程序中作者使用一个特性，使用video标签对应的js对象代替img对象直接将视频的一帧绘制到canvas。应用示例书中提到的代码可以再这里下载。《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！第四章：地理位置APIAPIAPIAPI基于地理位置的应用越来越火，HTML5也提供了地理位置API。本章充数的文字比较多，不过还是有些内容的。获取地理位置的方式及其优缺点：1111、ipipipip地址书上说不准确，很多时候获取的是ISP机房的位置，但是获取非常方便，没有什么限制。但是实际上我觉得在中国，ip地址还是比较准确的，基本上上能精确到小区或大楼的标准。2222、GPSGPSGPSGPS非常准确，但是需要在户外，且需要很长时间搜索卫星。最主要的很多设备比如笔记本电脑基本都是不带GPS的，新的智能手机倒是都有。3333、WiFiWiFiWiFiWiFi基站的macmacmacmac地址。（猜测是连接位置已知的公共WiFi的时候，通过Mac地址识别WiFi接入点，从而定位)这种定位的精度还是很不错的，而且还可以在室内定位。不过由于这种位置公开的wifi比较少，此种方法的适用范围比较少。4444、GSMGSMGSMGSM或CDMACDMACDMACDMA基站通过基站定位，精度随基站密度变化，精度一般，还是只有手机能用。看来地理位置API还是手机上比较有实用性。5555、用户指定位置晕，这个就不是HTML5的范畴了。地理位置获取流程：1、用户打开需要获取地理位置的web应用。2、应用向浏览器请求地理位置，浏览器弹出询问窗口，询问用户是否共享地理位置。3、假设用户允许，浏览器从设别查询相关信息。4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。检测浏览器支持：《精通HTML5HTML5HTML5HTML5编程》本文档内容收集整理于互联网，感谢原作者的分享！JavaScriptCode复制内容到剪贴板1functionloadDemo(){2if(navigator.geolocation){3document.getElementById(“support”).innerHTML=“HTML5Geolocationsupported.”;45}else{6document.getElementById(“support”).innerHTML=“HTML5Geolocationisnotsupportedin7yourbrowser.”;8}9}位置请求方式：单次请求JavaScriptCode复制内容到剪贴板10navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,options);回调函数updateLocation接受一个对象参数，表示当前的地理位置，它有如下属性：latitude——纬度longitude——精度accuracy——精确度，单位米altitude——高度，单位米altitudeAccuracy——高度的精确地，单位米heading—运动的方向，相对于正北方向的角度speed——运动的速度（假设你在地平线上运动），单位米/秒回调函数handleLocationError接受错误对象，error.code是如下错误号。UNKNOWN_ERROR(errorcode0)——错误不在如下三种之内，你可以使用error.message获取错误详细信息。PERMISSION_DENIED(errorcode1)——用不选择不共享地理位置POSITION_UNAVAILABLE(errorcode2)——无法获取当前位置TIMEOUT(errorcode3)——在指定时间无法获取位置会触发此错误。第三个参数options是可选参数，属性如下：enableHighAccuracy——指示浏览器获