认识 HTML5 的新增元素

为什么会有HTML5这个版本？
4.01后，w3c并不看好html，他们转而去发展XHTML，但并不理想。这时候由浏览器厂商们提出的H5标准更能顺应web2.0的时代，所以h5被慢慢推广了起来。
2004年，浏览器主要厂商成立了WHATWG（Web Hypertext Application Technology Working Group）组织，它们创立了HTML5规范，专门针对WEB应用开发新功能（web应用新功能被认为是HTML4中最薄弱的环节）。WEB2.0也正是那个时候提出的。WEB2.0实至名归，开创了web的第二个时代，旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。2014年10月底（29日），HTML5规范正式定稿。

常见的html5新增语义化标签
1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释

HTML5新增的结构标签
<header>...</header> 头部
<nav>...</nav> 导航
<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
<aside>...</aside> 侧边栏
<footer>...</footer> 页脚
<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

HTML5新增的结构标签
<figure></figure> 用于对元素进行组合。多用于图片与图片描述组合

<figure>
	<img src="img.gif" alt="figure标签"  title="figure标签" />
	<figcaption>figure的标题</figcaption>
</figure>

<details> 标签用于描述文档或文档某个部分的细节
IE不支持 <details> 标签

<details>
	<summary>details中的标题</summary>
	<p>详细的内容</p>
</details>

<mark></mark>
定义带有记号的文本，它会给你要突出显示的文本下加个背景色。
如：<p>你是<mark>大长腿</mark>吗？</p>

<meter></meter>标签
<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

<meter min="0" max="100" value="80"></meter>

low:最低临界点
high：最高临界点

<meter min="0" max="100" value="81" low="20" high="80"></meter>

<progress></progress>标签

<progress> 标签定义运行中的进度（进程）

<progress max="100" value="20"></progress>

max：定义完成值
value：定义当前值

<datalist></datalist>标签
<datalist> 标签定义选项列表,与 input 元素配合使用该元素，来定义 input 可能的值
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
  	<option value="BMW">
  	<option value="Ford">
  	<option value="Volvo">
</datalist>

<video> </video>标签

<video> 标签定义视频，比如电影片段或其他视频流
<video src="movie.mp4" controls>
		您的浏览器不支持 video 标签。
</video>

<audio></audio>标签
<audio> 标签定义声音，比如音乐或其他音频流

<audio src="someaudio.mp3">
		您的浏览器不支持 audio 标签。
</audio>

<source></source> 标签
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<audio controls>
   	<source src="horse.ogg" >
   	<source src="horse.mp3" >
 		Your browser does not support the audio element.
</audio> 

<embed/>标签
<embed> 标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音
<embed> 标签必须有 src 属性

<embed src="helloworld.mp4" />

<canvas> </canvas> 标签
canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果

<canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
</script>