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標籤的屬性、方法和事件