古人有云：温故而知新。活到老，学到老，作为一枚前端的程序猿，不停的学习能够让我们对我们的技术有一个更加丰富的认识。这几天，项目已经完成，但我发现自己的知识体系存在一些短板，特别是在H5方面，所以我又回过头来对H5进行了一个简单的温习回顾，在此过程中，我又发现了很多好玩的东西。

　　H5是一个新的网络标准，因此它提供了一些新的元素和属性，反映了典型的现代用法。并且希望减少浏览器对于丰富的插件的依赖，通过一些语义化H5的新标签及其特性有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时也为其他浏览器提供了一些新的功能。

　　在对H5的温习回顾中，从新的标签特性开始，拟一篇文章，文章有标题，开头，内容包括章节，结尾，注释等，所以在H5中有了如下标签：

<header>这是页面开头</header>
<article>这是文章内容<section>这是文章内容章节</section>
</article>
<aside>这是文章内容外的一些其他内容</aside>
<footer>这是页面结尾</footer>

以上标签构成了一个页面的基本框架，但是光有文本是不够的，还需要一些有趣的东西，于是：

<embedsrc="horse.wav" /> 其他插件的引入
<canvasid="myCanvas"width="200"height="200">canvas画布</canvas>
<audio>音频<sectionsrc='#'>音频资源引入</section>
</audio>
<video>视频<sectionsrc='#'>视频资源引入</section>
</video>

一个页面中肯定要有图片的插入，这时我们就会对图片有个简单的描述或者加上图片的标题：

<figure><figcaption>黄浦江上的的卢浦大桥</figcaption><imgsrc="shanghai_lupu_bridge.jpg"width="350"height="234" />
</figure>

很好，接下来我们需要的是，给用户一些良好的体验：

<menu><commandtype="command">Click Me!</command>
</menu><!--定义命令按钮，比如单选按钮、复选框或按钮--><inputid="myCar"list="cars" />
<datalistid="cars"><optionvalue="BMW"><optionvalue="Ford"><optionvalue="Volvo">
</datalist><!--标签定义选项列表--><formaction="demo_keygen.asp"method="get">用户名:<inputtype="text"name="usr_name">加密:<keygenname="security"><inputtype="submit">
</form><!--密钥生成-->以及<rt> 给一些字符注音。

我们接着往下对我们的页面进行一个优化，让用户在视觉体验上有一些良好的感觉：

<progressvalue="22"max="100"></progress>
<!--加载时的一个进度条--><metervalue="3"min="0"max="10">十分之三</meter>
<metervalue="0.6">60%</meter>
<!--度量给定范围的数据显示--><formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0// 计算的逻辑(方式)<inputtype="range"id="a"value="50">100+<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output>// 用于显示计算结果</form><!--对一些结果或者内容进行一个动态输出-->

到这一步，一个页面，加上之前H4的一些标签以及CSS、CSS3样式混合使用进来，一个基本的页面就完成了。如果还需要一些更加深入的交互验证的良好体验：

　　 <inputtype="button"value="按钮"/><!--按钮--><inputtype="submit"value="提交"/>><!--提交按钮--><inputtype="color"/><!--选色板--><inputtype="date"/><!--时间 年月日--><inputtype="datetime"/><!--UTC时间 存在兼容--><inputtype="datetime-local"/><!--当地时间 年月日时分--><inputtype="week"/><!--周 X年X周--><inputtype="time"/><!--时间 时分--><inputtype="month"/><!--月 年月--><inputtype="year"/><!--年--><inputtype="email"/><!--电子邮箱--><inputtype="file"value="浏览"/><!--文件上传--><inputtype="hidden"/><!--存储一些少量的信息--><inputtype="image" /><!--图片--><inputtype="password" /><!--图片--><inputtype="range" /><!--数字控件--><inputtype="radio"name="sex"/><!--单选--><inputtype="radio"name="sex"/><!--单选--><inputtype="checkbox"name="hobby"/><!--复选--><inputtype="search"/><!--搜索--><inputtype="tel"/><!--手机号 手机键盘调出数字键盘--><inputtype="url"/><!--URL地址-->

如此一来，我们的页面就更加地丰富多彩了。

　　根据这条逻辑线，对H5的记忆也格外的清晰，以上便是我在对H5的温习回顾中，整理出来的，其实H5增添的一些新标签以及特性并非没有逻辑性，仔细一看，它们还是挺可爱的，你们说呢？