Html5新特性

一.新特性

• 1.取消了过时的现实效果标签<font></font> <center></center>...
• 2.新表单元素的引入，实际项目中不会使用，很麻烦

    form属性：
    autocomponent: on/off
    novalidate: true/false
    
    input的属性：
    <input type="email" form="formId" required/>
    <input type="url" />
    <input type="number" />
    <input type="range" />
    <input type="date" />  
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间（小时和分钟）
    datetime - 选取时间、日、月、年（UTC 时间）
    datetime-local - 选取时间、日、月、年（本地时间）
    <input type="search" />
    <input type="color" />
    form：值为一个form的Id，表示会在当前的form下面，随便input放在当前页面的某个地方
    required：表示必填，会进行校验
    placeholder:占位符
    autofocuse:自动获取焦点

• 3.新的语义标签

   <nav></nav>
   <header></header>
   <aside></aside>
   <article></article>
   <section></section>
   <footer></footer>
   <time></time>
   <figure></figure> 定义独立的流内容（图像、图表、照片、代码等等）。
   <figcaption></figcaption> 定义<figure>的标题，通常置于figure元素的第一个或最后一个子元素

• 4.canvas 放一个例子吧，饼图和环形图，没做很多处理，实际应用中需要 http:// juejin.cn/post/684490…
• 5.本地存储

  window.localStorage - 存储没有截止日期的数据
  window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
  

• 6.一些api

二.兼容IE的解决方案

• 1.通过动态创建自定义元素,如果出现20个新的语义标签么就需要20个createElement，并且通过css定义为block元素，这样才能定义宽高

<script>
    document.createElement('nav');
</script>
<style>
    nav {
        display: block;
    }
</style>

• 2.引入html5shiv.js插件(腻子程序)，本质上跟第一种是一样的，需要判断浏览器类型

<!--[if lte IE8]>
  <script type="text/javascript" src="../html5shiv.min.js"></script>
<![endif]-->