浅谈 温故知新——HTML5！

　　古人有云：温故而知新。活到老，学到老，作为一枚前端的程序猿，不停的学习能够让我们对我们的技术有一个更加丰富的认识。这几天，项目已经完成，但我发现自己的知识体系存在一些短板，特别是在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增添的一些新标签以及特性并非没有逻辑性，仔细一看，它们还是挺可爱的，你们说呢？