古人有云：温故而知新。活到老，学到老，作为一枚前端的程序猿，不停的学习能够让我们对我们的技术有一个更加丰富的认识。这几天，项目已经完成，但我发现自己的知识体系存在一些短板，特别是在H5方面，所以我又回过头来对H5进行了一个简单的温习回顾，在此过程中，我又发现了很多好玩的东西。
H5是一个新的网络标准，因此它提供了一些新的元素和属性，反映了典型的现代用法。并且希望减少浏览器对于丰富的插件的依赖，通过一些语义化H5的新标签及其特性有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时也为其他浏览器提供了一些新的功能。
在对H5的温习回顾中，从新的标签特性开始，拟一篇文章，文章有标题，开头，内容包括章节，结尾，注释等，所以在H5中有了如下标签：
<header>这是页面开头</header> <article>这是文章内容 <section>这是文章内容章节</section> </article> <aside>这是文章内容外的一些其他内容</aside> <footer>这是页面结尾</footer>
以上标签构成了一个页面的基本框架，但是光有文本是不够的，还需要一些有趣的东西，于是：
<embed src="horse.wav" /> 其他插件的引入 <canvas id="myCanvas" width="200" height="200">canvas画布</canvas> <audio>音频 <section src='#'>音频资源引入</section> </audio> <video>视频 <section src='#'>视频资源引入</section> </video>
一个页面中肯定要有图片的插入，这时我们就会对图片有个简单的描述或者加上图片的标题：
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
很好，接下来我们需要的是，给用户一些良好的体验：
<menu> <command type="command">Click Me!</command> </menu><!--定义命令按钮，比如单选按钮、复选框或按钮--> <input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist><!--标签定义选项列表--> <form action="demo_keygen.asp" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form><!--密钥生成-->
以及<rt> 给一些字符注音。
我们接着往下对我们的页面进行一个优化，让用户在视觉体验上有一些良好的感觉：
<progress value="22" max="100"></progress> <!--加载时的一个进度条--> <meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter> <!--度量给定范围的数据显示--> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0// 计算的逻辑(方式) <input type="range" id="a" value="50">100+ <input type="number" id="b" value="50">= <output name="x" for="a b"></output>// 用于显示计算结果 </form><!--对一些结果或者内容进行一个动态输出-->
到这一步，一个页面，加上之前H4的一些标签以及CSS、CSS3样式混合使用进来，一个基本的页面就完成了。如果还需要一些更加深入的交互验证的良好体验：
<input type="button" value="按钮"/><!-- 按钮 --> <input type="submit" value="提交"/>><!-- 提交按钮 --> <input type="color"/><!-- 选色板 --> <input type="date"/><!-- 时间 年月日 --> <input type="datetime"/><!-- UTC时间 存在兼容 --> <input type="datetime-local"/><!-- 当地时间 年月日时分 --> <input type="week"/><!-- 周 X年X周 --> <input type="time"/><!-- 时间 时分 --> <input type="month"/><!-- 月 年月 --> <input type="year"/><!-- 年 --> <input type="email"/><!-- 电子邮箱 --> <input type="file" value="浏览"/><!-- 文件上传 --> <input type="hidden"/><!-- 存储一些少量的信息 --> <input type="image" /><!-- 图片 --> <input type="password" /><!-- 图片 --> <input type="range" /><!-- 数字控件 --> <input type="radio" name="sex"/><!-- 单选 --> <input type="radio" name="sex"/><!-- 单选 --> <input type="checkbox" name="hobby"/><!-- 复选 --> <input type="search"/><!-- 搜索 --> <input type="tel"/><!-- 手机号 手机键盘调出数字键盘 --> <input type="url"/><!-- URL地址 -->
如此一来，我们的页面就更加地丰富多彩了。
根据这条逻辑线，对H5的记忆也格外的清晰，以上便是我在对H5的温习回顾中，整理出来的，其实H5增添的一些新标签以及特性并非没有逻辑性，仔细一看，它们还是挺可爱的，你们说呢？