H5概括

写在前面 -- 须要提早了解的

这是写给本身的概括
HTML5介绍

• 新的特性

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，好比 article、footer、header、nav、section
  • 新的表单控件，好比 calendar、date、time、email、url、search

HTML5 浏览器兼容性兼容性

• Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

  //国外
      <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      //国内
      <!--[if lt IE 9]>
        <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <![endif]-->

• 你可让一些较早的浏览器（不支持HTML5）支持 HTML5（你能够 "教会" 浏览器处理 "未知" 的 HTML 元素）。

  //为了能让旧版本的浏览器正确显示这些元素，你能够设置 CSS 的 display 属性值为 block
  
  
  header, section, footer, aside, nav, main, article, figure {
          display: block; 
      }

HTML5 新元素

• <canvas> 新元素

  • <canvas> 标签订义图形，好比图表和其余图像。该标签基于 JavaScript 的绘图 API

    • 浏览器支持IE 九、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

• 新多媒体元素

  • HTML DOM Audio 对象

  • <audio> 播放声音文件或者音频流。

    浏览器支持IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。
         <audio controls>
           <source src="horse.ogg" type="audio/ogg">
           <source src="horse.mp3" type="audio/mpeg">
           您的浏览器不支持 audio 元素。
         </audio>

    
    

  • <video> 定义视频，好比电影片断或其余视频流。

    Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。
    <video src="movie.ogg" controls="controls">
     您的浏览器不支持 video 标签。
     </video>

    
    

  • <source> 标签为媒体元素（好比 <video> 和 <audio>）定义媒体资源。

    • IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <source> 标签
    • 标签容许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

  • <embed> 标签订义了一个容器，用来嵌入外部应用或者互动程序（插件）。

    全部主流浏览器都支持 <embed> 标签。
     <embed src="helloworld.swf">

  • <track> 标签为媒体元素（好比 <audio> and <video>）规定外部文本轨道。

    IE 十、Opera 和 Chrome 浏览器支持 <track> 标签。
     带有两个字幕轨道的视频：
     <video width="320" height="240" controls>
         <source src="forrest_gump.mp4" type="video/mp4">
         <source src="forrest_gump.ogg" type="video/ogg">
         <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
         label="English">
         <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
         label="Norwegian">
     </video>

• 新表单元素

  • <keygen>、<output>可是因为不支持IE,兼容性很差，就不说了。
  • <datalist> 标签规定了 <input> 元素可能的选项列表(搜索自动匹配)。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。
            用户能看到一个下拉列表，里边的选项是预先定义好的，将做为用户的输入数据。
            <input list="browsers">
            <datalist id="browsers">
              <option value="Internet Explorer">
              <option value="Firefox">
              <option value="Chrome">
              <option value="Opera">
              <option value="Safari">
            </datalist>
            请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

• HTML5 新的语义和结构元素

  • <article> 定义页面独立的内容区域。
  • <aside> 定义页面的侧边栏内容。
  • <bdi> 容许您设置一段文本，使其脱离其父元素的文本方向设置。
  • <command> 定义命令按钮，好比单选按钮、复选框或按钮
  • <details> 用于描述文档或文档某个部分的细节
  • <dialog> 定义对话框，好比提示框
  • <summary> 标签包含 details 元素的标题
  • <figure> 规定独立的流内容（图像、图表、照片、代码等等）。
  • <figcaption> 定义 <figure> 元素的标题
  • <footer> 定义 section 或 document 的页脚。
  • <header> 定义了文档的头部区域
  • <mark> 定义带有记号的文本。
  • <meter> 定义度量衡。仅用于已知最大和最小值的度量。
  • <nav> 定义导航连接的部分。
  • <progress> 定义任何类型的任务的进度。
  • <ruby> 定义 ruby 注释（中文注音或字符）。
  • <rt> 定义字符（中文注音或字符）的解释或发音。
  • <rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
  • <section> 定义文档中的节（section、区段）。
  • <time> 定义日期或时间。
  • <wbr> 规定在文本中的何处适合添加换行符。【全部主流浏览器都支持 <wbr> 标签，除了 Internet Explorer。】

HTML5 Canvas

• w3school Canvas教程

HTML5 SVG

• Internet Explorer 九、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
• w3school SVG教程

HTML5 Web Worker

w3school Web Worker教程

HTML 5 Web 存储

简介：以前，这些都是由 cookie 完成的。可是 cookie 不适合大量数据的存储，由于它们由每一个对服务器的请求来传递， 这使得 cookie 速度很慢并且效率也不高。

• localStorage - 没有时间限制的数据存储.次日、第二周或下一年以后，数据依然可用。

  <script type="text/javascript">
      localStorage.lastname="Smith";
      document.write(localStorage.lastname);
  </script>

• sessionStorage - 针对一个 session 的数据存储.当用户关闭浏览器窗口后，数据会被删除。

  <script type="text/javascript">
      sessionStorage.lastname="Smith";
      document.write(sessionStorage.lastname);
  </script>

HTML 5 应用程序缓存 Application Cache

• Application Cache

HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的状况下使用，经过建立cache manifest文件，能够轻松的建立离线应用。
Application Cache带来的三个优点是：

• 离线浏览
• 提高页面载入速度
• 下降服务器压力

并且主要浏览器(除了 Internet Explorer)皆以支持Application Cache，就算不支持也不会对程序形成什么影响。

HTML 5 服务器发送事件

• 服务器发送事件

音乐播放器

Audio标签结合原生js作了一个简单的音乐播放器
很全的audio标签的属性、方法和事件