1 首先介绍一下html5,以及为什么用html5,
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 是下一代 HTML 标准。
2 再看一下html5的一些新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
3 html5的使用
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
<!DOCTYPE html>
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
4 接下来仔细介绍html5的具体功能
- 用于绘画的canvas元素 这个也许是html5最炫的功能了，由于API比较多 所以放在以后专门的随笔介绍。
- HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
- HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
- 新的语义元素
语义= 意义.
语义元素 = 元素的意义.
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，
网页上的文章的 标题 就可以用标题标签，网页上的各个栏目的 栏目名称 也可以使用标题标签。
文章中内容的段落就得放在 段落标签 中，在文章中有想强调的文本，就可以使用em标签表示强调等等。
语义化的好处
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
3. 能够更好的体现页面的主题
4.兼容性更好，支持更多的网络设备
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aaron</title>
</head>
<body>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol opanda named Chi Chi</p>
</section>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</body>
</html>
下面是效果
<header>元素描述了文档的头部区域
<header>元素注意用于定义内容的介绍展示区域.
在页面中你可以使用多个<header> 元素.
<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
根据W3C HTML5文档: section 包含了一组内容及其标题。
<article> 标签定义独立的内容。
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。
aside 标签的内容应与主区域的内容相关.
<footer> 元素描述了文档的底部区域.
<footer> 元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个 <footer>元素.
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 标签定义 <figure> 元素的标题.
- 表单相关
HTML5 拥有多个新的表单输入类型：color date datetime datetime-local email month number range search tel time url week
<input type="color" name="favcolor">
HTML5 有以下新的表单元素:<datalist> <keygen> <output>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<form>新属性：autocomplete novalidate
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input>新属性：autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height与width list min与max multiple pattern placeholder required step
First name:<input type="text" name="fname" autofocus><!--自动聚焦-->
- Web Storage
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。