HTML５的一些新特性

新特性

1. audio和video音视频播放，抛弃了Flash

   • <audio> ：播放音乐或音频

     格式：.mp3 / .ogg / .wav

   • <video>：连接视频文件

     格式：.mp4 / .ogg / .webm

2. canvas画布，进行绘画以及制作动画

   必须结合JS使用，单独使用无意义。

   具体功能通过JS来体现

   宽高直接使用属性实现，不通过CSS

   <canvas width="400" height="200" style="background-color: brown"></canvas>
   ----------------
   <script>
       var canvas = document.getElementsByTagName('canvas')[0];
       var ctx = canvas.getContext('2d');
       ctx.fillStyle = '#fff';
       ctx.fillRect(10,10,100,100)
   </script>
   

3. 地理定位

4. 离线缓存

5. Web Socket （全双工通信）

6. 增加本地存储

7. 语义化标签

   • 网页布局标签

     header ：页首、nav ：导航栏、aside ：侧边栏、main ：主体、section ：区块、article ：文章、footer ：页尾

   • 语义化标签

     • <mark> </mark>：高亮显示，行级标签

     • <details> & <summary>一般用于名词解释或用于封装一个区块

       <details>
       	<summary></summary>
           <h1></h1>
           ······
       </details>
       

     • <meter>：定义度量衡

       <meter value="" min="" max="" ></meter>
       

     • <progress>：进度条

       <progress value="70" min="0" max="100"></progress>70%
       

     • <dialog> 对话框或窗口

       <dialog open>
       	<h2>fafafa</h2>
               <ul>
                   <li>fa</li>
                   <li>fa</li>
                   <li>fa</li>
              </ul>
       </dialog>
       

     • <figure> 对元素进行组合，一般用于组合一张图的标题、图片和图片描述

       <figure>
           <h4></h4>
           <img />
           <p></p>
       </figure>
       

常用属性

• contentEditable：将标签转换为可编辑状态

  <p contenteditable="true">contentEditable</p>
  

• hidden ：对元素进行隐藏，一般用于传值或判断后进行显示

• data-*：用于存储页面或应用程序的私有自定义数据，一般拿来传值

• multiple：用于表单多选

• required ：规定表单元素提交前必须输入值

• pattern：验证输入字段模式