html5教程，一门不得不学的新技术，含盖html5的网页开发技术及教程，html5来了
包含宽度和高度属性也是不错的主意 < video>与< video>之间插入的内容是供不支持 video元素的浏览器显示的 实例 idth=320 height=240 controls=controls Your browser does not support the video tag /vid 上面的例子使用一个Ogg文件,适用于 Firefox、 Opera以及 Chrome浏览器。 要确保适用于 Safari浏览器,视频文件必须是MPEG4类型。 video元素允许多个 source元素。 sourcε元素可以链接不同的视频文件。浏览器将使用第 可识别的格式 实例 ideo width=320"height=240 Is <source src=movie. ogg"type=video/ogg"> <source src="movie. mp4 "type"video/mp4">> Your browser docs not support the vidco tag /videol Internet Explorer Internet Explorer8不支持 video元素。在IE9中,将提供对使用MPEG4的 video元素 的支持 <vde0>标签的属性 属性值 描述 autoplay autoplay如果出现该属性,则视频在就绪后马上播放。 controls controls如果出现该属性,则向用户显示控件,比如播放按钮。 height pixels设置视频播放器的高度。 loop oop 如果出现该属性,则当媒介文件完成播放后冉次开始播放。 如果出现该属性,则视频在页面加载时进行加载,并预备播放 pr preload 如果使用" autoplay",则忽略该属性。 uI 要播放的视频的URL。 width pixels设置视频播放器的宽度 HTML5音频 HTML5提供了播放音频的标准 Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都折有同样 的插件 HTML5规定了一种通过 audio元素来包含音频的标准方法 audio元素能够播放声音文件或者音频流 视频格式 当前, audio元素攴持三种音频格式: Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 )gg vorbis MP3 Wa Ⅹ 如何工作 如需在HTML5中播放音频,您所有需要的是: <audio src="song. ogg"controls-controls"> </audio control属性供添加播放、暂停和音量控件 < audio>与</ audio>之间插入的内容是供不支持 audio元素的浏览器显示的 实例 <audio src=song. ogg"controls="controls"> Your browser does not support the audio tag adio 上面的例子使用一个Ogg文件,适用于 Firefox、 Opera以及 Chrome浏览器。 要确保适用于 Safari浏览器,音频文件必须是MP3或wav类型 udio元素允许多个 Source元素。 source元素可以链接不同的音频文件。浏览器将使用第 个可识别的格式 实例 <audio controls-controls> src=song. ogg"type=audio/ogg"> Ksource src=song, mp3 type="audio/mpeg Your browser does not support the audio tag </audio> Internet Explorer Internet Explorer8不支持 audio儿素。在IE9中,将提供对 audio元素的支持。 <audi0>标签的属性 属性值 描述 autoplay autoplay如果出现该属性,则音频在就绪后马上:播放。 controls controls如果出现该属性,则向用户显示控件,比如播放按钮。 如果出现该属性,则音频在贞面加载时进行加载,并预备播放。 preload preload 如果使用" autoplay",则忽略该属性。 要播放的音频的URL。 HTML 5 Canvas canvas元素用于在网页上绘制图形 什么是 Canvas? HTML5的 canvas元素使用 Javascript在网页上绘制图像 佃布是一个矩形区域,您可以控制其每一像素。 canva丶拥有多和绘制路径、矩形、圆形、字符以及添加图像的方法 创建 Canvas元素 向IIML5页面添加 canvas元素 规定元素的id、宽度和高度: canvas id-="my Canvas"width-=200" height=100><canvas> 通过 JavaScript来绘制 canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript内部完成 <script type-"text/javascript"> var c-document getElementByld("my Canvas"); var cxt=c getContext("2d") cxt fillStyle=#FF0000 cxt fillRect(0, 0, 150, 75) c/script> JavaScript使用id来寻找 canvas元素 var c=document. get yldc"my Canvas") 然后,创建 context对象 var cxt=c getContext("2d") getContext("2d")对象是内建的HTML5对象,拥有多种绘制硌径、矩形、圆形、字符以及 添加图像的方法。 下面的两行代码绘制一个红色的矩形 cxt fillStyle="#FF000O cxt fillRect(0, 0, 150, 75); fillStyle方法将其染成红色, dirEct方法规定」形状、位置和尺寸。 理解坐标 上面的 fillRect方法拥有参数(0,0,150,75) 意思是:在画布上绘制150x75的矩形,从左上角开始(0,0) 如下图所示,画布的X和Y坐标用于在画布上对绘画进行定位。 X 实例:把鼠标悬停在矩形上可以看到坐标 更多 Canvas实例 下面的在 canvas元素上进行绘画的更多实例 实例-线条 通过指定从何处开始,在何处结束,来绘制一条线: Javascript代码 script type-"text/javascript"> var c=document. gctElcment("my Canvas"); var cxt=c getcontext( 2d ") cXt moveTo(10, 10); cxt lineTo(150, 50) cxt lineTo(10, 50) cXtstroke; </script> canvas 元素: <canvas id="my Canvas"width=200"height=100 style="border: I px solid #c3c3c3 Your browser does not support the canvas element 亲自试一试 实例-圆形 通过规定尺寸、颜色和位置,来绘制一个圆: 代码 <script type="text/javascript"> var c=document. getElementByld("my Canvas") var cxt=c getContext("2d") cxt fillStyle"#FF0000 cxt. beginPath0: cXtarc(70, 18, 15, 0, Math. Pl*2, true) cXt. closcPatho; cxt fillO </script> canvas 元素: canvas id="my Canvas"width=200 height=100 style="border: l px solid #c3c3c3 Your browser does not support the canvas element </c 亲自试一试 实例-渐变 使用您指定的颜色来绘制渐变背景 Javascript代码: <script type="text/javascript">> var c=document. getElementByld"my Canvas") var cxt=c getContext("2d") var grd=cxt. createLinearGradient(0, 0, 175, 50) grd. addColorStop(o, #FF0000") grd. addColor Stop(1, FO0FF0O") cxt. fillStyle-grd cxt fillRect(0, 0, 175, 50); canvas元素 <canvas id="my Canvas"width=200"height=100 style"border: 1px solid #c3c3c3 Your browser does not support the canvas element 亲自试一试 实例·图像 把一幅图像放置到画布上 代码: script type"text/javascript"> var c=document. getElementByldc"my Canvas") var cxt=c. gctContcxt("2d") var img-new Image( img src="flower. png cxt draw lmage(img, 0,0); </script> canvas元素: canvas id="my Canvas"width=200"height=100 style="border: l px solid #c3c3c3 Your browser does not support the canvas element </canvas> HTML5Web存储 在客户端存储数据 HTML5提供了两种在客户端存储数据的新方法 localStorage-没有时间限制的数据存储 sessionStorage-针对一个 session的数据存储 之前,这些都是山 cookie完成的。但是 cookie不适合大量数据的存储,因为它们山每个 对服务器的请求来传递,这使得 cookie速度很慢而且效率也不高 在HTML5中,数据不是由每个服务器请求传递的,而是只有在清求时使用数据。它使在 不影响网站性能的情況下存储大量数据成为可能 对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。 HTML5使用 Javascript来存储和访问数据。 localstorage方法 localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。 如何创建和访问 locaIStorage 实例 <script type"text/javascript"> localStorage. lastname="Smith document. write(localStorage. lastname) 下面的例子对用户访问页面的次数进行计数 实例 <script type"text/javascript"> if (localIStorage. pagecount) localStoragc. pagccount= Number(localstoragc pagccount)+I localStorage. pagecount=l document. write("Visits-localStorage pagecount +"time(s). " </script> session Storage方法 sessionStorage方法针对一个 session进行数据存储。当用户关闭浏览器窗口后,数据会被 删除。 如何创建并访间一个 scssion Storagc: 实例 <script type="text/javascript"> sessionStorage. lastname-"Smith document. write(session Storage lastname) 下面的例子对用户在当前 session中访问页面的次数进行计数: 实例 script type="text/javascript">> if(scssion Storagc. pagccount) sessionStorage pagecount= Number(session Storage pagecount)+1 sessionstor age. pagecount-1 document. write("Visits"scssion Storage. pagccount+"time(s)this session ) script HTML5 Input类型 HTML5新的 Input类型 HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控訇和验证。 本章全面介绍这些新的输入类型 ema url number range Datc pickers(date, month, wcck, time, datetime, datetimc-local) search color 浏览器支持 Input type IE Firefox Opera Chrome Safari No No 9.0 N No