HTML5教程
HTML5是什么？
这里就不说一些特别难懂的语言了。我在这里简单说明一下，如果你学过HTML，那就是HTML4。HTML5丰富了现有版本，统一了一些常用标签，增加了一些之前没有的新标签，以满足更复杂的功能。比如原来网页上的音乐播放器，现在已经不用flash插件实现了，只需要编程HTML5就可以了。可以说HTML5的出现是一家独大。
介绍一个HTML5学习的技术社区：HTML5 Companion。
5现在HTML5的局限性？
最大的限制之一是支持HTML5的现代浏览器不完全支持它：
但是有些浏览器不支持，比如IE9之前的版本。
有些东西需要HTML5来实现，但不能保证用户使用的所有浏览器都能支持HTML5，所以有些功能需要兼容，所以这也是限制HTML5的一个原因。
另一个因素是HTML5在移动端的表现并没有想象中的那么出众。很多开发者在移动端做了很多尝试，尤其是在移动端开发游戏方面。动画的流畅性没有很好的保证。但是随着移动设备的硬件越来越快，HTML5在移动端的劣势在未来会被掩盖。当然，并不是所有的移动设备都表现不佳。HTML5在IOS平台上的表现很不错，android可以作为平台。
HTML5的优势
HTML5最好的一个优点就是跨平台。如果你是开发人员，只要写一套程序就可以在任何地方运行，PC端和移动端都可以，大大节省了开发成本。
另一个好处是标准的统一。开发者不需要担心浏览器的兼容性，但在此之前，他们必须确保浏览器支持HTML5。
最后一个好处是，从用户的角度来说，如果你想在移动端使用一个APP，就要下载。每次APP更新或改版，用户都很反感。用HTML5开发的东西只需要在移动端用浏览器打开，用户不用下载就可以直接使用。用户不用担心更新的头疼问题。
以上都是我瞎扯的。希望大家不要反感。接下来，我将正式介绍HTML5。
5 html 5的新特性：
1.增加了画布元素，可以帮助我们实现更炫更好的动画效果。HTML5游戏就是通过这块画布渲染场景。
2.诸如视频和音频元素的媒体元素。
3.支持本地脱机存储。
4.原来的标签比较分散清晰，比如文章、页脚、页眉、nav等等。
5.新的表单元素属性，如数据、时间、电子邮件、url、搜索等。
5 HTML5视频
很多视频网站通过flash插件播放视频，但是HTML5提供了对视频播放的支持。
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=采用H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
使用标签
一个
2
12
3浏览器不支持html5视频功能。
14
IE9不支持视频。IE9支持MPEG4的视频元素。
视频的属性选择
HTML5音频
5 HTML5通过音频元素支持音频(音乐)的标准。
音频格式：
要适用于Safari浏览器，音频文件必须是MP3或Wav类型。
使用：
您的browserdoesnotsupporttheaudiotag。
E8不支持音频元素。在IE9中，将提供对音频元素的支持。
HTML5Canvas
Canvas元素可以实现绘制图形动画。
Canvas可以说是HTML5中最重要的标签。这个标签的出现让游戏开发变得更加容易，但是Canvas需要和JavaScript一起使用。
元素创建
指定元素的id、宽度和高度：
这个地方为什么要定义id属性？如果对JS的DOM编程有所了解，就知道可以通过ID属性获取一个元素对象，这样就可以通过JS操作元素了。
如果你对DOM不熟悉，建议你先看看相关的学习资料。
这里有一个下载DOM学习电子书的链接：
JavaScript控件画布
varc=document . getelementbyid(' my canvas ')；
varcxt=c . get context(' 2d ')；
cxt . fill style=' # ff 0000 '
cxt.fillRect(0，0，150，75)；
使用JavaScript id查找画布元素：
varc=document . getelementbyid(' my canvas ')；
然后，创建上下文对象：
varcxt=c . get context(' 2d ')；
getContext('2d ')对象是一个内置的HTML5对象，它有许多方法来绘制路径、矩形、圆形、字符和添加图像。
下面两行代码绘制了一个红色矩形：
cxt . fill style=' # ff 0000 '
cxt.fillRect(0，0，150，75)；
fillStyle方法将其染成红色，fillRect方法指定形状、位置和大小。
上面的fillRect方法有参数(0，0，150，75)。
含义：在画布上画一个150x75的矩形，从左上角(0，0)开始。
如下图所示，画布的x和y坐标用于在画布上定位绘画。
以下是我在画布上绘画元素的更多例子：
示例-行
通过指定线条的起点和终点来绘制线条：
JavaScript代码：
varc=document . getelementbyid(' my canvas ')；
varcxt=c . get context(' 2d ')；
cxt.moveTo(10，10)；
cxt.lineTo(150，50)；
cxt.lineTo(10，50)；
cxt . stroke()；
画布元素：
您的browserdoesnotsupportthecanvaselement。
示例-圆形
通过指定大小、颜色和位置来画一个圆：
JavaScript代码：
varc=document . getelementbyid(' my canvas ')；
varcxt=c . get context(' 2d ')；
cxt . fill style=' # ff 0000 '
cxt . begin path()；
cxt.arc(70，18，15，0，数学。PI*2，真)；
cxt . close path()；
cxt . fill()；
画布元素：
您的browserdoesnotsupportthecanvaselement。
示例-渐变
用您指定的颜色绘制渐变背景：
JavaScript代码：
varc=document . getelementbyid(' my canvas ')；
varcxt=c . get context(' 2d ')；
vargrd=cxt . createlanegradient(0，0，175，50)；
grd.addColorStop(0，' # ff 0000 ')；
grd.addColorStop(1，' # 00ff 00 ')；
cxt.fillStyle=grd
cxt.fillRect(0，0，175，50)；
画布元素：
您的browserdoesnotsupportthecanvaselement。
示例-图像
将图像放在画布上：
JavaScript代码：
varc=document . getelementbyid(' my canvas ')；
varcxt=c . get context(' 2d ')；
varimg=newImage()
img.src='flower.png '
cxt.drawImage(img，0，0)；
画布元素：
您的browserdoesnotsupportthecanvaselement。
看我的画布。与之前的标签相比，显然有更多的解释和例子，这也说明了画布标签的重要性。希望你能好好研究一下这个标签。
HTML5Web存储
在客户端存储数据
HTML5提供了两种在客户端存储数据的新方法：
LocalStorage-没有时间限制的数据存储
SessionStorage-一个会话的数据存储。
以前这些都是cookie做的。然而，cookie不适合存储大量数据，因为它们是由每个请求传递到服务器的，这使得cookie速度慢且效率低。
在HTML5中，数据不是由每个服务器请求传递的，而是仅在被请求时使用。它使得在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储在不同的区域，一个网站只能访问自己的数据。
5 HTML5使用JavaScript存储和访问数据。
localStorage方法
localStorage方法存储的数据没有时间限制。在第二天、第一周或第二年之后，这些数据仍然可用。
如何创建和访问本地存储：
例子
local storage . last name=' Smith '
document . write(local storage . last name)；
会话存储方法
sessionStorage方法存储会话的数据。当用户关闭浏览器窗口时，数据将被删除。
如何创建和访问会话存储：
例子
session storage . last name=' Smith '
document.write(会话存储.姓氏)；
html 5输入类型
HTML5有几种新的表单输入类型。这些新功能提供了更好的输入控制和验证。
本章全面介绍了这些新的输入类型：
1 .邮件
2 .网址
3 .数字
4 .范围
5.日期选择器(日期、月、周、时间、日期时间、本地日期时间)
6 .搜索
7 .颜色
注意：Opera对新的输入类型有最好的支持。但是你已经可以在所有主流浏览器中使用它们了。即使不支持，它仍然可以显示为常规文本字段。
输入类型-电子邮件
电子邮件类型用于应包含电子邮件地址的输入字段。
提交表单时，会自动验证电子邮件字段的值。
例子
电子邮件：
提示：iPhone中的Safari浏览器支持电子邮件输入类型，更改触摸屏键盘与之匹配(添加@和。com选项)。
输入类型-url
url类型用于应该包含URL地址的输入字段。
提交表单时，会自动验证url字段的值。
例子
主页：
提示：iPhone中的Safari浏览器支持url输入类型，更改触摸屏键盘与之匹配(添加。com选项)。
输入类型-数字
number类型用于应该包含数值的输入字段。
您还可以对可接受的数量设置限制：
例子
积分：
使用以下属性定义号码类型：
属性
价值
形容
最大
数字
最大允许值
部
数字
允许的最小值
步骤
数字
合法数字区间(如果step='3 '则合法数字为-3，0，3，6等。)
价值
数字
规定的默认值
提示：iPhone中的Safari浏览器支持数字输入类型，更改触摸屏键盘与之匹配(显示数字)。
输入类型-范围
范围类型用于应包含数值范围的输入字段。
范围类型显示为滑块。
您还可以对可接受的数量设置限制：
例子
使用以下属性定义号码类型：
属性
价值
形容
最大
数字
最大允许值
部
数字
允许的最小值
步骤
数字
合法数字区间(如果step='3 '则合法数字为-3，0，3，6等。)
价值
数字
规定的默认值
输入-日期选择器(日期选择器)
5 HTML5有几个用于选择日期和时间的新输入类型：
1日期-选择年、月、日
6月-选择月份和年份。
1周-选择周和年。
18时间-选择时间(小时和分钟)
9 datetime-选择时间、日期、月份和年份(UTC时间)
2日期时间-当地时间-选择时间、日期、月份和年份(当地时间)
以下示例允许您从日历中选择一个日期：
例子
日期：
虽然输入类型增加了更多的属性，但是大部分都很简单，和原来的文字和密码一样。
5个HTML5表单元素
HTML5有几个与表单相关的元素和属性。
数据列表元素
datalist元素指定输入字段的选项列表。
该列表由datalist中的option元素创建。
要将datalist绑定到输入字段，请使用输入字段的list属性引用datalist的id:
例子
网页：
提示：option元素应该总是设置value属性。
Keygen元素
keygen元素的功能是提供一种可靠的方法来验证用户。
关键元素是密钥对生成器。当提交表单时，生成两个密钥，一个是私钥，另一个是公钥。
私钥存储在客户端，公钥发送到服务器。公钥可用于以后验证用户的客户端证书。
目前，浏览器对该元素的支持很差，不足以使其成为有用的安全标准。
例子
用户名：
加密：
输出元件
output元素用于不同类型的输出，如计算或脚本输出：
例子
5 HTML5表单属性
本章涵盖
和元素的新属性。
的新表单属性：
自动完成
novalidate
的新输入属性：
自动完成
自（动）调焦装置
形式
formoverrides(formaction，formenctype，formmethod，formnovalidate，formtarget)
高度和宽度
目录
最小、最大和步长
多个的
模式(正则表达式)
占位符
需要
自动完成属性
Autocomplete属性指定表单或输入域应具有自动完成功能。
注意：自动完成功能适用于标签，以及以下类型的标签:文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。
当用户在自动完成字段中开始输入时，浏览器应该在该字段中显示填充的选项：
例子
名字：
姓氏：
电子邮件：
注意：在某些浏览器中，您可能需要启用自动完成功能才能使该属性生效。
自动聚焦属性
Autofocus属性指定当页面被加载时，域自动获得焦点。
注意：自动聚焦属性适用于所有类型的标签。
例子
用户名：
表单属性
form属性指定输入字段所属的一个或多个表单。
注意：表单属性适用于所有类型的标签。
表单属性必须引用其所属表单的id:
例子
名字：
姓氏：
注意：要引用多个表单，请使用空格分隔的列表。
覆盖表单属性
Formoverrideattributes允许您覆盖表单元素的某些属性设置。
表单的覆盖属性有：
2 for Action-覆盖表单的action属性。
2 form enctype-覆盖表单的enctype属性。
2 form Method-覆盖表单的method属性。
2 form novalidate-覆盖表单的novalidate属性。
2 form target-覆盖表单的目标属性。
注意：表单重写属性适用于以下类型的标记：submit和image。
例子
电子邮件：
注意：这些属性有助于创建不同的提交按钮。
以及高度和宽度属性。
高度和宽度属性指定用于图像类型的输入标签的图像高度和宽度。
注意：高度和宽度属性仅适用于图像类型的标签。
例子
列表属性
list属性指定输入字段的数据列表。Datalist是输入域的选项列表。
注意：列表属性适用于以下类型的标签:文本、搜索、URL、电话、电子邮件、日期选择器、数字、范围和颜色。
例子
网页：
最小、最大和步长属性
min、max和step属性用于为包含数字或日期的输入类型指定限制(约束)。
max属性指定输入字段中允许的最大值。
min属性指定输入字段中允许的最小值。
step属性为输入字段指定了一个合法的数字区间(如果step='3 '合法的数字是-3，0，3，6等等)。).
注意：min、max和step属性适用于以下类型的标签:日期选取器、数字和范围。
以下示例显示了一个数值字段，该字段以3为步长接受0到10之间的值(即合法值为0、3、6和9):
例子
积分：
多重属性
multiple属性指定可以在输入字段中选择多个值。
注意：multiple属性适用于以下类型的标记：电子邮件和文件。
例子
选择图像：
更新属性
novalidate属性指定在提交表单时不应验证表单或输入域。
注意：novalidate属性适用于
以及以下类型的标签:文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。
例子
电子邮件：
模式属性
pattern属性指定用于验证输入字段的模式。
模式是一个正则表达式。你可以在我们的JavaScript教程中学习正则表达式。
注意：模式属性适用于以下类型的标记：文本、搜索、URL、电话、电子邮件和密码。
以下示例显示了一个只能包含三个字母(不包括数字和特殊字符)的文本字段：
例子
国家代码：
pattern='[A-z]{ 3 } ' title=' three letter country code '/
占位符属性
placeholder属性提供了描述输入字段预期值的提示。
注意：占位符属性适用于以下类型的标记：文本、搜索、URL、电话、电子邮件和密码。
提示将在输入字段为空时出现，并在输入字段获得焦点时消失：
例子
必需属性
required属性指定在提交之前必须填写输入字段(不能为空)。
注意：必需属性适用于以下类型的标记：文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选和文件。
例子
名称：
这个简单的HTML5教程是给初学者的。HTML5里还有很多其他更高级的东西，这里就不介绍了。但是随着学习的深入，以后你一定会接触到的。最后我会给大家展示一些HTML5开发的例子，包括游戏，应用和各种demo。
HTML5开发的跳驴游戏：
5 HTML5开发游戏场景：
HTML5和JS开发的植物大战僵尸；
HTML5的传奇还在继续。你是否充满热情，渴望尝试HTML5的魅力？那就来学习吧。希望这篇教程对你的HTML5启蒙有所帮助。
