HTML5通用培训课件

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