HTML5 學習筆記（一）——HTML5概要與新增標籤

標籤：支援   需求   通訊   筆記   並且   demo   程式   代碼塊   存在   

目錄

• 一、HTML5概要
• 1.1、為什麼需要HTML5
• 1.2、什麼是HTML5
• 1.3、HTML5現狀及瀏覽器支援
• 1.4、HTML5特性
• 1.5、HTML5優點與缺點
• 1.5.1、優點
• 1.5.2、缺點
• 1.6、HTML5效果展示
• 1.7、HTML5學習與開發工具
• 1.7.1、基礎要求
• 1.7.2、開發工具
• 1.8、HTML5文法規則與文檔聲明
• 1.8.1、文法規則
• 1.8.2、文檔聲明
• 1.8.2、文檔聲明
• 二、廢棄的標籤
• 三、新增的標籤
• 3.1、新增的結構標籤
• 3.2、新增加其它元素
• 3.2.1、meter
• 3.2.2、time
• 3.2.3、progress
• 3.2.4、datalist
• 3.3、多媒體標籤
• 3.3.1、video視頻標籤
• 3.3.2、audio音頻標籤
• 3.3.3、embed元素 
• 四、HTML5相容性
• 4.1、相容性測試
• 4.2、HTML5向下相容
• 4.2.1、相容測試
• 4.2.2、html5shiv
• 4.2.3、Modernizr
• 五、樣本下載

目錄

• 一、HTML5概要
• 1.1、為什麼需要HTML5
• 1.2、什麼是HTML5
• 1.3、HTML5現狀及瀏覽器支援
• 1.4、HTML5特性
• 1.5、HTML5優點與缺點
• 1.5.1、優點
• 1.5.2、缺點
• 1.6、HTML5效果展示
• 1.7、HTML5學習與開發工具
• 1.7.1、基礎要求
• 1.7.2、開發工具
• 1.8、HTML5文法規則與文檔聲明
• 1.8.1、文法規則
• 1.8.2、文檔聲明
• 1.8.2、文檔聲明
• 二、廢棄的標籤
• 三、新增的標籤
• 3.1、新增的結構標籤
• 3.2、新增加其它元素
• 3.2.1、meter
• 3.2.2、time
• 3.2.3、progress
• 3.2.4、datalist
• 3.3、多媒體標籤
• 3.3.1、video視頻標籤
• 3.3.2、audio音頻標籤
• 3.3.3、embed元素 
• 四、HTML5相容性
• 4.1、相容性測試
• 4.2、HTML5向下相容
• 4.2.1、相容測試
• 4.2.2、html5shiv
• 4.2.3、Modernizr
• 五、樣本下載

一、HTML5概要

1.1、為什麼需要HTML5

HTML4陳舊不能滿足日益發展的互連網需要，特別是移動互連網。為了增強瀏覽器功能Flash被廣泛使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。

HTML5增強了瀏覽器的原生功能，符合HTML5規範的瀏覽器功能將更加強大，減少了Web應用對外掛程式的依賴，讓使用者體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經曆了17年，HTML的變化很小，這並不符合一個好產品的演化規則。

1.2、什麼是HTML5

HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要外掛程式的豐富性網路應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，並且提供更多能有效加強網路應用的標準集。HTML5是HTML最新版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。目標是替換1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互連網應用迅速發展的時候，使網路標準達到匹配當代的網路需求。

1.3、HTML5現狀及瀏覽器支援

大部分主流瀏覽器已經支援HTML5，但是各個瀏覽器支援的方式以及文法有所差異性。支援Html5的瀏覽器包括Firefox（Firefox瀏覽器），IE9 及其更高版本，Chrome（Google瀏覽器），Safari，Opera等現代瀏覽器。

支援得分：

如果想瞭解更多請看本文的相容性那一節的內容。

PC端（總分555分）：

平板（總分555分）：

移動（總分555分）：

1.4、HTML5特性

HTML5 八個屬性類別別對應的8個Logo 語義網、離線&儲存、裝置訪問、通訊 多媒體、圖形和特效、效能和整合、呈現（CSS3）

1.4.1. 語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa的。

1.4.2. 本機存放區特性（Class: OFFLINE & STORAGE）

HTML5 APP Cache、本機存放區功能、IndexedDB、FileAPI

1.4.3. 裝置訪問特性 (Class: DEVICE ACCESS)

為移動開發而生。重力感應、全球地理定位、麥克風、網路攝影機

1.4.4. 串連特性（Class: CONNECTIVITY）

WebSocket、Server-Sent Events實現雙向串連，訊息推送

1.4.5. 網頁多媒體特性( Class: MULTIMEDIA）

支援網頁端的Audio、Video等多媒體功能。

1.4.6. 三維、圖形及特效特性（Class: 3D, Graphics & Effects）

這一招將Flash打敗，圖形增強，SVG，Canvas，WebGL，2D/3D遊戲和頁面視覺特效。

1.4.7. 效能與整合特性（Class: Performance & Integration）

沒有使用者會永遠等待你的Loading，HTML5增加WebWorker、XMLHttpRequest2

1.4.8.呈現（CSS3/styling)

除了DOM介面，HTML5增加了更多樣化的應用程式介面（API）：

HTML5Canvas API：有關動態產出與渲染圖形、圖表、映像和動畫的API HTML5音頻與視頻：HTML5裡新增的元素，它們為開發人員提供了一套通用的、整合的、指令碼式的處理音頻與視頻的API，而無需安裝任何外掛程式 離線儲存資料庫（離線網路應用程式） 編輯 拖放 跨文檔通訊 通訊／網路 Communication APIs：構建即時和跨源（cross-origin）通訊的兩大基礎： 跨文檔通訊（Cross Document Messaging）與XMLHttpRequest Level 2。 瀏覽曆史管理 MIME和協議進程時表頭登記 微資料 網頁儲存 以上技術儘管是WHATWG HTML說明文檔的內容，但並沒有全部包括在W3C HTML5的說明文檔裡。一些相關的技術，像下面所列的，並沒有包括在這2份文檔中的任何一份中。W3C給這些技術單獨出版了說明文檔。 Geolocation API：使用者可共用地理位置，並在Web應用的協助下享用位置感知服務（location-aware services） 索引資料庫API（Indexed Database API，以前為WebSimpleDB） 檔案API：處理檔案上傳和操縱檔案 目錄和檔案系統：這個API是為了滿足用戶端在沒有好的資料庫支援情況下儲存要求 檔案寫入：從網路應用程式向檔案裡寫內容 一個普遍的誤解是HTML5能夠在網頁中提供動畫效果，這是不對的，動畫效果是需要配合JavaScript和CSS。然而靜態HTML5配合CSS可以表示出覆雜的排版結構而且原生支援與視頻的混合與控制（控制一般由JavaScript運行），因此簡單可以把HTML5單位時間的狀態理解為動畫的主要畫面格。

1.5、HTML5優點與缺點1.5.1、優點

1、網路標準統一、HTML5本身是由W3C推薦出來的。 2、多裝置、跨平台 3、即時更新。 4、提高可用性和改進使用者的友好體驗； 5、有幾個新的標籤，這將有助於開發人員定義重要的內容； 6、可以給網站帶來更多的多媒體元素(視頻和音頻)； 7、可以很好的替代Flash和Silverlight； 8、涉及到網站的抓取和索引的時候，對於SEO很友好； 9、被大量應用於行動裝置 App程式和遊戲。

1.5.2、缺點

a)、安全：像之前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被駭客利用，來盜取使用者的資訊和資料。 b)、完善性：許多特性各瀏覽器的支援程度也不一樣。 c)、技術門檻：HTML5簡化開發人員工作的同時代表了有許多新的屬性和API需要開發人員學習，像web worker、web socket、web storage 等新特性，後台甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰 d)、效能：某些平台上的引擎問題導致HTML5效能低下。 e)、瀏覽器安全色性：最大缺點，IE9以下瀏覽器幾乎全軍覆沒。

1.6、HTML5效果展示

 HTML5對於之前版本來說，並非簡單的版本升級，而是一次全面的架構和效能的提升與最佳化；這表現在：文法更簡單、新增了大量的語義性標籤、強大的canvas元素代替flash、豐富的API介面使用極大方便了開發人員與瀏覽器的互動。其中，關鍵提升在於：基於HTML5強大的新增加架構，如手機端裝置與頁面進行互動，如重力感應、地理定位、離線操作等， 在主流移動端平台，可以很輕鬆地自訂效能強大的webapp，包括遊戲、動畫和企業級的應用開發。

CSS3繪製《辛普森一家》

HTML5開發的遊戲

1.7、HTML5學習與開發工具1.7.1、基礎要求

HTML+CSS+JavaScript與任何一種Web伺服器後台技術如（Java,dotNET,PHP)

1.7.2、開發工具

主流瀏覽器，如Chrome瀏覽器、Firefox瀏覽器、Safari瀏覽器、IE9+瀏覽器、IETester等

HTML5對開發工具並沒有限制，任意的文字編輯器都可以如：webstorm/notepad++ + zendcode /textMate + zendcode / sublime 2，Visual Studio2013+，Visual Studio Code，HBuilder等

如果習慣了eclipse的朋友可以使用HBuilder，eclipse實在不適合用於寫前端指令碼（4千萬美刀的東西...），

HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。它基於Eclipse，所以順其自然地相容了Eclipse的外掛程式。 快，是HBuilder的最大優勢，通過完整的文法提示和代碼IME、代碼塊等，大幅提升HTML、js、css的開發效率。官網：http://www.dcloud.io/

1.8、HTML5文法規則與文檔聲明1.8.1、文法規則

a)、標籤要小寫 屬性值不加" "或 ‘ ‘ b)、可以省略某些標籤 HTML body head tbody c)、可以省略某些結束標籤 tr td li  d)、單標籤不用加結束標籤 img input e)、廢除的標籤，看第二點 font center big

1.8.2、文檔聲明

<!DOCTYPE> 聲明必須位於 HTML5 文檔中的第一行，也就是位於 <HTML> 標籤之前。該標籤告知瀏覽器文檔所使用的 HTML 規範。 doctype 聲明不屬於 HTML 標籤，它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。 在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能瞭解預期的文件類型。 HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用。

1.8.2、文檔聲明二、廢棄的標籤

以下的 HTML 4.01 元素在HTML5中已經被刪除，雖然瀏覽器為了相容性考慮都還支援這些標籤，但建議使用新的替代標籤，矛盾的是老瀏覽器對新標籤的支援度又不夠，視項目的受眾對象而定了。

2.1、能用CSS代替的元素 

這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是為頁面展示用的，表現的內容應該由CSS完成。

2.2、frame架構

這些元素包含frameset、frame、noframes。HTML5中不支援frame架構，只支援iframe架構，或者用伺服器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

2.3、只有部分瀏覽器支援的元素

這些元素包含applet、bgsound、blink、marquee等標籤。

2.4、其他被廢除的元素

廢除rb

HTML5 學習筆記（一）——HTML5概要與新增標籤