HTML5介绍PPT

HTML5介绍什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。2004年•提出构想2008年•发布第一份草案2012年•推广阶段2020年•最终测试2022年•正式发布HTML5时间表HTML5的八大新特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3语义语义化的标签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。拾色器inputtype=colorvalue=#ed1c24日期字段inputtype=datemin=2010-12-16/时间字段inputtype=timestep=1800/数字字段inputtype=numbermin=1max=10value=1滑动组件inputtype=rangemin=1max=10value=1类型匹配inputtype=email/inputtype=url/除了这些，还有…搜索inputtype=search/进度条progressvalue=25max=10025%/progress密钥keygenname=abcdefg输出10+5=outputname=sum/outputAndsoon…正则匹配inputtype=textpattern=[0-9]{10}必填字段inputtype=textrequired/选项列表inputtype=textlist=mydatadatalistid=mydataoptionlabel=Mrvalue=Misteroptionlabel=Mrsvalue=Mistressoptionlabel=Msvalue=Miss/datalist增强的表单控件微数据(Microdata)一个页面的内容，例如人物、事件或评论不仅要给用户看，还要让机器可识别。而要让机器知会特定内容含义，我们就需要使用规定的标签和属性。HTML5微数据规范是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评论。例如，事件可以包含venue、startingtime、name和category属性。=zh-Hans&answer=176035divmetaitemprop=ratingcontent=4评分:四星商户spanitemprop=count618/span封点评/div离线存储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接口实现的。性能与集成XMLHttpRequest2作为XMLHttpRequest的改进版，XMLHttpRequestLevel2在功能上有了很大的改进。支持跨源XMLHttpRequest和进度事件（Progressevents）。计算上传进度：xhr.upload.addEventListener(progress,function(e){varpc=parseInt(100–(e.loaded/e.total*100));progress.style.backgroundPosition=pc+%;}CSS3CSS选择器(CSSSelector)属性选择器E[att^=val]匹配属性att的值以val开头的元素E[att$=val]匹配属性att的值以val结尾的元素E[att*=val]匹配属性att的值包含val字符串的元素结构性伪类E:nth-child(n)匹配父元素的第n个子元素，第一个编号为1E:nth-child(odd)匹配父元素的奇数个子元素E:nth-child(even)匹配父元素的偶数个子元素反选伪类E:not(s)匹配不符合当前选择器的任何元素同级元素选择器E~F匹配任何在E元素之后的同级F元素完整的CSS3选择器：颜色(Color)透明度：opacity:0.1;opacity:0.5;opacity:0.9;RGBA色彩模式：color:rgba(255,0,0,0.75);PS:RGBA是在RGB的基础上多了控制alpha透明度的参数。HSL色彩模式：color:hsl(0,100%,50%);PS:HSL色彩模式是工业界的一种颜色标准，HSL分别代表色调，饱和度，亮度三个通道。分栏(Columns)column-count:3;column-rule:1pxsolid#bbb;column-gap:2em;边框(Border)盒阴影：box-shadow:2px2px2pxrgba(0,0,0,.5);圆角边框：border-radius:20px20px20px20px;文本(Text)文本阴影：text-shadow:0020px#fefcc9,10px-10px30px#feec85,-20px-20px40px#ffae34,20px-40px