h5的随笔

h5新增的一些标签总结

一 根据页面结构，由div派生的标签

     <article> 定义一个文章区域
     <aside> 定义页面的侧边栏内容

     <section> 用来划分页面上的不同区域
     <header>  <nav> <footer>

二 媒体元素

  <audio>定义音频内容
  <video> 定义视频，比如电影片段或其他视频流。
  <figure>和 <figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。定义视频，比如电影片段或其他视频流。

三 选项列表

   <datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
  <input id="myCity" list="city" />
  <datalist id="city">
    <option value="bj"> 
    <option value="sz"> 
    <option value="gz">
   </datalist>

四 细节

      <details> 标签，用于描述文档或文档某个部分的细节。
     与<summary>标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
     <details>
     <summary>北京.</summary>
     <p>北京是中国的首都</p>
     </details>

五、其他标签

     <******> 标签，规定用于表单的**对生成器字段。（用于给表单添加公钥）
     当提交表单时，私钥存储在本地，公钥发送到服务器。
     <process>标签，定义进度条
     <address> 标签，定义文档或文章的作者/拥有者的联系信息。
     <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行
     <mark> 标签，定义带有记号的文本。在需要突出显示文本时使用 该 标签，默认加黄色背景。
     <******> 标签，规定用于表单的**对生成器字段。（用于给表单添加公钥）
     当提交表单时，私钥存储在本地，公钥发送到服务器。

六 h5标签的兼容性
ie6/7不兼容h5标签，解决方法。
1.通过使用JS动态创建

 <script> document.creatElement("header")</script>

注意：IE6是不识别header等标签的，所以认为是自定义标签。而自定义标签是内联元素，所以要显示一些效果，需要在选择器中加入display:block;
2.这样做比较麻烦，需要创建多个标签
因此我们可以引入一个h5的文件即可

<script src="js/html5shw.js">  </script>