HTML5入门解析

目录HTML5简介HTML5的canvas元素HTML5的audio元素HTML5的vedio元素HTML5的vedio元素HTML5的Web存储HTML5的input类型HTML5的表单属性总结什么是HTML5HTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML5是W3C与WHATWG合作的结果。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表单和应用程序在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5的规则为HTML5建立的一些规则：新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明HTML5的新特性HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search浏览器对HTML5的支持最新版本的Chrome、Firefox、SafariInternetExplorer9(不支持WindowsXP)InternetExplorer10预览版（只支持win7及以上版本）搜狗双核浏览器、遨游双核浏览器支持HTML5是一个趋势浏览器分类简介按内核分类：Trident：又称为MSHTML，代表InternetExplorer其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的Gecko：代表作品MozillaFirefoxNetscape6至9能在MicrosoftWindows、Linux和MacOSX等主要操作系统上运行WebKit：代表作品Safari、ChromePresto：代表作品OperaHTML5Canvas什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas示例Canvas绘制图形!DOCTYPEHTMLhtmlbodycanvasid=myCanvaswidth=200height=100style=border:1pxsolid#c3c3c3;Yourbrowserdoesnotsupportthecanvaselement./canvasscripttype=text/javascriptvarc=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();/script/body/html常用画图方法Canvas使用图像varimg=newImage();img.src=”myImage.jpg”;drawImage(img,x,y);//img是image或者canvas对象，x和y是其在目标canvas里的起始坐标drawImage(img,x,y,width,height);//width和height分别是图像在canvas中显示大小HTML5AudioWeb上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。HTML5AudioAudio元素支持三种格式：oggVorbis、mp3、wavcontrol属性供添加播放、暂停和音量控件audiosrc=/i/song.oggcontrols=controlsYourbrowserdoesnotsupporttheaudioelement./audioHTML5Audioaudio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式audiocontrols=controlssourcesrc=song.oggtype=audio/oggsourcesrc=song.mp3type=audio/mpegYourbrowserdoesnotsupporttheaudiotag./audioHTML5AudioHTML5VedioWeb上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。HTML5VedioHTML5中显示视频：videosrc=movie.oggcontrols=controls/videocontrol属性供添加播放、暂停和音量控件HTML5VedioHTML5Web存储HTML5提供了两种在客户端存储数据的新方法：localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5使用JavaScript来存储和访问数据。HTML5INPUT类型HTML5拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。emailurlnumberrangeDatepickers(date,month,week,time,datetime,datetime-local)searchcolorHTML5INPUT类型email类型用于应该包含e-mail地址的输入域，在提交表单时，会自动验证email域的值：inputtype=emailname=user_email/range类型用于应该包含一定范围内数字值的输入域，range类型显示为滑动条。inputtype=rangename=pointsmin=1max=10/HTML5INPUT类型number类型用于应该包含数值的输入域，还能够设定对所接受的数字的限定：inputtype=numbername=pointsmin=1max=10/HTML5表单属性autocomplete属性：规定form或input域应该拥有自动完成功能。autocomplete=“on”/“off”autofocus属性：规定在页面加载时，域自动地获得焦点，适用于所有input标签的类型。autofocus=“autofocus”HTML5表单属性novalidate属性:规定在提交表单时不应该验证form或input域。novalidate=“true”placeholder属性：提供一种默认值，会在输入域为空时显示出现，会在输入域获得焦点时消失。placeholder=“默认值HTML5表单属性required属性：规定必须在提交之前填写输入域（不能为空）。required=“required”Thanks!OVER！