移动互联网开发技术之HTML5素材

NameDateHTML5HTML5简介HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务的需求，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX，并且提供更多能有效增强网络应用的标准集关于HTML5HTML5的正式版要到2014年才会出炉，但是现在已经有许多知名网站开始在使用这项新的技术规格;包括了Google、Facebook、Youtube、Wikipedia和Twitter。关于HTML51.HTML5就是Web的未来目前全球的前十大网站，已有8个正在使用HTML52.HTML5让设计过程变简单，减少浏览器对于外挂程式，如AdobeFlash、MicrosoftSilverlight的需求HTML5技术能确保各种功能，如影片或3D图形的运作，而且能在各式不同的装置及浏览器上使用关于HTML53.HTML5使开发时程更快速,HTML5添加了许多新的语法特征这些元素能够让开发人员更容易的在网页中添加和处理多媒体和图片内容，简化了开发人员编写网页的长度及复杂度4.HTML5扩展速度快根据Binvisions2010年9月的研究，全球百大网站中，已有34个网站开始使用HTML5。另外，根据StrategyAnalytics的研究，能兼容HTML5的手机将在2013年达到10亿台。关于HTML55.HTML5创造出惊艳的Web体验HTML5技术让开发及设计能够更有效率、更丰富，更能轻松地打造出令人惊艳的网站HTML5示例示例演示GoogleAppleMozilla:html5/HTML5-API即时二维绘图CanvasAPI：有关动态产出与渲染图形、图表、图像和动画的API定时媒体播放HTML5音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、整合的、脚本式的处理音频与视频的API，而无需安装任何插件离线存储数据库（离线网络应用程序）HTML5-APIGeolocationAPI使用者可共享地理位置，并在Web应用的协助下享用位置感知服务（location-awareservices）文件API处理文件上传和操纵文件文件写入从网络应用程序向文件里写内容……各浏览器的支持HTML5Test网站，是用以测试对浏览器对热门新功能的支援。测试的满分是500分，而当中的额外分数表示浏览器对一些没有列入W3G的标准亦有支持截止2012年6月27日，五大浏览器最新版本所取得的分数分别是HTML5学习资源HTML5中文网HTML5中国HTML5搜GBin1专题之HTML5教程第一章HTML5中常用的交互元素datalist标签该标签主要用于显示文档或某个细节信息的作用，常与summary、input元素配合使用inputid=myCarlist=carsdatalistid=carsoptionvalue=BMWoptionvalue=Fordoptionvalue=Volvo/datalist/inputdatalist标签span显示内容/spandetailsid=detailopen=open我被显示出来了/detailssummary标签标签包含details元素的标题，details元素用于描述有关文档或文档片段的详细信息detailssummaryHTML5/summary欢迎使用summary标签/detailsmenu标签定义菜单列表。当希望列出表单控件时使用该标签，该标签常与li列表元素结合使用，常用的属性如下：menu标签menuliimgsrc=..\Pictures\chrome.jpgspanChrome浏览器/span/liliimgsrc=..\Pictures\360.jpgspan360浏览器/span/liliimgsrc=..\Pictures\firefox.jpgspan火狐浏览器/span/li/menucommand标签用于定义各种类型的命令按钮，属性如下：注：目前只有IE支持command标签command标签menucommandonclick=alert('commandclick');ClickMe!/command/menucommand标签scripttype=text/javascriptfunctioncommand_click(){document.getElementById(show).innerHTML=点击了打开command·;}/script------------------------------------------------------------------menucommandonclick=command_click();打开/command/menudivid=show/divprogress标签用来表示页面中的某个任务完成的进度。例如下载文件时，可以通过该元素动态展示在页面中，展示方式可以使用整数或百分比progress标签pid=mytitle开始下载/pprogressvalue=0max=100id=objpro/progressinputtype=buttonvalue=下载onclick=btn_click();编写一个JS程序，实现如下效果：progress标签scripttype=text/javascriptvarintVal=0;varintTimer;varobjpro=document.getElementById('objpro');vartitle=document.getElementById('mytitle');functioninterval_handler(){intVal++;objpro.value=intVal;if(intVal=objpro.max){clearInterval(intTimer);title.innerHTML=下载完成;}else{title.innerHTML=正在下载+intVal+%;}}functionbtn_click(){intTimer=setInterval(interval_handler,100);}/scriptmeter标签表示在一定数量范围中的值，如投票中，候选人各占比例情况及考试分数等meter标签p120人参与投票，明细如下：/pp张三:metervalue=0.3optimum=1high=0.9low=1max=1min=0/meterspan30%/span/pp李四:metervalue=70optimum=100high=90low=10max=100min=0/meterspan70%/span/p第二章HTML5中的重要元素节点元素-section标签用于标记文档中的区段或段落，例如文章中的章节、页眉、页脚的设置节点元素-section标签sectiondraggable=trueh1王威/h1p性别:男邮箱:[e-mail]/p/section/*draggable是否可以拖动*/节点元素-nav标签该元素将具有导航性质的连接归纳在一块区域中，是页面元素更有语义性navdraggable=trueahref=index.html首页/aahref=book.html图书/aahref=bbs.html论坛/a/nav节点元素-hgroup标签用于对页面的标题进行分组，从而形成一个组群。该元素常与figcaption结合使用，figcaption说明各个组群的功能hgroupfigcaption标题组/figcaptionh1标题1/h1h2标题2/h2/hgroup节点元素-address标签定义文档作者或拥有者的联系信息，常用于article元素外部;如果位于article元素内部，则它表示该文章作者或拥有者的联系信息。通常的做法是将address元素添加到网页的头部或底部addresstitle=作者联系方式Writtenby=mailto:[e-mail]/abr//address分组元素-ul标签定义无序列表。使用与HTML4类似，但HTML5中不再支持compact和type属性ulli数码/lili图书ulli程序设计/lili经典文学/li/ul/lili百货/li/ul分组元素-ol标签定义有序列表olreversed=trueliCoffee/liliTea/li/ololstart=6liCoffee/liliTea/li/ol分组元素-ol标签定义一个定义列表。dl标签用于结合dt（定义列表中的项目）和dd（描述列表中的项目）dldtCoffee/dtddBlackhotdrink/dddtMilk/dtddWhitecolddrink/dd/dl文本层次元素-mark标签定义带有记号的文本。请在需要突出显示文本时使用mark标签pDonotforgettobuymarkmilk/marktoday./p文本层次元素-短语元素标签以下元素都是短语元素。并不反对使用它们，但是通过使用样式表(CSS)，可能取得更丰富的效果文本层次元素-短语元素标签emEmphasizedtext/em/brstrongStrongtext/strong/brdfnDefinitionterm/dfn/brcodeComputercodetext/code/brsampSampleComputerCode/samp/brkbdKeyboardtext/kbd/brvarVariable/var/brciteCitation/cite/br嵌入内容-img标签定义HTML页面中的图像scripttype=text/javascriptfunctionclick(){alert('图片被点击');}/script------------------------------------------------ahref=javascript:click()imgsrc=../Pictures/chrome.j