HTML5程序设计及实践199

上传人：青*** IP属地：安徽上传时间：2026-06-27 格式：PPTX 页数：199 大小：7.77MB 积分：9.6 举报 版权申诉

已阅读5页，还剩194页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章HTML5概述浏览器发展历史蒂姆·伯纳斯·李（TimBerners-Lee）爵士（1955年出生于英国）是万维网的发明者，互联网之父。1989年3月他正式提出万维网的设想，1990年12月25日，他在日内瓦的欧洲粒子物理实验室里开发出了世界上第一个网页浏览器。HTML:1993年IETF团队形成一个草案，并不是成型的标准。1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。1996年HTML3.2成为W3C推荐标准。1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。浏览器发展历史1992年，托尼·约翰逊（TonyJohnson）发布了MidasWWW1994年，网景公司（Netscape）发布了Navigator浏览器。1995年，网页浏览器（InternetExplorer，IE）的发布掀起了“浏览器之战”。1996年，网景公司的Navigator浏览器所占有的浏览器市场份额达86%。微软公司开始将其整合到OS（操作系统）中。1996年9月，Opera浏览器面世。1998年，网景公司启动其开源产品，开始推出Mozilla。这一年的下半年，网景公司被AOL（美国在线服务公司）收购。2002年，Firefox（火狐）浏览器面世。2003年，苹果公司发布Safari浏览器。2004年，IE浏览器所占有的市场份额达到了历史顶峰——92%。自此以后，其市场份额开始下滑2006年10月，专为WindowsXP、WindowsServer2003和WindowsVista而设计的IE7面世。浏览器发展历史2008年，谷歌公司发布Chrome浏览器。2009年，专为Windows7、WindowsServer2003与2008、WindowsVista和WindowsXP设计的IE8面世。同年，火狐3.5面世。它是第一款支持多点触控的浏览器。Chrome在支持Windows的基础上又发布了Mac和Linux两个版本，至此Chrome浏览器已经支持所有主流系统。2010年，谷歌公司发布了Chrome5.0浏览器。它是第一款稳定支持三个平台的浏览器。Chrome5.0还是第一款有书签同步功能（bookmarksynchronization）的浏览器。2011年，微软发布IE9，IE9采用了新的JavaScript引擎Chakra，使网页加载速度很快，同时利用显卡GPU加速文字和图形的渲染、使CPU的负担也大大减轻。另外IE9开始支持HTML5和CSS3。2012年，Windows8正式上市后，IE10问世。2013年，随着Windows8.1的正式发布，IE11问世，IE11在IE10的基础上再次扩大对HTML5和CSS3的支持，且添加的这些新特性多数均是非常新潮的特性(如HTML5拖放，HTML5全屏，CSS边框图，视频码率控制，视频字幕隐藏，媒体加密，WebGL等等)，使得IE11在显示HTML5网页时基本不出现到处不支持的问题。浏览器谷歌：ChromeMozilla：Firefox微软：IE苹果：SafariOpera（欧朋）Maxthon（遨游）360、QQ等UC手机浏览器HTML5的历史1990年HTML1.0工作草案发布1995年HTML2.0发布1996年HTML3.2成为推荐标准1997年HTML4.0成为推荐标准，1999年HTML4.01成为推荐标准W3CXHMTL1->XHTML2;2004年，WHATWG致力于HTML5开发，2008年HTML5第一份草案发布，2014年10月28日，W3C的HTML工作组正式发布了HTML5的正式推荐标准（W3CRecommendation）HTML5是什么HTML5的诞生，来自对浏览器和网页开发技术的改进,不仅仅局限于HTML语言本身，还包括了CSS3以及JavaScript语言里新增的函数和功能。音频、视频不再需要插件的支持，避免插件安装失败等可能导致的问题；JavaScript能力大为增强，借助HTML中新增的<canvas>元素，更是能在网页中进行2D和3D图形、图像的实时绘制；CSS3的强大和良好的支持度让网页变得更加生动，同时还可以利用浏览器本身的硬件加速完成网页可以直接通过JavaScript访问摄像头、陀螺仪等等硬件设备浏览器支持度HTML5的语法规范内容类型（ContentType）：扩展名仍然为“.html”或“.htm”，内容类型仍然为“text/html”。DOCTYPE声明：在HTML5中，并没有使用版本声明，一份文档将会适用于所有版本的HTML。指定字符编码：可以直接使用meta元素的charset属性来指定字符编码，<!DOCTYPEhtml><metacharset=”UTF-8”>HTML5的元素标记HTML5的元素属性变化对于具有boolean值的属性，例如disabled和readonly等，当只写属性而不指定属性值时，则默认缺省值为true。<inputtype=”checkbox”checked/><inputtype=”checkbox”/><inputtype=”checkbox”checked=”checked”/HTML5新元素新的结构元素：section、article、aside、header、hgroup、footer、nav、figure新的媒体元素：audio、video、canvas等新的列表元素：details、detalist等新的表单域元素：email、rul、number、range、color、

datepickersHTML5文档结构<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>无标题文档</title></head><body></body></html><!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>HTML4HTML5第14页共4页开发工具与环境AdobeDreamweaverCS6VisualStudio2013EclipseLuna第15页共4页HTML5

DEMOhttp:///news/201406/warlial-html5-fff.html/art/201209/357270.htm第2章HTML5布局目录HTML5布局HTML5结构元素HTML5样式元素HTML5页面布局HTML5页面布局示例layout.html+style.css目录HTML5布局HTML5结构元素HTML5样式元素文章结构<body><article><header>

文章标题

</header>

正文内容

文章尾注

</footer></article></body>内容分段section、article和div有一些类似的地方，都可以用于区分网页的不同区域，section、article和div有区别的。div主要用于页面的大块布局；article元素强调的是独立性；section主要用于内容的分段；article元素和section元素是可以相互嵌套的，当一篇文章中有几个并列的段落是，就可以用section分段，当文章的其中一段具有独立性时，可以用article标识该段的独立性。内容分段<section> <h2>评论</h2> <article> <header> <h3>tom</h3> <p> <timedatetime="2015-1-413:20">2015年1月4日</time> </p> </header> <p>该活动非常专业</p> </article> <article> </article></section>辅助信息aside元素用于显示页面或文章相关，但是又可以独立的内容，可以是广告、引用、侧边栏等。示例：博客的网页，在底部使用aside元素实现了相关博客文章的链接<aside><h2>博客链接</h2><ul><li><ahref="#">物联网实训体系</a></li><li><ahref="#">金融财务外包实训体系</a></li><li><ahref="#">电商物流实训体系</a></li></ul></aside>导航信息nav元素包含一组用于页面导航的链接，通过这些链接可以跳转到其他页面或者本页面中的其他区块。用nav元素实现站点导航是最典型的应用。

显示/隐藏内容details元素和summary元素配合使用，可以方便的实现详细信息的显示和隐藏，在HTML4中必须用脚本才能实现该效果。<details><summary>JavaEE轻量级解决方案</summary><p>JavaEE技术经过多年的发展已经日趋成熟，成为当今企业级应用的最佳解决方案。在JavaEE技术中S2SH（Struts2+Spring+Hibernate）是目前最为流行的轻量级整合开发框架，得到了众多软件企业的认可，在Java开发群体中也得到了广泛的支持。本门课程集Struts2、Spring、Hibernate技术讲解为一体，并有机的将其整合在一起，是一门综合性强、应用性强的技术课程。</p><p></p></details>对话框HTML4中，实现对话框需要比较复杂的脚本，在HTML5中新增了dialog元素，该元素让开发人员非常方便的创建对话框，并显示在web页面中。<dialog> <form>评论：<inputtype="text"id=""/><br><inputtype="submit" id="btnaddcomment"> </form></dialog>图文结构figure元素规定独立的流内容（如图像、图表、照片、代码等等）。figurecapiton元素用于定义figure的标题，可以放置在figure元素开头或者结尾。<figureclass="post-image"> <imgsrc="../img/JavaSE.jpg"/> <figcaption>图1封面照片</figcaption></figure>目录HTML5布局HTML5结构元素HTML5样式元素mark元素mark元素用于强调文档中的一部分文档，以高亮背景显示<p> <mark>博弈论</mark>又被称为对策论（GameTheory）既是现代数学的一个新分支，也是运筹学的一个重要学科。</p>meter元素meter元素用于展示在数值范围内的测量值或是分数值，典型的例子是硬盘空间使用量<metervalue="2"min="0"max="10">2</meter><br><metervalue="0.6">60%</meter>progress元素progress标签用于表示进度，如任务完成的比例<progressvalue="40"max="100"></progress>wbr元素wbr元素可以实现英文单词换行<p> AJAX技术的学习过程中，我们必须对<mark>XML<wbr>Http<wbr>Request</mark>对象非常熟悉。 <br><br> AJAX技术的学习过程中，我们必须对<mark>XMLHttpRequest</mark>对象非常熟悉。</p>time元素time元素明确的对机器的日期和时间进行编码，并且更易读。pubdate属性是可选的、布尔值属性，表示文章或整个网页的发布日期。pubdate属性的使用有利于搜索引擎或者准确的文章发布日期。发布时间：<timedatetime="2014-11-26"pubdate="pubdate">2014-11-26</time>第3章HTML5表单目录新的表单域新的表单域属性新的form元素新的form属性Color类型color类型的表单域用于选择颜色<form>

请选择一个你喜欢的颜色:<inputtype="color"name="txtcolor"><br> <inputtype="submit"></form>date类型date类型的表单域，用于选择日期。其语法格式如下：<form>

日期:<inputtype="date"name="txtdate"> <inputtype="submit"value="提交"></form>datetime-local类型datetime-local用于选择本地时间<form>

日期时间:<inputtype="datetimelocal"name="txtdatetime"> <inputtype="submit"value="提交"></form>month类型month类型的表单域，用于选择月份<form>

月份:<inputtype="month"name="txtmonth"> <inputtype="submit"value="提交"></form>week类型week类型的表单域，用于选择周<form>

周:<inputtype="week"name="txtweek"> <inputtype="submit"value="提交"></form>time类型time类型的表单域，用于选择时间。<form>

时间:<inputtype="time"name="txttime"> <inputtype="submit"value="提交"></form>email类型email类型的表单域，用于输入应该包含e-mail地址的输入域<form>

电子邮件:<inputtype="email"name="txtemail"> <inputtype="submit"value="提交"></form>url类型url类型表单域用于输入包含URL地址信息<form> URL:<inputtype="url"name="txtURL"> <inputtype="submit"value="提交"></form>number类型number类型的表单域，用于输入应该包含数值的信息。在代码里可以设定输入数值的范围、初始值和步进单位。<form>

数字:<inputtype="number"name="txtnumber"min="1"max="10"step="2"value="3"> <inputtype="submit"value="提交"></form>range类型range类型的表单域，用于输入应该包含数值的输入域。<form>

范围:0<inputtype="range"name="txtrange"min="0"max="10"value="5">10 <inputtype="submit"value="提交"></form>search类型search类型用于搜索域，比如站点搜索或Google搜索<form>

查询:<inputtype="search"name="txtsearch"> <inputtype="submit"value="提交"></form>目录新的表单域新的表单域属性新的form元素新的form属性autofocus属性mark元素用于强调文档中的一部分文档，以高亮背景显示<formaction="#"method="post"> <p> 1:<inputtype="text"name="txt1"/></p> <p> 2:<inputtype="text"name="txt2"

autofocus/></p> <p> 3:<inputtype="text"name="txt3"/></p> <inputtype="submit"value="提交"/></form>form属性form属性用于指定当前输入域所属的表单，可以指定该输入域属于多个表单，不同form之间用空格分开。<formaction="#"id="form1"> <p> 姓名:<inputtype="text"name="txtName"/></p> <inputtype="submit"value="提交"/></form><p> 年龄:<inputtype="text"name="txtage"

form="form1"/></p>formaction属性formaction属性一般用于submit按钮，指向一个url地址。当form提交时，浏览器会根据该地址请求消息处理，该属性会覆盖form的aciton属性。<formaction="../jsp/info.jsp"method="post"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密码:<inputtype="password"name="txtpwd"/></p> <inputtype="submit"value="提交方式1"/> <inputtype="submit"value="提交方式2"

formaction="../jsp/infoWelcome.jsp"/></form>formenctyppe属性formenctyppe属性重新指定该表单域的编码方式。下面的示例中，表单的enctype属性默认值是“application/x-www-form-urlencoded”，“二进制”按钮的编码行为重新定义为"multipart/form-data"<formaction="../jsp/infoenctype.jsp"method="post"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密码:<inputtype="password"name="txtpwd"/></p><inputtype="submit"value="字符编码"/> <inputtype="submit"value="二进制"

formenctype="multipart/form-data"/></form>formenctyppe属性JSP代码<%

intlen=request.getContentLength();

bytebuffer[]=new

byte[len]; InputStreamin=request.getInputStream();

inttotal=0;

intonce=0;

while((total<len)&&(once>=0)){ once=in.read(buffer,total,len); total+=once; } ByteArrayOutputStreambaos=newByteArrayOutputStream(); baos.write(buffer); Stringstr=baos.toString(); baos.close(); out.println(str);%>formenctyppe属性formmethod属性formmethod属性用于指定表单的提交模式，该属性可以应用于submit和image类型的表单域，当表单域的formmethod属性与表单的method属性冲突时，以表单域的formmethod属性为准<formaction="../jsp/infoget.jsp"method="get"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密码:<inputtype="password"name="txtpwd"/> </p> <input type="submit"value="提交"> <inputtype="submit"formmethod="post"formaction="../jsp/infopost.jsp"value="以post方式提交"></form>formnovalidate属性formnovalidate属性作用于“submit”按钮，当设置按钮的formnovalidate属性时，按钮提交时会覆盖表单的novalidate属性，不进行表单域输入验证。<form>

电子邮箱:<inputtype="email"name="txtemail"> <input type="submit"value="提交"> <inputtype="submit"formnovalidatevalue="不验证提交"></form>formtarget属性formtarget属性可以作用于“submit”和“image”类型的表单域，用于指定表单提交时的目标窗口，表单域的formtarget属性会覆盖表单的target属性。<formaction="../jsp/info.jsp"method="get"> <p> 姓名:<inputtype="text"name="txtname"/></p> <p> 密码:<inputtype="password"name="txtpwd"/></p> <input type="submit"value="提交"> <inputtype="submit"formtarget="_blank"value="提交到新窗口"></form>height和width属性height和width属性用于指定表单域的大小，当前只能应用于image类型的表单域。<form>

电子邮箱:<inputtype="email"name="txtemail"><br><br>

原始大小：<inputtype="image"src="../img/submit.jpg"alt='submit'value="提交"><br>

指定大小：<inputtype="image"src="../img/submit.jpg"alt='submit'width="69"height="39"value="提交"> </form>list属性list属性用于指定表单域的下拉列表选项，其值等于datalist的id值<form>

教材名称：<inputlist="books"> <datalistid="books"> <optionvalue="JavaSE程序设计"> <optionvalue="JavaEE程序设计"> <optionvalue="ASP.NET程序设计"> </datalist> </form>min和max属性min和max属性用于指定表单域的输入值范围，这两个属性只能应用于类型为number、range、date、datetime、datetimelocal、month、time和week类型的表单域<form>

考试日期:<inputtype="date"min="2015-01-01"><br>

分数:<inputtype="number"max=100min=0></form>multiple属性multiple属性是布尔类型的，可以作用于file和email类型的表单域，file类型表单域具有该属性时，可以选择多个文件，email类型表单域具有该属性时，可以输入多个email邮箱地址。<formaction="../jsp/infomultiple.jsp"method="post">

选择文件：<inputtype="file"name="inptfile"multiple><br>

电子邮箱：<inputtype="email"name="inputemail"multiple><br> <input type="submit"value="提交"></form>pattern属性pattern属性用于给表单域设置一个正则表达式，用于限制用户输入的内容，该属性可以应用于text、search、url、tel、email和password类型的表单域。<form> <inputtype="text"pattern="^[0-9]*$"> <input type="submit"value="提交"></form>placeholder属性placeholder属性指定一个字符串，作为一个描述显示在表单域中，该提示信息一般是浅灰色，与用户输入信息有所区别，当用户输入信息后，该提示信息消失。<form> <p>姓名:<inputtype="text"name="txtname"placeholder="请输入姓名"/></p> <p>密码:<inputtype="password"name="txtpwd"placeholder="请输入密码"/> </p> <inputtype="submit"value="提交"/></form>required属性required属性用于指定表单域必须在提交之前输入值，该属性可以应用于text、search、url、tel、email、password、datepickers、number、checkbox、radio和file类型的表单域。<form> <p> 姓名:<inputtype="text"name="txtname"required/></p> <p> 密码:<inputtype="password"name="txtpwd"required/></p> <inputtype="submit"value="提交"/></form>step属性step属性用于指定表单域的数值间隔，该属性可以应用于number、range、date、datetime、datetime-local、month、time和week类型的表单域<form>

数字:<inputtype="number"name="txtnumber"step="5"> <inputtype="submit"value="提交"></form>目录新的表单域新的表单域属性新的form元素新的form属性datalist元素datalist元素用于辅助表单中文本框输入，它定义一个列表选项，文本框的list属性设置为datalist的id，文本框就会具有自动完成的特性，当用户在文本框输入值时，datalist元素的内容以列表的形式显示在文本框底部。<form>

教材名称：<inputlist="books"> <datalistid="books"> <optionvalue="JavaSE程序设计"> <optionvalue="JavaEE程序设计"> <optionvalue="ASP.NET程序设计"> </datalist> </form>keygen元素kegen元素提供了一种新的基于浏览器的安全认证模式，当表单提交时会生成两个密钥，一个是私钥，一个是公钥，其中私钥存储在客户端，公钥与表单数据一起发送到服务器端，服务器端可以根据该公钥对客户端进行验证。<formaction="../jsp/infoget.jsp">

请输入密码:<inputtype="password"name="txtpwd"/><br>

请选择加密强度:<keygenname="key"><br> <inputtype="submit"value="提交"/></form>output元素output元素用于显示计算结果，一般是由脚本触发。<formoninput="x.value=parseInt(a.value)+parseInt(b.value)"> <inputtype="number"id="a"value="50">+<inputtype="number"id="b"value="50">= <outputname="x"for="ab"></output></form>目录新的表单域新的表单域属性新的form元素新的form属性autocomplete属性autocomplete属性用于设置一个表单中的输入域是否拥有自动完成功能，当设置为“on”时，浏览器会根据用户输入的值显示可用的选项，选项的内容是根据用户之前录入的内容确定。<formaction="#"method="post"autocomplete="on"> <p> 姓名:<inputtype="text"name="userName"/></p> <p> 密码:<inputtype="password"name="userPassword"/> </p> <inputtype="submit"value="提交"/></form>novalidate属性novalidate属性是一个布尔类型的属性，当是设置表单属性为novalidate时，表单提交时，输入域中输入的值不会被验证<formaction="#"method="post"novalidate>

电子邮箱:<inputtype="email"name="txtemail"> <inputtype="submit"value="提交"></form>第4章HTML5画布目录绘制图像绘制文字使用图像高级特性Canvas基础HTML5中提供了Canvas标签，用户实现画布操作，下面的代码实现了一条直线。<body><canvasid="myCanvas"with=800height=600></canvas><scripttype="text/javascript"> varcanvas=document.getElementById("myCanvas"); varcontext=canvas.getContext("2d"); context.moveTo(10,10); context.lineTo(200,200); context.stroke();</script>绘制直线strokeStyle设置线的颜色，moveto移动坐标，lineTo从当前坐标看是画线到目标坐标，stroke画线。 context.strokeStyle="red"; context.moveTo(20,80); context.lineTo(260,80); context.stroke();绘制渐变直线strokeStyle设置线的颜色，moveto移动坐标，lineTo从当前坐标看是画线到目标坐标，stroke画线。vargradient=cxt.createLinearGradient(0,0,170,0);gradient.addColorStop(0,"blue");gradient.addColorStop(0.5,"green");gradient.addColorStop(1,"red"); cxt.strokeStyle=gradient;绘制填充矩形fillRect方法有四个参数，分别代表：矩形左上角x坐标、矩形左上角y坐标、矩形宽度、矩形高度。cxt.fillStyle="green";cxt.fillRect(30,30,100,50);绘制线性渐变的矩形month类型的表单域，用于选择月份vargradient=cxt.createLinearGradient(0,0,170,50);gradient.addColorStop(0,"#FF0000");gradient.addColorStop(1,"#00FF00"); cxt.fillStyle=gradient;cxt.fillRect(30,30,200,80)绘制圆形或圆弧week类型的表单域，用于选择周//绘制一个圆cxt.beginPath();cxt.arc(70,70,50,0,2*Math.PI);cxt.stroke();cxt.closePath();//绘制一个半圆cxt.beginPath();cxt.arc(200,70,50,0,1*Math.PI);cxt.stroke();cxt.closePath();绘制文字vargradient=cxt.createLinearGradient(0,0,c.width,0);gradient.addColorStop(0,"magenta");gradient.addColorStop(0.5,"blue");gradient.addColorStop(1,"red"); cxt.fillStyle=gradient;cxt.font="30pxVerdana";cxt.fillText("好好学习，天天向上",15,75);绘制轮廓文字cxt.strokeStyle=gradient;cxt.font="30pxVerdana";cxt.strokeText("好好学习，天天向上",15,75);绘制图片varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");varimg=newImage();img.onload=function(){ cxt.drawImage(img,0,0);}img.src="images/view.jpg";阴影效果varc=document.getElementById("myCanvas");varcxt=c.getContext("2d"); cxt.shadowBlur=30;cxt.shadowColor="black";cxt.fillStyle="green";cxt.fillRect(20,20,100,70);动画效果设计一个时钟

读取系统时间，每隔一秒钟，刷新画布，绘制表盘、时针、分针和秒针。第5章HTML5拖放目录拖放实现方式dataTransfer对象拖放文件拖放实现方式(一）首先把draggable属性设置为true。。<divdraggable="true"/>然后在被拖动元素和目标元素上添加事件处理，这些事件触发的时间和作用的目标对象各不相同。dragstart：在开始拖放动作时执行，该事件的对象是被拖动元素；drag：在拖动过程中执行，该事件的对象是被拖动元素；dragenter：当拖动界面元素进入目标元素时发生，该事件的对象是目标元素；dragover：当拖动界面元素在目标元素上移动时发生，该事件的对象是目标元素；dragleave：当拖动界面元素离开目标元素时发生，该事件的对象是目标元素；drop：将界面元素放置在目标元素时发生，该事件的对象是目标元素；dragend：完成拖放时间后反生，在drop事件之后触发，该事件的对象是被拖动元素。拖放实现方式（二）在页面上部署两个列表<ulid="rolelist"ondrop="dragDrop(event)"ondragover="dragOver(event)"><liid="role1"draggable="true"ondragstart="dragStart(event)">项目经理</li>…</ul><ulid="rolebox"ondrop="dragDrop(event)"ndragover="dragOver(event)"></ul>拖放实现方式（三）functiondragStart(event){ event.dataTransfer.setData("text/plain",event.target.id);}functiondragOver(event){ event.preventDefault();}functiondragDrop(item){ item.preventDefault(); vardata=item.dataTransfer.getData("text/plain"); item.target.appendChild(document.getElementById(data));}dataTransfer对象属性dropEffect：设置拖放操作使用的实际行为，该属性值应该设置为effectAllowed允许的值，否则拖放操作会失败。dropeffect属性在dragenter和dragover事件中进行设置，允许设置的值有“copy”、“link”、“move”和“none”。copy：被拖动对象拷贝到目标元素，鼠标指针显示为move：被动对象移动到目标元素，鼠标指针显示为link：目标元素建立一个被拖动对象的链接，鼠标指针显示为none：不允许放到目标位置。functiondragEnter(event){ event.dataTransfer.dropEffect='move';}dataTransfer对象属性effectAllowed：设置拖动允许发生的拖动行为，在dragstart事件中设置该属性值，该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

copy：被拖动对象拷贝到目标元素，dropEffect应设置为“copy”；

move:被动对象移动到目标元素，dropEffect应设置为“move”；

link：目标元素建立一个被拖动对象的链接，dropEffect应设置为“link”；

copyLink：拷贝对象或建立对象链接，dropEffect应设置为“copy”或“link”；

copyMove：拷贝或移动对象，dropEffect应设置为“copy”或“move”；

linkMove：移动对象或建立对象链接，dropEffect应设置为“move”或“link”；

all：允许所有的拖放行为；

none：不允许任何拖放行为；

uninitialized：effectAllowed的默认值，执行行为等同于all。functiondragStart(event){ event.dataTransfer.effectAllowed='copyLink'; event.dataTransfer.setData("Text",event.target.id);}dataTransfer对象属性types：该属性返回一个List对象，包含所有存储到dataTransfer的数据类型，不同浏览器支持的数据类型不同，IE限制最严格，Chrome和Firefox可以用任意字符串作为一种类型。files：该属性返回一个List对象，从本地硬盘拖拽文件到浏览器中时，通过该属性获取文件列表，此时types属性为files。dataTransfer方法setData(format,data)：将指定格式的数据存储在dataTransfer对象中，参数format定义数据类型，data定义需要存储的数据。getData(format)：从dataTransfer对象中获取指定格式的数据，参数format定义要读取数据的数据类型，如果指定的数据类型不存在，则返回空字符串或报错。clearData([format])：从dataTransfer对象中删除指定格式的数据，参数format可选，如果未指定格式，则删除对象中所有数据。setDragImage(element,x,y)：设置拖放操作时跟随的图片。参数element定义图片，x设置图片与鼠标在水平方向上的距离，y设置图片与鼠标在垂直方向上的距离。默认情况下，被拖动对象转换为一张透明图片跟随鼠标移动，也可以通过该函数自定义的图片event.dataTransfer.setData("text",event.target.id);vardata=event.dataTransfer.getData("text");event.dataTransfer.clearData("text");varimg=newImage();img.src="../img/logo.png";event.dataTransfer.setDragImage(img,0,0);使用dataTransfer对象定义了两个div元素，分别表示“待删除文件”和“回收站”，一个div元素用于显示拖动的状态，称之为“状态元素”。使用dataTransfer对象定义了两个div元素，分别表示“待删除文件”和“回收站”，一个div元素用于显示拖动的状态，称之为“状态元素”。当拖动“待删除文件”到“回收站”过程中，依次执行如下事件。dragstart：将dataTransfer的属性effectAllowed设置为“copy”，利用dataTransfer的setData方法，将“待删除文件”的id值作为text类型数据存入dataTransfer对象，状态元素显示为“开始拖动”；drag：状态元素显示为“拖动中…”，由于drag事件在dragstart事件后马上执行，所以状态元素显示为“开始拖动”的时间非常短，无法从状态元素上看到“开始拖动”的文字，drag事件在拖动过程中会反复执行；dragenter：当拖动“待删除文件”进入“回收站”时执行，状态元素显示为“进入目标区域”；dragover：当拖动“待删除文件”在“回收站”内移动时执行，将状态元素显示为“在目标区域移动”，设置dataTransfer的dropEffect属性为“copy”，与dragstart中的effectAllowed相对应。该事件在dragEnter事件后立即执行，会覆盖dragenter的状态显示，dragover在目标元素内拖动鼠标时反复执行；dragleave：当拖动“待删除文件”移出“回收站”时执行，将状态元素显示为“离开目标区域”；drop：当将“待删除文件”放到“回收站”时执行，利用dataTransfer的getData方法获取Text类型的数据，在这个例子中是“待删除文件”的id属性值，通过getElementById方法获得“待删除文件”元素，并追加到“回收站”中，状态元素显示为“放下对象”；dragend：拖动结束时执行，状态元素显示为“拖放结束”，在drop事件之后马上执行。拖放文件functiondragDrop(e){ e.stopPropagation(); e.preventDefault(); varfileList=e.dataTransfer.files; varfileType=fileList[0].type; varoImg=document.createElement('img'); varreader=newFileReader(); varoDropBox=document.getElementById('dropBox'); if(fileType.indexOf('image')==-1){ alert('必须是图形文件！'); return; } reader.onload=function(e){ oImg.src=this.result; oDropBox.innerHTML=''; oDropBox.appendChild(oImg); }; reader.readAsDataURL(fileList[0]);};第6章HTML5音频和视频目录使用audio播放音频使用video播放视频使用DOM进行视频控制audio标签属性值描述autoplayautoplay音频在就绪后马上播放controlscontrols向用户显示控件，比如播放按钮looploop音乐播放结束后重新播放preloadpreload音频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性srcurl要播放的音频url格式IEFireFoxOperaChromeSafariOgg

√√√

MP3√√√√√Wav

√√√√audio标签<audiocontrols><sourcesrc="Source/videos/rainstill.mp3"type="audio/mpeg"></audio><sourcesrc="Source/videos/song.ogg"type="audio/ogg"></audio></audio>vedio标签属性值描述autoplayautoplay视频在就绪后马上播放controlscontrols向用户显示控件，比如播放按钮looploop视频结束后重新播放preloadpreload视频面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性srcurl要播放的视频widthpixels播放器的宽度heightpixels播放器的高度vedio标签格式IEFireFoxOperaChromeSafariOgv√√√MPEG4√√√√√WebM√√√方法描述addTextTrack()向视频添加新的文本轨道。canPlayType()检查浏览器是否能够播放指定的视频类型。load()重新加载视频元素。play()开始播放视频。pause()暂停当前播放的视频。video标签//播放/暂停functionPlayorPause(){ if(video.paused){ video.play(); } else{ video.pause(); }} //音量增大functionAddVolume(){ if(video.volume<1){ video.volume+=0.1; }} video标签//快进functionAddSpeed(){ video.playbackRate+=1;} //设置静音functionSetMuted(){ if(!video.muted){ video.muted=true; document.getElementById("setMuted").value="取消静音"; } else{ video.muted=false; document.getElementById("setMuted").value="设置静音"; }} 第7章HTML5Web存储目录Web存储WebSQLDatabase索引数据库认识Web存储两种Web存储方式会话存储（SessionStorage）：它的访问性上只限于当前页面，并且页面关闭后会消失，通过sessionStorage进行访问。本地存储（LocalStorage）：没有时间限制的数据存储，通过localStorage进行访问。WebStorage和Cookie的异同网络传输：Cookie会随着请求发送到服务器端，而WebStorage数据存在客户端，不会与服务器发交互。存储限制：Cookie存储的数据大小限制为4KB，而WebStorage能够提供更大容量的存储设计，根据浏览器不同，可以存储5MB左右的数据。数据接口：WebStorage提供丰富的数据接口，开发人员可以方便的访问数据，而Cookie则需要开发人员自行开发接口。存储空间：WebStorage每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。Web存储API函数名功能length存储的键/值对的数量key(n)返回存储的第N个键。getItem(key)返回键key对应的值。如果值不存在，则返回空null。注意，返回的值是一个字符串。如果你存储的值是整数或布尔型，你需要类型转换。setItem(key,value)把值插入到key键中removeItem(key)移除某个键对应的值（包含键本身）。如果键不存在，此方法什么也不做。clear清空存储的键/值数据WebSQLDatabaseWebSQLDatabase允许应用程序通过一个异步JavaScript接口访问SQLLite数据库，HTML5的WebSQLDatabaseAPI有三个核心的方法

函数功能openDatabase()打开数据库或者创建新的数据库transaction()控制事务的提交和回滚executeSql()执行SQL语句WebSQLDatabase打开数据库：使用openDatabase（）方法打开数据库，如果该数据库不存在，则创建新的数据库。该方法包含五个参数：数据库名、版本号、描述、数据库大小、回调函数，其中回调函数可以省略。通过事务执行SQL：transaction()方法接收一个方法作为参数，在该方法中执行SQL脚本vardb=openDatabase('student','1.0',’StudentInfo',5*1024);vardb=openDatabase('student','1.0','StudentInfo',5*1024);db.transaction(function(tx){ tx.executeSql('CREATETABLEstudentinfo(idINTEGER,nameTEXT)'); tx.executeSql('INSERTINTOstudentinfo(id,name)Values(1,"zhangsan")');});索引数据库WebSQLDatabase已被较新的规范——索引数据库所取代，目前浏览器正在逐步实现对索引数据库的支持。索引数据库以window.indexDB作为入口，但各个浏览器增加了前缀，获取方式一般采用。采用command->request->result的调用方式，比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;索引数据库打开数据库onupgradeneeded这个回调函数：当数据库发生改变时调用。比如，当某个数据库不存在需要创建，或者数据库更改时。一般在该回调函数内创建objectStore，相当于数据库中的一张表。varpeopleData=[{name:"JohnDow",email:"john@"},{name:"DonDow",email:"don@"}];vardb;varrequest=indexedDB.open("PeopleDB",1);request.onsuccess=function(evt){db=request.result;};request.onerror=function(evt){console.log("IndexedDBerror:"+evt.target.errorCode);};request.onupgradeneeded=function(evt){varobjectStore=evt.currentTarget.result.createObjectStore("people",{keyPath:"id",autoIncrement:true});objectStore.createIndex("name","name",{unique:false});objectStore.createIndex("email","email",{unique:true});for(iinpeopleData){objectStore.add(peopleData[i]);}};索引数据库插入数据//界面控件数据获取varname=document.getElementById('txtName').valuevaremail=document.getElementById('txtEmail').value;//事务vartransaction=db.transaction("people","readwrite");//对象库varobjectStore=transaction.objectStore("people");//添加对象

varrequest=objectStore.add({name:name,email:email});request.onsuccess=function(event){

};索引数据库浏览数据//输出区域varoutput=document.getElementById('printOutput');output.textContent="";//事务vartransaction=db.transaction("people","readwrite");varobjectStore=transaction.objectStore("people");//打开数据表varrequest=objectStore.openCursor();request.onsuccess=function(event){varcursor=event.target.result;if(cursor){output.textContent+="id:"+cursor.key+"is"++"";cursor.continue();}else{console.log("Nomoreentries!");}};第8章HTML5应用程序缓存目录应用程序缓存的起源实现离线应用更新离线应用问题应用场景网络连接状态不稳定的情况下，使用者打开网页或者Web应用临时处理一些工作任务，比如在手机或PC机上打开一个网页，计算买房贷款的金额数，在某个特定时间向家人或朋友展示计算的结果网络连接状态不稳定的情况下，阅读或撰写电子邮件，创建待办事件列表在离线状态访问Web应用，比如在航班上，使用手机查看昨天看过的财务报表占用大量网络带宽的Web应用，可以使用应用程序缓存，只在又内容发生变化时，才从服务器重新获取资源，降低服务器的负载压力。应用程序缓存和浏览器缓存的区别浏览器缓存在用户触发“后退”操作或点击一个之前看过的链接时起作用。在网站上访问同一张图片，该图片可以从浏览器缓存中调出并几乎立即显现出来。应用程序缓存，避免了加载应用程序时所需的常规网络请求，如果缓存请求(cachemanifest)文件是最新的，浏览器就知道无需检查其他资源是否最新。应用程序缓存让Web应用就拥有了本来只属于桌面应用的特性HTML5应用程序缓存为整个Web应用提供服务，浏览器缓存只缓存单个页面；HTML5应用程序缓存可以指定需要缓存的文件和只能在线浏览文件，浏览器缓存无法指定。HTML5应用程序缓存可以动态通知用户进行更新。浏览器支持情况浏览器对应用程序缓存支持程度不同。检测浏览器支持情况浏览器说明IE10.0及以上版本支持Firefox3.5及以上版本支持Opera10.6及

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML5程序设计及实践199

文档简介

温馨提示

最新文档

评论

相关文档