HTML5介绍PPT

HTML5介绍什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。HTML5时间表HTML5出现背景自W3C于1999年发布HTML4后，Web世界快速发展，一片繁荣。人们一度认为HTML标准不需要升级了。一些致力于发展WebApp的公司另行成立了WHATWG组织，直到2007年，W3C从WHATWG接手相关工作，重新开始发展HTML5。HTML5的发展史，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。在互联网的早期，对用户而言，能打开浏览器接入到互联网世界就是一个神奇的事情，但互联网发展到2005年前后，开始出现下一个变化，就是宽带互联。随着宽带的普及和电脑性能的增强，人们不再满足于单纯的通过互联网看新闻、收发邮件，消耗更高带宽的娱乐产品开始出现，就是流视频和网页游戏。其实视频和游戏是古老的需求，在互联网不普及的时候，需求的满足方式是离线传输的VCD和游戏光盘;后来互联网逐渐普及，人们更改了使用方式，通过下载软件+本地媒体播放器来看视频，下载体积较大的端游玩游戏。但是对消费者体验更好的新方式还是出现并颠覆了以前的一切，那就是流媒体和网页游戏。Youtube等公司把握住潮流飞速崛起，各种页游公司也如雨后春笋。但是HTML标准没有把握住产业的变化及时演进，浏览器产品也未升级，这块新需求被浏览器插件满足了，那就是Flash。这个部署在亿万浏览器里的商业插件俨然成为事实标准。2005年Adobe巨资收购Macromedia，把Flash收归旗下，紧接着大幅推广FLV流媒体和actionscript语言，很明显这桩收购可以列为IT并购的经典案例，FLV流媒体和Flash游戏风靡互联网，Adobe在新的产业升级中攫取了大量的利润。除了Flash这个商业产品成为了事实标准，W3C还面临一个尴尬，就是另一个私有扩展协议的制造者—IE。IE当时在桌面浏览器占有垄断地位，并且扩展了大量的IEOnly语法，开发者完全不知道这些语言是谁定义的。整个web世界，就被两家公司微软+Adobe绑架了。很多IT巨头都坐不住了，尤其是苹果和Google。PC操作系统的世界难有突破，Web浏览器被苹果寄予厚望，而且第一代iPhone只支持网页，那时还没有Appstore，Safari是乔布斯非常看重的产品;新贵Google虽然大量赞助Mozilla，但并未对IE的地位产生实质影响，收购了YouTube后发现底层被Adobe控制，也是非常难过，而且Google每年给IE的搜索框和AdobleFLV缴纳的费用真不是小数目。既然大家都是W3C的主席单位，好吧，我们重新开始做HTML5吧。是的，HTML5其实就是这么诞生的。那是2007年，IE和Flash由盛转衰的转折点。HTML5的八大新特性语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。本地存储特性（Class:OFFLINE&STORAGE）基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5APPCache，以及本地存储功能。IndexedDB（html5本地存储最重要的技术之一）和API说明文档。设备兼容特性(Class:DEVICEACCESS)从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。连接特性（Class:CONNECTIVITY）更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。网页多媒体特性(Class:MULTIMEDIA)支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。三维、图形及特效特性（Class:3D,Graphics&Effects）基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。性能与集成特性（Class:Performance&Integration）没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。CSS3特性(Class:CSS3)在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。语义语义化的标签HTML5引入了新的HTML元素，通过使用这些元素，开发者可以更细致的描述文档结构，让文档更加易读，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以搜索到更快，更准确的信息。十个常用的新标签列表article定义文章aside定义文章的侧边栏figure一组媒体对象以及文字figcaption定义figure的标题footer定义页脚header定义页眉hgroup定义对网页标题的组合nav定义导航section定义文档中的区段time定义日期和时间被弃用的标签：acronym、applet、basefont、big、center、dir、font、frame、s、isindex、noframes、frameset、strike、tt、u和xmp。离线存储Web存储(WebStorage)HTML5提供了两种在客户端存储数据的新方法：localStorage-用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。sessionStorage-用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。以前，这些都是由Cookie完成的。但是Cookie有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。localStorage.length;localStorage.key(index);localStorage.setItem('foo','bar');localStorage.getItem('foo');localStorage.removeItem('foo');localStorage.clear();IndexedDataBase对于存储少量的数据，WebStorage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是IndexedDB的应用所在。IndexedDB严格遵循W3C的同源策略(所谓同源是指，域名，协议，端口相同。)，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如{name:sonic,age:27}。ApplicationCache使用ApplicationCache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的网站工作起来就像是线上一样，并且他们不会感觉到和真正在线使用有任何差异。那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。htmlmanifest=cache.appcacheCACHEMANIFEST#version1.0.0#缓存—定义了哪些资源是浏览器可以缓存的CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.png#网络—定义了哪些资源是需要用户在线才能使用的NETWORK:*设备通用拖拽与拖放(Drag&Drop)与文件处理(FileAPI)过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag&Drop拖拽事件，再结合FileAPI中的FileReader，一切变得soeasy~连接WebSocket现在，很多网站为了实现即时通讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务器资源和带宽并达到实时通讯。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。桌面通知(Notifications)通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。if(window.webkitNotifications.checkPermission()==0){vartitle='领跑HTML5支持傲游升级自主内核',text='桌面通知时HTML5的独门秘籍';window.webkitNotifications.createNotification('',title,text).show();}多媒体音频和视频(Audio+Video)Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。audiosrc=sound.mp3controls/audiovideosrc=movie.webmautoplaycontrols/video三维、图形与特效Canvas画布元素传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静态”的图像。而Canvas，则是用Javascript的一种绘图手段。可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。canvasid=canvaswidth=300height=300/canvasscriptvarctx=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();/scriptWebGLWebGL是一种3D绘图标准，有别于过往需加装浏览器插件，透过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。性能与集成2020/9/14•老版本的