HTML5通用培训课件

“新动能计划”通用培训系列课程揭秘HTML5什么是HTML5HTML的全称是HypertextMarkupLanguage（超文本标记语言）。HTML是用于描述网页文档的标记语言。HTML从1993到如今的发展，它作为网络语言标准规范，在计算机的发展史中有着不可或缺的地位。在2000年对基于Html4.0的版本进行了微小改进HTML4.01，并成为了国际标准化组织和国际电工委员会的标准，被沿用至今。HTML5同样是一个4.0之上的新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01标准。HTML5的八大特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3HTML5的八大特性-语义化的标签HTML5引入了新的HTML元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。HTMLHTML5HTML5的八大特性-语义化的标签定义文章定义文章的侧边栏一组媒体对象以及文字定义figure的标题定义页脚定义页眉定义对网页标题的组合定义导航定义文档中的区段定义日期和时间被弃用的标签：、和。十个十个HTML5常用的新常用的新标签：HTML5的八大特性离线存储HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：1、离线浏览用户可在应用离线时使用它们2、速度已缓存资源加载得更快3、减少服务器负载浏览器将只从服务器下载更新过或更改过的资源。原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。HTML5的八大特性设备通用设备通用主要是指：拖拽与拖放(Drag&Drop)与文件处理(FileAPI)。过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag&Drop拖拽事件，再结合FileAPI中的FileReader，一切变得soeasyHTML5的八大特性连接现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务器资源和带宽并达到实时通讯。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。连接则主要是指：WebSocketAudio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。HTML5的八大特性多媒体。HTML5的八大特性三维图形与特效。三维图形与特效则是指：Canvas画布元素以及WebGL传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。WebGL是一种3D绘图标准，有别于过往需加装浏览器插件，透过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。var ctx=document.getElementById(canvas).getContext(2d);ctx.fillRect(20,25,150,100);ctx.beginPath();ctx.arc(220,110,100,Math.PI*1/2,Math.PI*3/2);ctx.lineWidth=15;ctx.lineCap=round;ctx.strokeStyle=rgba(255,127,0,0.5);ctx.stroke();HTML5的八大特性性能与集成。作为XMLHttpRequest的改进版，XMLHttpRequestLevel2在功能上有了很大的改进。支持跨源XMLHttpRequest和进度事件（Progressevents）。计算上传进度：xhr.upload.addEventListener(progress,function(e)var pc=parseInt(100(e.loaded/e.total*100);progress.style.backgroundPosition=pc+%;HTML5的八大特性CSS3HTML5和CSS3代表着Web开发的未来，虽然相关规范还未最终敲定，但最新版浏览器和移动设备都已支持HTML5和CSS3。其主要优点有：1、减少开发成本与维护成本例如：CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。2、提高页面性能很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能，CSS3将完全向后兼容。总结oHTML5极大的解放了Web开发人员的工作量；oHTML5能提高互联网应用程序的开发效率；o由于浏览器支持程度并不一致，可以预见的是HTML5在互联网站上的普及还需要相当长的时间（IE9也将全面支持HTML5），但是这并不妨碍HTML5在新鲜出炉的各类移动终端设备上进行推广，譬如iPad等；o在一些内部应用上可以考虑指定浏览器并使用HTML5进行开发。o无论如何，HTML5是不可阻挡的技术发展趋势，它只会使我们未来使用互联网的方式越来越方便，越来越贴心。虽然现在还没有形式正式的标准，但从各个浏览器厂家的积极态度可以看出，无论标准何时被审核通过，都会促使网站建设者逐渐向HTML5标准靠拢，这对于所有的开发人员来说一定是一件幸事。Thank You!Thank You!