下载文档原格式
第 01 节、HTML 5之表单新功能解析Web世界里这簇美艳的花朵—HTML 5，毋庸置疑是新趋势的技术，本文我将详细介绍一下HTML 5中对表单功能的更新.时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵—HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再遥远.学习HTML 5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML 5中对表单功能的更新.。
一、表单结构更自由XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.比如:<form id="iform"><input type="text">...</form><input value="我在id为iform的表单外" form="foo">二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)email输入类型<input type="email" name="email">此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.url输入类型<input type="url">上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样. number输入类型<input type="date"><input type="time"><input type="month"><input type="week">这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.range输入类型<input type="number">此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.search输入类型<input type="search">此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.tel输入类型<input type="tel">此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别. color输入类型<input type="color">此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.三、新增的表单属性placeholder属性<input type="text" placeholder="点击我会以清除">这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.require/pattern属性<input type="text" name="require" required=""><input type="text" name="require1" required="required"><input type="text" name="require2" pattern="^[1-9]\d{5}$">表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.autofocus属性<input type="text" autofocus="true">默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().list属性<input type="text" list="ilist"><datalist id="ilist"><option label="a" value="a"></option><option label="b" value="b"></option><option label="c" value="c"></option></datalist>该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.max/min/step属性<input type="range" max="100" min="1" step="20">限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.autocomplete属性<input type="text" autocomplete="on">此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.第 02 节、HTML 5标签、属性、事件及兼容性速查表为了方便大家学习HTML 5 ，本文与大家分享几份HTML 5 标签、属性、事件及浏览器兼容性速查表。
html5⼗个新特性HTML5⼗个新特性（⼀）语义标签（语义化标签为页⾯提供了更好的页⾯结构。
） HTML5的语义化标签包括： <section> - 代表⽂档中的⼀段或者⼀节；<nav> - ⽤于构建导航；<article> - 表⽰⽂档、页⾯、应⽤程序或⽹站中⼀体化的内容；<aside> - 代表与页⾯内容相关、有别于主要内容的部分；<hgroup> - 代表段或者节的标题；<header> - 页⾯的页眉；<footer> - 页⾯的页脚；<time> - 表⽰⽇期和时间；<mark> - ⽂档中需要突出的⽂字。
（⼆）增强型表单 HTML5 新增的表单属性placehoder 属性，简短的提⽰在⽤户输⼊值前会显⽰在输⼊域上。
即我们常见的输⼊框默认提⽰，在⽤户输⼊后消失。
required 属性，是⼀个 boolean 属性。
要求填写的输⼊域不能为空pattern 属性，描述了⼀个正则表达式⽤于验证<input> 元素的值。
min 和 max 属性，设置元素最⼩值与最⼤值。
step 属性，为输⼊域规定合法的数字间隔。
height 和 width 属性，⽤于 image 类型的 <input> 标签的图像⾼度和宽度。
autofocus 属性，是⼀个 boolean 属性。
规定在页⾯加载时，域⾃动地获得焦点。
multiple 属性，是⼀个 boolean 属性。
规定<input> 元素中可选择多个值。
（三）视频和⾳频视频播放：<video src=""><video>⾳频播放：<audio src=""></audio>（四）Canvas绘图<canvas width="1000" height="1000"></canvas>js内容var canvas = document.getElementsByTagName("canvas")[0];var context = canvas.getContext("2d");路径写法是常⽤的写法// 1.开始⼀条路径// 2.具体是个什么样的路径// 3.结束路径（可选，加上去以后就会成⼀个封闭的，不加就表⽰随时结束）常⽤在点的绘制上// 4.设置属性（颜⾊）只要是在绘制之前设置都是OK的，随便你放在第⼏步，但是的再绘制之前// 5.绘制（fill（）stroke（））context.beginPath(); //开始⼀条路径context.rect(10,10,100,100);context.closePath();context.fillStyle = "#f00";context.fill()context.beginPath();context.moveTo(340,10);context.lineTo(440,10);context.lineTo(440,110);context.lineTo(340,110);context.lineTo(340,10);// context.closePath();context.strokeStyle = "#0f0";context.lineWidth = "10"context.stroke()context.beginPath();context.moveTo(450,10);context.lineTo(550,10);context.lineTo(550,110);// context.lineTo(450,110);context.fillStyle = "#00f";context.fill() //实⼼绘制会⾃动的闭合// 画圆// 1.开始⼀条路径// 2.绘制圆的路径⽅法// 3.结束⼀条路径// 4.设置圆的属性// 5.开始绘制context.beginPath();// context.arc(x,y,r,起始⾓，结束⾓[，绘制的⽅向。
html5 input元素新特性属性<input>元素在HTML5中新增加的属性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。
简单描述新增加的属性描述如下：autocomplete：是否显示与现在输入内容相匹配的历史输入记录。
autofocus：当页面加载完成后，此元素获得焦点。
form：设置元素归属表单的ID。
formaction：设置表单action属性的值。
formenctype：设置表单enctype属性的值。
formmethod：设置表单method属性的值。
formnovalidate：关闭表单的验证。
formtarget：设置表单target属性的值。
max：设置<input>元素中数字或日期控件的最大值。
min：设置<input>元素中数字或日期控件的最小值。
minlength：设置文本输入控件的内容最小长度。
pattern：设置元素文本内容需匹配的正则表达式。
placeholder：设置文本控件的预先显示内容。
readonly：设置元素是否只读。
required：设置控件是否为必填项。
autocomplete ：是否显示与现在输入内容相匹配的历史输入记录说明：设置当前文本元素中是否显示与现在内容相匹配的历史输入记录。
场景：搜索框需要此属性，而验证码就不需要。
可设置的值：只可以设置on、off两个值。
autocomplete="on" ：显示匹配的历史输入记录。
autocomplete="off" ：不显示匹配的历史输入记录。
示例：autofocus ：当页面加载完成后，此元素获得焦点说明：若页面中有多个元素含有此属性，只会最前面的元素获得焦点。
HTML5新特性目录概述 (1)1.新特性 (1)1.1 语义化标记 (1)1.2 表单增强 (1)1.3无需插件支持的视频/音频 (2)1.4 画布 (3)1.5可编辑内容、拖放 (4)1.6 稳健的数据存储 (4)2 废弃的标签 (5)3.缺点 (5)3.烟草集团数据中心与HTML5 (5)3.1 兼容性 (5)3.2 应用方面 (5)4 画布报表 (5)4.1 传统报表解决方案 (6)4.2 方案比较 (6)概述随着浏览器厂商对互联网浏览器思路的改进，从而诞生了HTML标准的原型，通过这几年的发展HTML标准已经到第五代。
近期用HTML5取代Flash或Shockwave的呼声越来越高。
虽然HTML5将会对互联网的很多方面做出改进，使网站具备更丰富的功能、让互联网访问变得更加安全和高效。
但距离HTML5成为标准还有很长的差距，目前包含IE在内的主流浏览器对HTML5的支持还不是完美，不过值得我们期待的是，新一代的IE9、Chrome 6、Firefox4等浏览器都已经开始全面的扩展对HTML5的支持。
1.新特性Html5新特性主要体现在:语义化标记、Form 表单增强功能、视频/音频、画布（Canvas）、可编辑内容、拖放、稳健的数据存储等方便，HTML5其实是关于图像，位置，存储，速度的优化和改进。
初步体验感受：简洁、华丽。
1.1 语义化标记简洁的DOCTYPE，有意不使用版本，因此文档将会适用所有版本的HTML。
简单易记的语言标签，写法上较之前更为简洁。
在HTML5 中，空标签（如：br、img 和input ）并不需要闭合标签。
新增的一些新标签更具语义，不过大多数都是原有标签的替代，提过得额外功能不是很多。
1.2 表单增强HTML5 为表单提供了几个新的属性、input 类型和标签。
例如：color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, 和 url等，使用这些标签将大大简化开发复杂度，比如使用date标签，我们将不再需要利用外包js就可以选择日期。
HTML5技术的基本知识和应用HTML5，全称为超文本标记语言第5版，是Web开发领域的一个重要技术。
与之前的HTML版本相比，HTML5拥有更多的功能，能够支持更加复杂的内容和交互方式。
本文将介绍HTML5技术的基本知识和应用，让读者对该技术有更加深入的了解。
一、HTML5技术的基本知识1. HTML5的语法规范HTML5的语法规范与之前版本有所不同。
一般来说，HTML5的语法规范遵循以下几个原则：（1）只允许小写字母的标签和属性名。
（2）不需要关闭所有的标签，具体来说就是不需要在空标签中使用结束标记。
（3）可以包含自定义数据属性，即"data-"属性，这些属性可以用于存储页面元素的一些自定义数据。
2. HTML5的新增元素HTML5新增了很多元素，这些元素能够更加方便地实现各种功能。
下面是比较常用的几个元素：（1）Canvas元素：用于绘制图像、动画以及游戏等。
（2）Video元素：用于播放视频。
（3）Audio元素：用于播放音频。
（4）Article元素：表示一个独立的内容块，可以包含标题、作者、发布日期等元素。
（5）Section元素：表示文档中的一个段落。
3. HTML5的Web WorkersHTML5的Web Workers是一种新引入的技术，可以在后台运行脚本，而不会影响页面的性能。
Web Workers主要用于处理一些需要大量计算的任务，例如数据的处理和统计等。
Web Workers可以创建多个线程，使得页面能够更快地响应用户的操作。
二、HTML5技术的应用1. 移动应用开发HTML5技术可以用于开发移动应用，这种应用可以运行在多个平台上，例如iOS、Android等。
HTML5的移动应用可以使用框架，例如jQuery Mobile和Sencha Touch等框架，这些框架可以快速地构建出移动应用界面，并且可以实现很多很好看的效果。
使用HTML5技术开发移动应用还可以节省开发成本，同时对于一些简单的应用，使用HTML5技术需要的硬件资源很小，对于用户的手机影响也比较小。
HTML5的新特性与应用随着互联网技术的不断发展，HTML5作为一种新的WEB标准，已经成为了互联网新时代网站开发的一种基础技术。
HTML5在保留了HTML4和XHTML的优点的同时，还引入了一些新特性和应用，使得网站和应用程序的开发更加方便、快捷和可靠。
一、HTML5的新特性1.新标签HTML5新增了许多语义化的元素标签，以便更好地定义网页内容。
比如，<header>、<footer>、<nav>、<article>、<section>、<aside>、<time>等等，这些标签让网页的结构更加清晰、易于理解和维护。
2.多媒体元素HTML5支持多媒体元素，包括<video>、<audio>等标签，使得开发者可以方便地在网页中嵌入视频和音频。
3.本地存储HTML5用localStorage和sessionStorage两个对象来提供本地存储功能，这比传统的cookie更加简单、可靠和安全。
4.地理定位HTML5提供了地理定位功能，使得web应用可以获取用户的地理位置信息，从而为用户提供更加精准的服务和信息。
5.Web WorkerHTML5提供了Web Worker功能，这使得浏览器可以在后台运行JavaScript程序，从而不会影响用户的正常操作。
二、HTML5的应用1.移动应用HTML5的新特性和应用让它成为了移动应用开发的重要技术，特别是在跨平台开发方面，HTML5的优势更加明显。
2.游戏开发HTML5的多媒体元素、canvas和Web GL等技术，使得开发者可以在网页中创建复杂的游戏和动画，其可玩性和视觉效果也越来越好。
3.视频和音频网站HTML5提供了多媒体元素和本地存储等功能，使得在线视频和音频网站的播放速度更快，缓冲更快，且可以在离线状态下进行。
例如：优酷、爱奇艺等。
4.社交网络应用HTML5的地理定位、Web Socket和Web Worker等技术，使得开发者可以很方便地开发社交网络应用，如微博、微信、QQ空间等。
HTML5有哪些新特征⼀、HTML5 中的⼀些有趣的新特性：⽤于绘画的 canvas 元素⽤于媒介回放的 video 和 audio 元素对本地离线存储的更好的⽀持新的特殊内容元素，⽐如 article、footer、header、nav、section新的表单控件，⽐如 calendar、date、time、email、url、search⼆、HTML5 视频<video>1、视频格式Ogg = 带有 Theora 视频编码和 Vorbis ⾳频编码的 Ogg ⽂件 MPEG4 = 带有 H.264 视频编码和 AAC ⾳频编码的 MPEG 4 ⽂件 WebM = 带有 VP8 视频编码和 Vorbis ⾳频编码的 WebM ⽂件2、<video> 标签的属性 *标签<source>规定多媒体资源，可以是多个3、实例 （1）复制代码代码如下:<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="//xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-" /><title>视频</title></head><body><video src=". HTML⾳频视频-编解码⼯具.mp" controls="controls" width="px" height="px"></video></body></html> 效果：（2）HTML5 <video> - 使⽤ DOM 进⾏控制（⽤JS来控制视频的播放/暂停以及放⼤、缩⼩） <⼩知识：在JS函数⾥输⼊console.log("hello");表⽰在浏览器控制台输出hello，若控制台可以输出hello，则表⽰函数是可以调⽤的。
HTML网页的七种加密解密方法解析本文一共介绍了七种方法：一：最简单的加密解密二：转义字符""的妙用三：使用Microsoft出品的脚本编码器Script Encoder来进行编码（自创简单解码）四：任意添加NUL空字符（十六进制00H）（自创）五：无用内容混乱以及换行空格TAB大法六：自写解密函数法七：错误的利用（自创）在做网页时（其实是网页木马呵呵），最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的JAVASCRIPT代码常常被别人轻易的拷贝，实在让自己的心里有点不是滋味，要知道自己写点东西也挺累的......^*^但我们也应该清楚地认识到因为JAVASCRIPT代码是在IE中解释执行，要想绝对的保密是不可能的，我们要做的就是尽可能的增大拷贝者复制的难度，让他知难而退（但愿~!~），下面我结合自己这几年来的实践，及个人研究的心得，和大家一起来探讨一下网页中JAVASCRIPT代码的加密解密技术。
以加密下面的JAVASCRIPT代码为例：alert("黑客防线");一：最简单的加密解密大家对于JAVASCRIPT函数escape()和unescape()想必是比较了解啦（很多网页加密在用它们），分别是编码和解码字符串，比如例子代码用escape()函数加密后变为如下格式：alert%28%22%u9ED1%u5BA2%u9632%u7EBF%22%29%3B 如何？还看的懂吗？当然其中的ASCII字符"alert"并没有被加密，如果愿意我们可以写点JAVASCRIPT代码重新把它加密如下：%61%6C%65%72%74%28%22%u9ED1%u5BA2%u9632%u7 EBF%22%29%3B呵呵！如何？这次是完全都加密了！当然，这样加密后的代码是不能直接运行的，幸好还有eval(codeString)可用，这个函数的作用就是检查JavaScript代码并执行，必选项codeString 参数是包含有效JavaScript 代码的字符串值，加上上面的解码unescape()，加密后的结果如下：varcode=unescape("%61%6C%65%72%74%28%22%u9ED1%u5BA 2%u9632%u7EBF%22%29%3B");eval(code)是不是很简单？不要高兴，解密也就同样的简单，解密代码都摆给别人啦（unescape()）！呵呵二：转义字符""的妙用大家可能对转义字符""不太熟悉，但对于JavaScript提供了一些特殊字符如：n （换行）、 r （回车）、' （单引号）等应该是有所了解的吧？其实""后面还可以跟八进制或十六进制的数字，如字符"a"则可以表示为："141"或"x61"（注意是小写字符"x"），至于双字节字符如汉字"黑"则仅能用十六进制表示为"u9ED1"（注意是小写字符"u"），其中字符"u"表示是双字节字符，根据这个原理例子代码则可以表示为：八进制转义字符串如下:eval("1411541451621645042u9ED1u5BA2u9632u7EBF4251 73")十六进制转义字符串如下:eval("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22 x29x3B")这次没有了解码函数，因为JavaScript执行时会自行转换，同样解码也是很简单如下：alert("x61x6Cx65x72x74x28x22u9ED1u5BA2u9632u7EBFx22 x29x3B")就会弹出对话框告诉你解密后的结果！三：使用Microsoft出品的脚本编码器Script Encoder来进行编码工具的使用就不多介绍啦！我是直接使用JavaScript调用控件Scripting.Encoder完成的编码！代码如下：var Senc=new ActiveXObject("Scripting.Encoder");var code='rnalert("黑客防线");rn';var Encode=Senc.EncodeScriptFile(".htm",code,0,"");alert(Encode);编码后的结果如下：#@~^FgAAAA==@#@&ls•DD`J黑客防线r#p@#@&FgMAAA==^#~@够难看懂得吧？但相应的解密工具早已出来，而且连解密网页都有！因为其解密网页代码过多，我就不多说拉！给大家介绍一下我独创的解密代码，如下：function decode()alert(decode.toString());咋样？够简单吧？它是原理是：编码后的代码运行前IE会先对其进行解码，如果我们先把加密的代码放入一个自定义函数如上面的decode()中，然后对自定义函数decode调用toString()方法，得到的将是解码后的代码！如果你觉得这样编码得到的代码LANGUAGE属性是JScript.Encode，很容易让人识破，那么还有一个几乎不为人知的window对象的方法execScript()，其原形为：window.execScript( sExpression, sLanguage )参数：sExpression:? 必选项。
HTML5新标签使用技巧详解HTML5作为最新的HTML版本，引入了一些新的标签，为开发者提供了更多的功能和更好的可访问性。
本文将详细介绍HTML5中一些常用的新标签，以及它们的使用技巧。
一、语义化标签1. <header>标签<header>标签用于定义文档或文档节的头部，通常包括网站的logo、标题和导航栏。
使用<header>标签有助于提高文档的可读性和可访问性。
2. <nav>标签<nav>标签用于定义导航链接的部分。
在一个网页中，<nav>标签通常包含网站的主要导航菜单。
使用<nav>标签可以更好地组织和语义化导航链接。
3. <article>标签<article>标签用于定义独立的、完整的文章内容。
一个<article>标签可以包含标题、内容、作者等信息。
使用<article>标签可以提高搜索引擎对文章的理解和索引能力。
4. <section>标签<section>标签用于定义文档中的节或区块。
一个<section>标签可以表示一个独立的主题内容，可以包含<title>、<h1>等标题标签。
使用<section>标签可以更好地组织网页结构。
5. <aside>标签<aside>标签用于定义文档的侧边栏内容，通常包含与主要内容相关的附属信息。
使用<aside>标签可以提高文档的可读性和可访问性。
二、音视频标签1. <audio>标签<audio>标签用于在网页中嵌入音频。
通过设置<source>标签的不同属性值，可以在不同浏览器中使用不同的音频格式，以提供更好的兼容性。
2. <video>标签<video>标签用于在网页中嵌入视频。
HTML5 新功能解密HTML5 基本新功能教程解密1) 什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
2) HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。
为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备3) 新特性HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、searchHTML 5 视频4) Web 上的视频HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式当前，video 元素支持三种视频格式： 格式 Ogg MPEG 4 WebM IE No 9.0+ No Firefox 3.5+ No 4.0+ Opera 10.5+ No 10.6+ Chrome 5.0+ 5.0+ 6.0+ Safari No 3.0+ No 1HTML5 新功能解密 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件5) 如何工作<video src="movie.ogg" controls="controls"> </video> control 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的： <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>6) <video> 标签的属性属性 autoplay controls height loop preload 值 autoplay controls pixels loop preload 描述 如果出现该属性，则视频在就绪后马上播放。
如果出现该属性，则向用户显示控件，比如播放按钮。
设置视频播放器的高度。
如果出现该属性，则当媒介文件完成播放后再次开始播放。
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src width url pixels 要播放的视频的 URL。
设置视频播放器的宽度。
7) HTML 5 Video + DOMHTML5 <video> 元素同样拥有方法、属性和事件。
2HTML5 新功能解密 其中的方法用于播放、 暂停以及加载等。
其中的属性 （比如时长、 音量等） 可以被读取或设置。
其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; }3HTML5 新功能解密</script> </body> </html> 8) HTML5 <video> - 方法、属性以及事件下面列出了大多数浏览器支持的视频方法、属性和事件： 方法 play() pause() load() canPlayType 属性 currentSrc currentTime videoWidth videoHeight duration ended error paused muted seeking volume height width 注释： 在所有属性中， 只有 videoWidth 和 videoHeight 属性是立即可用的。
在视频的元数据已加载后， 其他属性才可用。
事件 play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata9) HTML5 提供了播放音频的标准。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
音频格式当前，audio 元素支持三种音频格式： Firefox IE 9 Ogg Vorbis MP3 √ 3.5 √ Opera 10.5 √ Chrome 3.0 √ √ √ 4 Safari 3.0HTML5 新功能解密Wav√√√10) 如何工作<audio src="song.ogg" controls="controls"> </audio>control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：<!DOCTYPE HTML> <html> <body> <audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> 11) <audio> 标签的属性属性 autoplay controls loop preload 值 autoplay controls loop preload 描述 如果出现该属性，则音频在就绪后马上播放。
如果出现该属性，则向用户显示控件，比如播放按钮。
如果出现该属性，则每当音频结束时重新开始播放。
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
12) HTML 5 拖放拖放（Drag 和 drop）是 HTML5 标准的组成部分。
5HTML5 新功能解密拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> 6HTML5 新功能解密<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /></body> </html>13) 设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ： <img draggable="true" />14) 拖动什么 - ondragstart 和 setData()dataTransfer.setData() 方法设置被拖数据的数据类型和值： function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }15) 放到何处 - ondragoverondragover 事件规定在何处放置被拖动的数据。
