HTML5 入門--1

 

HTML5概述：

 * 聲明：<!DOCTYPEhtml>

 視頻處理：

 * 在HTML5中如何使用視頻處理：

   * 概述：

     * 目前HTML頁面中播放視頻，使用Flash技術實現

       * 瀏覽器原生不支持Flash，使用ActiveX組件

       * Flash技術比較耗資源，性能不好

       * 移動智能操作系統不支持Flash

     * HTML5提供視頻播放功能：

       * 提供video元素實現視頻處理

       * 性能比較Flash好很多

       * 對移動智能操作系統支持很好

     * video元素瀏覽器兼容性不是很好

       * IE瀏覽器(8或更早版本)不支持

     * video元素支持的視頻格式：

       * OGG格式：Theora 視頻和 Vorbis 音頻解碼器，擴展名爲".ogg"

       * MP4格式：H.264 視頻和 AAC 音頻解碼器，擴展名爲".mp4"

       * WebM格式：VP8視頻和 Ogg Vorbis 音頻解碼器，擴展名爲".webm"

   * 如何使用video元素：

     * 注意：

       * HTML頁面使用的聲明必須是HTML5版本

     * 使用source元素爲瀏覽器提供備選視頻格式

       * source元素必須要定義在video元素中

       * source元素使用src屬性指定載入視頻

       * 使用source元素時，video元素不要指定src屬性

       * 一個video元素中允許使用多個source元素

     * 當瀏覽器不支持video元素時，可以在video元素中使用文本作爲提示

   * video元素的特有屬性：

     * autoplay屬性：表示當前視頻自動播放

     * controls屬性：表示當前視頻顯示控制按鈕

     * loop屬性：表示當前視頻允許重複播放

     * poster屬性：表示視頻播放之前，顯示一張圖片

 * 通過編程方式實現視頻處理：

   * 事件：

     * play事件：開始播放視頻時觸發

     * pause事件：暫停播放視頻時觸發

     * ended事件：視頻播放完畢時觸發

     * canplay事件：當前視頻可播放時觸發

     * error事件：當前視頻播放出錯時觸發

   * 方法：

     * play( )

     * pause( )

   * 屬性：

     * 用作判斷：

       * paused：判斷當前視頻是否暫停或播放狀態

       * ended：判斷當前視頻是否播放完畢

     * 與視頻時長：

       * duration：獲取當前視頻的時長

       * currentTime：獲取或設置當前視頻的播放位置(時間點)

音頻處理：

 * 在HTML5中如何使用音頻處理：

   * 概述：與video元素一致

   * audio元素

     * src屬性：指定載入音頻文件的路徑

     * 包含source元素

   * audio元素的屬性：與video元素一致

 * 通過編程方式實現音頻處理：

   * 事件：

     * play

     * pause

     * ended

   * 方法：

     * play()

     * pause()

HTML5表單元素：

 * input新類型：

   * email類型

     * 電子郵件：包含"@"即可

   * search類型

   * url類型

     * 網址：包含"http://"即可

   * tel類型

     * 只能手機端運行時，提示電話號碼的鍵盤

   * number類型

     * min屬性：設置當前數字最小值

     * max屬性：設置當前數字最大值

     * step屬性：默認爲1，每次增加或減少的步長

   * range類型

     * min屬性：設置當前數字最小值

     * max屬性：設置當前數字最大值

     * step屬性：默認爲1，每次增加或減少的步長

     * value屬性：設置當前範圍的初始值(當前值)

   * color類型

   * 時間類型：

     * date類型

     * week類型

     * month類型

     * datetime類型

     * datetime-local類型

 * 表單新元素：

   * datalist元素

     * 作用：預設值一些數據內容(並不顯示在HTML頁面中)

     * 用法：

       <datalist id="mylist">

       <option value=""lable="" />

       </datalist>

     * 好處：

       * HTML = 數據 + 結構

       * 將HTML中的數據與結構進行分離

   * progress元素：

     * 作用：表示一個任務的完成進度

     * 屬性：

       * max屬性：進度達到多少值表示完成

       * value屬性：表示當前完成的進度

   * meter元素

     * 屬性：

       * max屬性：設置最大值

       * min屬性：設置最小值

       * value屬性：當前值

       * low屬性：設置低於該值後警告

       * high屬性：設置高於該值後警告

   * output元素：

     * 作用：用於顯示錶單元素處理的結果

     * 屬性：

       * for屬性：可選，提高代碼可讀性

HTML5表單屬性：

 * Placeholder屬性

   * 作用：input文本框的默認顯示內容

 * Multiple屬性

   * 作用：input文本框輸入多個值(多個值之間逗號隔開)

 * Autofocus屬性

   * 作用：自動獲取焦點

 * Form屬性

   * 作用：在表單外定義表單元素