HTML5 学习

Internet Explorer9 将支持某些HTML5 特性;

当前，video 元素支持两种视频格式：
Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg X X X
MPEG 4 X X
Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件
MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件

Internet Explorer 8 不支持video,audio元素。在IE 9 中，将提供对使用MPEG4 的video 元素
的支持。

当前，audio 元素支持三种音频格式：
Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis X X X
MP3 X X
Wav X X X

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
HTML5 使用JavaScript 来存储和访问数据。

主要特性：
• 应用：Web Application (离线,缓存）+WebWorker
• 存储：LocalStorage + IndexexDB + FileReader
• 通讯：WebSocket(即时通信，服务器推送服务) + Geolocation (地理位置）
• 多媒体：Video/Audio + Canvas + Web GL(3D)
• 表单元素：email,url,password,search, date, tel etc.

CSS新特性：http://directguo.com/html5/#slide46

为了在移动终端的市场上取得更大的突破，微软需要一种跨平台的强有力的技术，这就是HTML5。如果不考虑跨平台，而且想制作绚丽的界面的话，也可以选择silverlight。

有一种方法可以使用新的特性，同时不影响旧版浏览器对你的站点的访问。你可以使用polyfill。polyfill是模拟未来API的shim，它向旧版浏览器提供后备的功能。当旧版浏览器不支持站点中的某项HTML5功能时，polyfill会补充其中的空隙。学会使用这些polyfill，你就不必为了使用HTML5而抛弃那些使用旧版浏览器的用户。获得polyfill支持的一种方法是使用JavaScript库——Modernizr（当然可用的不止这一种）。它会带来特性侦测能力，这样你就能检查浏览器究竟是否支持某种功能（比如canvas元素）。如果不支持，就提供一个备用的选择。

section:这可以是书中的一章或一节，实际上可以是在HTML4中有自己的标题的任何东西
header:页面上显示的页眉，与head元素不一样；
footer:页脚，可以显示电子邮件中的签名；
nav:指向其他页面的一组衔接；
article：blog、杂志、文章汇编等中的一篇文章；
aside：代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容；
figure:代表一个块级图像，还可以包括说明；
dialog：表示几个人之间的对话，dt元素可以表示讲话者，dd元素可以表示讲话内容。

内联元素：
m:表示文本被“加上标志”，但是不一定强调。可以把它想象成书中突出显示的一节。可以写成<mark>.
time:每个time元素都应该有一个datetime属性比如<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April23rd</time>
meter:表示指定范围内的数字值。例如，可以用它表示薪水、百分比或考试分数。
progress:表示一个正在进行的过程的状态就像进度条。

canvas元素本身没有绘图能力，所有绘制工作必须在javascript内部完成;

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session 的数据存储
HTML5 使用JavaScript 来存储和访问数据。

HTML5 新的Input 类型:
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

HTML5 的新的表单元素：
datalist
keygen
output

新的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

<!--we move on to including a special JS file that will enable Internet Explorer (any version) to render HTML5 tags properly.-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coding A CSS3 &amp; HTML5 One Page Template | Tutorialzine demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!-- Internet Explorer HTML5 enabling script: -->
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">
            .clear {
                zoom: 1;
                display: block;
            }
        </style>
    <![endif]-->
</head>

LocalStorage和sessionStorage的数据以字符串键值对的形式储存，他们的区别如下：
生存周期不同：当包含页面的选项卡或者窗口关闭后，sessionStorage中存储的数据就清空了，而LocalStorage中存储的数据依然存在；
数据可见度不同：sessionStorage中存储的数据只有当前页面可以访问，而LocalStorage存储的数据对相同origin的所有页面都可见。

Web Storage事件会在相同origin的所有页面上触发，无论该页面是否对Web Storage进行过操作，所以可以利用这些事件来进行页面之间的通信。