爱华网HTML5教程
什么是HTML5？
在这里我不说一些特别难懂的语言，我这里简单的解释一下，如果你学过HTML，那么就是HTML4，HTML5是针对现有的版本进行了一些丰富，把一些原先常用的标签进行了统一，还添加了一些以前没有的新标签来满足更复杂的功能，像原先网页上面的音乐播放器，现在都不需要通过flash插件来实现，仅仅通过HTML5编写程序来实现，可以说HTML5的出现是一个很大的进步。
给大家介绍一个HTML5学习的技术社区：HTML5伴侣
HTML5现在的局限？
最大的一个局限就是还没有完全支持，支持HTML5的现代浏览器：
但是还有些浏览器不支持，比如IE9之前的版本。
有些东西需要HTML5来实现，但是不能保证用户用的浏览器都支持HTML5，所以有些功能需要保证兼容性，所以这也是限制HTML5的一个原因。
另外的一个因素就是HTML5在移动端的表现没有想象中优越，有很多的开发者在移动端做了很多尝试，尤其是在移动端开发游戏，在动画效果的实现上面，流畅度没有得到很好地的保证，不过随着移动设备的硬件越来越快，所以在以后HTML5在移动端的劣势会被掩盖，当然并不是所有的移动端设备表现的都不好，HTML5在IOS平台下的表现就很不错，已经可以成为企业开发的一个选择，相反android就不尽人意。
HTML5的优势
HTML5最好的一个优势就是跨平台，如果你是开发者，你只要写一套程序就可以在任何地方运行，PC，移动端都可以，这个大大的节约了开发成本。
另外一个优点就是标准的统一，开发人员不需要再头疼浏览器的兼容性，不过在这之前得保证浏览器支持HTML5。
最后一个优点是站在用户的角度，在移动端你想要用一个APP，你得去下载，每次APP更新或者改版，用户很反感，用HTML5开发的只需要借助移动端浏览器打开，不需要用户下载，打开就可以直接用，用户头疼的更新问题也不用担心了。
以上都是我的废话，希望您不要对此感到反感，接下来我就正式来介绍HTML5。
HTML5新特性：
1.添加了canvas元素，这个元素可以帮助我们实现更炫更棒的动画效果，HTML5游戏就是通过这个canvas来实现的场景的渲染。
2.媒介元素，如video和audio元素。
3.本地离线存储的支持。
4.原先的标签更加分散和清晰，比如article，footer，header，nav等等。
5.新的表单元素属性，比如data，time，Email，url，search等。
HTML5视频
很多视频的网站都是通过flash插件来播放视频的，但是HTML5提供了对视频播放的支持。
Ogg?=?带有?Theora?视频编码和?Vorbis?音频编码的?Ogg?文件
HTML5新手基础教程_html5教程
MPEG4?=?带有?H.264?视频编码和?AAC?音频编码的?MPEG?4?文件
WebM?=?带有?VP8?视频编码和?Vorbis?音频编码的?WebM?文件
标签使用
1??<video?controls="controls">
2??????????<!--
3??????????ogg文件可以用于适用于Firefox、Opera?以及?Chrome?浏览器
4??????????要确保适用于?Safari?浏览器，视频文件必须是?MPEG4?类型。
5??????????video?元素允许多个?source?元素。
6??????????<video?width="320"?height="240"?controls="controls">
7??????????<source?src="movie.ogg"?type="video/ogg">
8??????????<source?src="movie.mp4"?type="video/mp4">
9??????????Your?browser?does?not?support?the?video?tag.
10??????????</video>
11??????????-->
12??????????<source?src="video/first.mp4">
13??????????浏览器不支持html5视频功能
14??????</video>
IE9一下不支持video，IE9支持了MPEG4的video元素。
Video的属性选择
HTML5音频
HTML5支持音频（音乐）的标准，通过audio元素。
音频格式：
要确保适用于?Safari?浏览器，音频文件必须是?MP3?或?Wav?类型。
标签使用：
<audio?controls="controls">
??<source?src="song.ogg"?type="audio/ogg">
??<source?src="song.mp3"?type="audio/mpeg">
Your?browser?does?not?support?the?audio?tag.
</audio>
IE8?不支持?audio?元素。在?IE?9?中，将提供对?audio?元素的支持。
HTML5?Canvas
Canvas元素可以实现绘制图形动画。
Canvas可以说是HTML5里面最重要的一个标签了，这个标签的出现让游戏开发更加容易，不过Canvas需要配合JavaScript使用。
元素创建
规定元素的?id、宽度和高度：
<canvas?id="myCanvas"?width="200"?height="100"></canvas>
这个地方为什么要定义id属性呢？如果你对JS的DOM编程有一定了解的话，你就知道通过ID属性可以获取一个元素对象，从而可以通过JS来对元素进行操作。
如果你对DOM不熟悉的话，建议你先去看下相关的学习资料。
这里给你一个DOM学习的电子书下载链接：
JavaScript控制Canvas
<script?type="text/javascript">
var?c=document.getElementById("myCanvas");
var?cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript?使用?id?来寻找?canvas?元素：
var?c=document.getElementById("myCanvas");
HTML5新手基础教程_html5教程
然后，创建?context?对象：
var?cxt=c.getContext("2d");
getContext("2d")?对象是内建的?HTML5?对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);?
fillStyle?方法将其染成红色，fillRect?方法规定了形状、位置和尺寸。
上面的?fillRect?方法拥有参数?(0,0,150,75)。
意思是：在画布上绘制?150x75?的矩形，从左上角开始?(0,0)。
如下图所示，画布的?X?和?Y?坐标用于在画布上对绘画进行定位。
下面我在?canvas?元素上进行绘画的更多实例：
实例?-?线条
通过指定从何处开始，在何处结束，来绘制一条线：
JavaScript?代码：
<script?type="text/javascript">
var?c=document.getElementById("myCanvas");
var?cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas?元素：
<canvas?id="myCanvas"?width="200"?height="100">
Your?browser?does?not?support?the?canvas?element.
</canvas>
实例?-?圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
JavaScript?代码：
<script?type="text/javascript">
var?c=document.getElementById("myCanvas");
var?cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas?元素：
<canvas?id="myCanvas"?width="200"?height="100">
Your?browser?does?not?support?the?canvas?element.
</canvas>
实例?-?渐变
使用您指定的颜色来绘制渐变背景：
JavaScript?代码：
<script?type="text/javascript">
var?c=document.getElementById("myCanvas");
var?cxt=c.getContext("2d");
var?grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas?元素：
<canvas?id="myCanvas"?width="200"?height="100">
Your?browser?does?not?support?the?canvas?element.
</canvas>
实例?-?图像
把一幅图像放置到画布上：
JavaScript?代码：
<script?type="text/javascript">
var?c=document.getElementById("myCanvas");
var?cxt=c.getContext("2d");
var?img=new?Image()
img.src="flower.png"
HTML5新手基础教程_html5教程
cxt.drawImage(img,0,0);
</script>
canvas?元素：
<canvas?id="myCanvas"?width="200"?height="100">
Your?browser?does?not?support?the?canvas?element.
</canvas>
你看我canvas相比较前几个标签来说，解释说明举例明显更多，这也说明canvas标签的重要性，希望你能好好学习这个标签。
HTML5??Web存储
在客户端存储数据
HTML5?提供了两种在客户端存储数据的新方法：
localStorage?-?没有时间限制的数据存储
sessionStorage?-?针对一个?session?的数据存储
之前，这些都是由?cookie?完成的。但是?cookie?不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得?cookie?速度很慢而且效率也不高。
在?HTML5?中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5?使用?JavaScript?来存储和访问数据。
localStorage?方法
localStorage?方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问?localStorage：
实例
<script?type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
sessionStorage?方法
sessionStorage?方法针对一个?session?进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个?sessionStorage：
实例
<script?type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
HTML5?Input类型
HTML5?拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型：
1.email
2.url
3.number
4.range
5.Date?pickers?(date,?month,?week,?time,?datetime,?datetime-local)
6.search
7.color
注释：Opera?对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input?类型?-?email
email?类型用于应该包含?e-mail?地址的输入域。
在提交表单时，会自动验证?email?域的值。
实例
E-mail:?<input?type="email"?name="user_email"?/>
提示：iPhone?中的?Safari?浏览器支持?email?输入类型，并通过改变触摸屏键盘来配合它（添加?@?和?.com?选项）。
HTML5新手基础教程_html5教程
Input?类型?-?url
url?类型用于应该包含?URL?地址的输入域。
在提交表单时，会自动验证?url?域的值。
实例
Homepage:?<input?type="url"?name="user_url"?/>
提示：iPhone?中的?Safari?浏览器支持?url?输入类型，并通过改变触摸屏键盘来配合它（添加?.com?选项）。
Input?类型?-?number
number?类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
实例
Points:?<input?type="number"?name="points"?min="1"?max="10"?/>
请使用下面的属性来规定对数字类型的限定：
属性
? ?
值
? ?
描述
? ?
max
? ?
number
? ?
规定允许的最大值
? ?
min
? ?
number
? ?
规定允许的最小值
? ?
step
? ?
number
? ?
规定合法的数字间隔（如果?step="3"，则合法的数是?-3,0,3,6?等）
? ?
value
? ?
number
? ?
规定默认值
? ?
提示：iPhone?中的?Safari?浏览器支持?number?输入类型，并通过改变触摸屏键盘来配合它（显示数字）。
Input?类型?-?range
range?类型用于应该包含一定范围内数字值的输入域。
range?类型显示为滑动条。
您还能够设定对所接受的数字的限定：
实例
<input?type="range"?name="points"?min="1"?max="10"?/>
请使用下面的属性来规定对数字类型的限定：
属性
? ?
值
? ?
描述
? ?
max
? ?
number
? ?
规定允许的最大值
? ?
min
? ?
number
? ?
规定允许的最小值
? ?
step
? ?
number
? ?
规定合法的数字间隔（如果?step="3"，则合法的数是?-3,0,3,6?等）
? ?
value
? ?
number
? ?
规定默认值
? ?
Input?类型?-?Date?Pickers（日期选择器）
HTML5?拥有多个可供选取日期和时间的新输入类型：
15?date?-?选取日、月、年
16?month?-?选取月、年
17?week?-?选取周和年
18?time?-?选取时间（小时和分钟）
19?datetime?-?选取时间、日、月、年（UTC?时间）
20?datetime-local?-?选取时间、日、月、年（本地时间）
下面的例子允许您从日历中选取一个日期：
实例
Date:?<input?type="date"?name="user_date"?/>
Input里面的类型新增的属性虽然多了一些，但是大多都很简单，和原先的text,password都是一样的道理。
HTML5表单元素
HTML5?拥有若干涉及表单的元素和属性。
HTML5新手基础教程_html5教程
datalist?元素
datalist?元素规定输入域的选项列表。
列表是通过?datalist?内的?option?元素创建的。
如需把?datalist?绑定到输入域，请用输入域的?list?属性引用?datalist?的?id：
实例
Webpage:?<input?type="url"?list="url_list"?name="link"?/>
<datalist?id="url_list">
<option?label="W3School"?value="http://www.W3School.com.cn"?/>
<option?label="Google"?value="http://www.google.com"?/>
<option?label="Microsoft"?value="http://www.microsoft.com"?/>
</datalist>
提示：option?元素永远都要设置?value?属性。
keygen?元素
keygen?元素的作用是提供一种验证用户的可靠方法。
keygen?元素是密钥对生成器（key-pair?generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private?key）存储于客户端，公钥（public?key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client?certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<form?action="demo_form.asp"?method="get">
Username:?<input?type="text"?name="usr_name"?/>
Encryption:?<keygen?name="security"?/>
<input?type="submit"?/>
</form>
output?元素
output?元素用于不同类型的输出，比如计算或脚本输出：
实例
<output?id="result"?onforminput="resCalc()"></output>
HTML5表单属性
本章讲解涉及?<form>?和?<input>?元素的新属性。
新的?form?属性：
autocomplete
novalidate
新的?input?属性：
autocomplete
autofocus
form
form?overrides?(formaction,?formenctype,?formmethod,?formnovalidate,?formtarget)
height?和?width
list
min,?max?和?step
multiple
pattern?(regexp)
placeholder
Required
autocomplete?属性
autocomplete?属性规定?form?或?input?域应该拥有自动完成功能。
注释：autocomplete?适用于?<form>?标签，以及以下类型的?<input>?标签：text,?search,?url,?telephone,?email,?password,?datepickers,?range?以及?color。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
实例
<form?action="demo_form.asp"?method="get"?autocomplete="on">
First?name:?<input?type="text"?name="fname"?/><br?/>
Last?name:?<input?type="text"?name="lname"?/><br?/>
E-mail:?<input?type="email"?name="email"?autocomplete="off"?/><br?/>
<input?type="submit"?/>
</form>
HTML5新手基础教程_html5教程
注释：在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
autofocus?属性
autofocus?属性规定在页面加载时，域自动地获得焦点。
注释：autofocus?属性适用于所有?<input>?标签的类型。
实例
User?name:?<input?type="text"?name="user_name"??autofocus="autofocus"?/>
form?属性
form?属性规定输入域所属的一个或多个表单。
注释：form?属性适用于所有?<input>?标签的类型。
form?属性必须引用所属表单的?id：
实例
<form?action="demo_form.asp"?method="get"?id="user_form">
First?name:<input?type="text"?name="fname"?/>
<input?type="submit"?/>
</form>
Last?name:?<input?type="text"?name="lname"?form="user_form"?/>
注释：如需引用一个以上的表单，请使用空格分隔的列表。
表单重写属性
表单重写属性（form?override?attributes）允许您重写?form?元素的某些属性设定。
表单重写属性有：
21?formaction?-?重写表单的?action?属性
22?formenctype?-?重写表单的?enctype?属性
23?formmethod?-?重写表单的?method?属性
24?formnovalidate?-?重写表单的?novalidate?属性
25?formtarget?-?重写表单的?target?属性
注释：表单重写属性适用于以下类型的?<input>?标签：submit?和?image。
实例
<form?action="demo_form.asp"?method="get"?id="user_form">
E-mail:?<input?type="email"?name="userid"?/><br?/>
<input?type="submit"?value="Submit"?/>
<br?/>
<input?type="submit"?formaction="demo_admin.asp"?value="Submit?as?admin"?/>
<br?/>
<input?type="submit"?formnovalidate="true"?value="Submit?without?validation"?/>
<br?/>
</form>
注释：这些属性对于创建不同的提交按钮很有帮助。
height?和?width?属性
height?和?width?属性规定用于?image?类型的?input?标签的图像高度和宽度。
注释：height?和?width?属性只适用于?image?类型的?<input>?标签。
实例
<input?type="image"?src="img_submit.gif"?width="99"height="99"?/>
list?属性
list?属性规定输入域的?datalist。datalist?是输入域的选项列表。
注释：list?属性适用于以下类型的?<input>?标签：text,?search,?url,?telephone,?email,?date?pickers,?number,?range?以及?color。
实例
Webpage:?<input?type="url"?list="url_list"?name="link"?/>
<datalist?id="url_list">
<option?label="W3Schools"?value="http://www.w3school.com.cn"?/>
<option?label="Google"?value="http://www.google.com"?/>
HTML5新手基础教程_html5教程
<option?label="Microsoft"?value="http://www.microsoft.com"?/>
</datalist>
min、max?和?step?属性
min、max?和?step?属性用于为包含数字或日期的?input?类型规定限定（约束）。
max?属性规定输入域所允许的最大值。
min?属性规定输入域所允许的最小值。
step?属性为输入域规定合法的数字间隔（如果?step="3"，则合法的数是?-3,0,3,6?等）。
注释：min、max?和?step?属性适用于以下类型的?<input>?标签：date?pickers、number?以及?range。
下面的例子显示一个数字域，该域接受介于?0?到?10?之间的值，且步进为?3（即合法的值为?0、3、6?和?9）：
实例
Points:?<input?type="number"?name="points"?min="0"max="10"step="3"?/>
multiple?属性
multiple?属性规定输入域中可选择多个值。
注释：multiple?属性适用于以下类型的?<input>?标签：email?和?file。
实例
Select?images:?<input?type="file"?name="img"?multiple="multiple"?/>
novalidate?属性
novalidate?属性规定在提交表单时不应该验证?form?或?input?域。
注释：novalidate?属性适用于?<form>?以及以下类型的?<input>?标签：text,?search,?url,?telephone,?email,?password,?date?pickers,?range?以及?color.
实例
<form?action="demo_form.asp"?method="get"?novalidate="true">
E-mail:?<input?type="email"?name="user_email"?/>
<input?type="submit"?/>
</form>
pattern?属性
pattern?属性规定用于验证?input?域的模式（pattern）。
模式（pattern）?是正则表达式。您可以在我们的?JavaScript?教程中学习到有关正则表达式的内容。
注释：pattern?属性适用于以下类型的?<input>?标签：text,?search,?url,?telephone,?email?以及?password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
实例
Country?code:?<input?type="text"?name="country_code"
pattern="[A-z]{3}"?title="Three?letter?country?code"?/>
placeholder?属性
placeholder?属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder?属性适用于以下类型的?<input>?标签：text,?search,?url,?telephone,?email?以及?password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
实例
<input?type="search"?name="user_search"??placeholder="Search?W3School"?/>
required?属性
required?属性规定必须在提交之前填写输入域（不能为空）。
注释：required?属性适用于以下类型的?<input>?标签：text,?search,?url,?telephone,?email,?password,?date?pickers,?number,?checkbox,?radio?以及?file。
HTML5新手基础教程_html5教程
实例
Name:?<input?type="text"?name="usr_name"?required="required"?/>
? ?
这份简易的HTML5教程是为了新手准备，HTML5还有很大其他的更高级的东西，我在这里没有介绍，不过随着学习的深入，以后你肯定会接触到的，我在最后给大家展示一些HTML5开发的实例，包括游戏，应用以及各种demo。
HTML5开发的驴子跳游戏：
HTML5开发游戏场景：
HTML5和JS结合开发的植物大战僵尸：
HTML5的传奇还在继续，你现在是不是充满了热情，摩拳擦掌的想要试试HTML5具有什么样的魅力？那就快来学习吧，希望这份教程在你HTML5的启蒙道路有所帮助。
