HTML5简介
什么是HTML5？
l HTML5是下一代的HTML，将成为HTML、XHTML 以及HTML DOM 的新标准。
l HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。
l HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。
HTML5 是如何起步的？
HTML5 是W3C 与WHATWG 合作的结果。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
（W3C 指World Wide Web Consortium，万维网联盟。WHATWG 指Web Hypertext Application Technology Working Group。）
为HTML5 建立的一些规则：
l 新特性应该基于HTML、CSS、DOM 以及JavaScript。
l 减少对外部插件的需求（比如Flash）
l 更优秀的错误处理
l 更多取代脚本的标记
l HTML5 应该独立于设备
l 开发进程应对公众透明
新特性
HTML5 中的一些有趣的新特性：
l 用于绘画的canvas 元素
l 用于媒介回放的video 和audio 元素
l 对本地离线存储的更好的支持
l 新的特殊内容元素，比如article、footer、header、nav、section
l 新的表单控件，比如calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer
9 将支持某些HTML5 特性。
HTML5视频
Web 上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过video 元素来包含视频的标准方法。
视频格式
当前，video 元素支持两种视频格式：
Ogg - 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件
MPEG4 - 带有H.264 视频编码和AAC 音频编码的MPEG4 文件
如何工作
<video src=”movie.ogg” controls=”controls”>
</video>
control属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video>与</video>之间插入的内容是供不支持video 元素的浏览器显示的。
示例：
<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</video>
上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器。要确保适用于Safari 浏览器，视频文件必须是MPEG4 类型。
video 元素允许多个source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
示例：
<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>
<video> 标签的属性
|
属性 |
描述 |
|
autoplay |
视频在就绪后马上播放 |
|
controls |
向用户显示控件（比如播放按钮） |
|
height |
设置视频播放器的高度 |
|
width |
设置视频播放器的宽度 |
|
loop |
当媒介文件完成播放后再次开始播放 |
|
preload |
视频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性） |
|
src |
要播放的视频的URL |
HTML5音频
Web 上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
音频格式
当前，audio 元素支持三种音频格式：Ogg Vorbis、MP3、Wav
如何工作
<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.
</audio>
上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器。要确保适用于Safari 浏览器，音频文件必须是MP3 或Wav 类型。
audio 元素允许多个source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
示例：
<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>
<audio> 标签的属性
|
属性 |
描述 |
|
autoplay |
音频在就绪后马上播放 |
|
controls |
向用户显示控件（比如播放按钮） |
|
preload |
音频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性） |
|
src |
要播放的音频的URL |
HTML5 Web存储
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
l localStorage – 没有时间限制的数据存储
l sessionStorage – 针对一个session的数据存储
之前，这些都是由cookie 完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie 速度很慢而且效率也不高。
在HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
HTML5 使用JavaScript 来存储和访问数据。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
创建和访问localStorage：
<script type=”text/javascript”>
localStorage.lastname = ”Smith”;
document.write(localStorage.lastname);
</script>
下面的例子对用户访问页面的次数进行计数：
<script type=”text/javascript”>
if (localStorage.pagecount)
{
localStorage.pagecount = Number(localStorage.pagecount) + 1;
}
else
{
localStorage.pagecount = 1;
}
document.write(“Visits “ + localStorage.pagecount + ” time(s).”);
</script>
sessionStorage 方法
sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个sessionStorage：
<script type=”text/javascript”>
sessionStorage.lastname = ”Smith”;
document.write(sessionStorage.lastname);
</script>
下面的例子对用户在当前session 中访问页面的次数进行计数：
<script type=”text/javascript”>
if (sessionStorage.pagecount)
{
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
}
else
{
sessionStorage.pagecount = 1;
}
document.write(“Visits “ + sessionStorage.pagecount + ” time(s) this session.”);
</script>
HTML5新的Input类型
HTML5 拥有多个新的表单输入类型，提供了更好的输入控制和验证。
Input类型 - email
email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。
E-Mail: <input type=”email” name=”user_email” />
Input类型 - url
url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。
Homepage: <input type=”url” name=”user_url” />
Input类型 - number
number类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
Points: <input type=”number” name=”points” min=”1″ max=”10″ />
|
属性 |
描述 |
|
max |
规定允许的最大值 |
|
min |
规定允许的最小值 |
|
step |
规定合法的数字间隔（如果step=”3″，则合法的数是-3,0,3,6 等） |
|
value |
规定默认值 |
Input类型 - range
range类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
<input type=”range” name=”points” min=”1″ max=”10″ />
|
属性 |
描述 |
|
max |
规定允许的最大值 |
|
min |
规定允许的最小值 |
|
step |
规定合法的数字间隔（如果step=”3″，则合法的数是-3,0,3,6 等） |
|
value |
规定默认值 |
Input类型 - Date Pickers（数据检出器）
HTML5拥有多个可供选取日期和时间的新输入类型：
|
类型 |
描述 |
|
date |
选取日、月、年 |
|
month |
选取月、年 |
|
week |
选取周和年 |
|
time |
选取时间（小时和分钟） |
|
datetime |
选取时间、日、月、年（UTC 时间） |
|
datetime-local |
选取时间、日、月、年（本地时间） |
示例：Date: <input type=”date” name=”user_date” />
Input类型 - search
search类型用于搜索域，比如站点搜索或Google 搜索。search域显示为常规的文本域。
