|
|
|---|
|
壹、報導前言： HTML 在 1993 年成為國際標準後，就由 W3C (註解)協會制定，目的是用來統一所有網頁格式標準，俾利大家共同遵循。 歷經多次升級改版，直到 HTML 4.01 版後，因為無法滿足當前多媒體時代需求，一直處於不廢止但亦不開發的過度時期。 在此期間全部藉由 CSS 及 JavaScript 組成的動態 XHTML，取代靜態的 HTML 標籤功能，因此造成瀏覽器的世界一團亂。 為了讓 HTML 語法更容易開發各種應用程式，W3C 協會早於 2004 年就開始制定新的網頁格式標準，也就是全新 HTML 5。 HTML 5 早已於 2008 年就釋出草案，並於 2010 年完成功能制定，如果沒有重大問題，應該會在 2012 年左右正式發布。 值得注意的是，這次 HTML 5 大幅增加多項網頁元素和控制器，強化對網頁應用上的支援，將會是以後最新網頁格式標準。 不管未來如何發展，原有的超文字標記語言 HTML (HyperText Markup Language)，仍然是今後所有網頁的共同格式基礎。 而新的 HTML 5 超文字標記語言，將會由簡易的靜態 HTML 語法轉變為程式化的動態 HTML 語言，預料不再這麼陽春容易。 網頁研習室為因應網際網路時代快速變遷，特別為大家搜錄眾多資料，並做有系統深入探討，讓你也能及早分享這份喜悅。 聲明：本報導部份文章或技術資料，均取自網路分享資源，其版權與著作權為當事者所有，特此感謝與聲明。 註解：W3C (World Wide Web Consortium) 全球資訊網協會 Go 。 |
|
貳、認識 HTML 5： 嚴格訂義新的 HTML 5，實際指的是 HTML、CSS3 和 JavaScript APIs 三大元素所組合的一套網頁技術。 制定的主要目的希望能夠減少瀏覽器對於外掛程式的依賴，及滿足多樣化網路應用服務需要與共同標準。 HTML 5 的討論開始於 2003 年，當時 W3C 對於 WHATWG (註解)所開發的 HTML 5 草案表示濃厚興趣。 而 WHATWG 創始於 2004 年，是由蘋果 Mozilla 基金會以及 Opera 公司的代表共同組成。 此後 W3C HTML Working Group 於 2007 年為此成立，並著手研究開發新的 HTML 5 超文字標記語言迄今。 在已發表的 2008 年草案中，新增了 Section、Video、Progress、Meter、Time、Canvas 等多項元素。 此外，表單中常用的 Input 輸入元素也增添了日期、時間、電子郵件和網址等四種常用資料形式作為新的屬性。 新的 HTML 5 標準制定了更多語意標籤，提供了不同網頁結構的區塊標籤。 像是瀏覽區塊標籤、標頭標籤、文章標籤、小節標籤、註腳標籤等，取代原本透過 id 屬性來設計網頁結構的作法。 HTML 5 也提供了不少新的 API (註解)，例如用來執行影音標籤的播放 API、離線存取 API及 Drag & Drop 拖曳等功能。 在 HTML 5 中也移除了原本在 HTML 4 中的語法，例如 <Font>、<Center>，及表達性的屬性如 Align、Size、Width 等。 W3C 建議開發者，改用 CSS 來控制這些網頁內容(字體或排版功能)的呈現方式。 不過所有 HTML 5 的功能，要各家瀏覽器全面支援還需一段時間，HTML 5 的影響力恐怕要等到 2012 年後才會逐漸實現。 註解：WHATWG (Web Hypertext Application Technology Working Group) Web 超文本應用技術工作組 Go 。 註解：API (Application Programming Interface) API 應用程式介面 Go 。 進一步瞭解 HTML 演進 Go 。 |
|
參、HTML 5 特色： 簡化複雜的標籤：包括檔頭 <!DOCTYPE html>、CSS 及 JavaScript 的簡化引用：如 <script src="path/script.js"></script>。 新增元素(語意標籤)：包括 <section>、<article>、<header> 和 <nav>等 28 個新語意元素，取代原本透過 id 屬性來設計網頁結構作法。 新增影音播放標籤：如 <video> 和 <audio>，可以取代 Flash 撥放器技術功能，就像 IMG 標籤一樣方便。 新增繪圖程式：如 <canvas> 標籤可讓開發者用 JavaScript 指令就能繪製 2D 繪圖，同時整合了 SVG 內容，做出各種動畫效果。 新增表單輸入標籤 input 資料形式：將日期、時間、電子郵件和網址等四種常用資料形式，作為新的屬性。 擴充 DOM 功能：用來執行影音標籤的播放 API、離線存取 API、Drag & Drop 拖曳功能、文件編輯、跨文件傳遞訊息等。 移除不實用標籤：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u 等。 離線狀態使用網頁應用程式 (Application cache)。 跨網域通信 (Cross-Document Message，XMLHttpRequest Cache Level2)。 用戶端資料儲存 (Web Storage、Web SQL Database…等)。 背景執行運算 (Web Workers)。 執行伺服器來的資料堆播 (Data Push)。 與伺服器間的雙向通訊 (Server-Sent Events，Web Sockets)。 讀取本機檔案 (File API)。 上述的技術功能均不是目前 HTML + Javascript 所能實現，新導入標記使得網頁語言的撰寫更加人性化。 更多 HTML 5 相關特色 Go 。 |
|
肆、HTML5 Logo： HTML 5 尚未正式公布，但 W3C 已為 HTLM 5 推出專用識別標章 (Logo)，由此可證明這次改革的決心與重要性。 HTML 5 圖示由 Ocupop 公司 Michael Nieling 設計，希望藉此讓大家有共通的方式來溝通 HTML 5 的技術與功能。 從該圖樣直覺上讓人會聯想到，HTML 5 Logo 有點類似 UPS 優比速國際股份有限公司的神盾徽章。 W3C 正式公布 HTML 5 識別標章，除了可以讓網站標示網頁是使用 HTML 5 之外，還強調使用 HTML 5 中哪幾項技術。 W3C HTML 5 Logo 在其網站提供了不同技術品項的視覺識別圖示，並且提供使用者自選式生成的語法碼。 根據 W3C 的說明，該標章讓業界可以統一標示網頁使用的 HTML 5 技術，涵蓋 HTML、CSS、SVG (註解)、WOFF (註解)等技術。 註解：SVG (Scalable Vector Graphics) 可縮放向量圖形 Go 。 註解：WOFF (Web Open Font Format) 網頁開放字型 Go 。 造訪 W3C HTML5 識別標章網站 GO 。 |
|
伍、各瀏覽器支援程度： 據瞭解現在已經有不少瀏覽器，部分支持 HTML 5，其中以蘋果電腦 (Apple) 使用的 Safari 瀏覽器，最早開始支援的。 隨著瀏覽器執行環境、開發工具和功能標準提升，預判未來瀏覽器將全面支援 CSS3 和 HTML 5 標籤，逐步成為主流技術。 五大瀏覽器 Internet Explorer、Mozilla Firefox、Google Chrome、Apply Safari、Opera 現已積極投入開發中，簡單介紹如下： 龍頭的微軟公司已對外宣佈表示，下一版本的 IE 9.0 版中將支援 HTML 5 的部分語法，例如：影音標籤等。 Mozilla Firefox 3.5 支援 HTML 5 的 audio 及 video 元素，目前只支援 Ogg 及 WAV 兩種格式的影音檔，未來可能支援其他的格式。 Google 的 Chrome 瀏覽器，標榜對 HTML 5 的高支援性，甚至放棄自身的 Google Gears 離線技術，改用 HTML 5 的離線機制。 Apple 推出的 Safari 瀏覽器 4.0 版，是第一個開始支援 HTML 5 部分語法的瀏覽器，值得推薦。 到目前為止，只有號稱是目前地球上最快的瀏覽器 Opera，對 HTML5 有比較好的支持。 對 CSS3 和 HTML5 支援最好的是 Chrome，Safari 次之，Firefox 和 Opera 旗鼓相當，IE 9 才開始擁抱這個標準。 YouTube 影音網站最近也開始支援 HTML 5 的影音標籤，使用者只要使用支援 HTML 5 影音標籤的瀏覽器就能播放影片。 YouTube 官網表示，採用 HTML 5 影音標籤來播放影片，可以減少處理器的負載，讓低階電腦能順暢播放影片。 HTML 5 統一了 video 語法，但把影音播放部份交給各大瀏覽器競爭，這種高度編碼技術與利益關係，恐怕無法統一。 瀏覽器巡禮 - 認識您的瀏覽器 GO 。 |
|
陸、測試 HTML 5： 你可以使用以上五大瀏覽器，分別測試各個瀏覽器對於 HTML 5 的支援程度。 只要連上這個網址 HTML5 TEST ，便能立即測試此瀏覽器支援 HTML 5 程度。 到目前為止根據 W3C 測試報告，IE 9 可能是最符合 HTML5 標準。 這些測試數據僅供參考，並不是說分數高的就是好的瀏覽器，而分數低的就是不好的瀏覽器。 畢竟 HTML5 還沒正式發布，有些瀏覽器沒有支援到也是正常的。 如果想要測試具有 HTML5 技術的網站，建議使用最新的 Google Chromium (不是 Google Chrome)或是蘋果的 Safari 瀏覽器。 更多測試 HTML 5 相關網址 Go 。 |
|
柒、展示 HTML5： 本報導特別為你搜集一些不錯的 HTML5 特效網站，讓你也能體會一下 HTML 5 威力。 詳細 HTML5 功能網站展示 GO 。 |
|
捌、HTML 5 國內參考資料： 網路上此類報導資料已有很多，本報報導為你細心搜集並做國內適當分類整理，讓你不用再忙碌於到處搜索尋找。 國內參考資料 - 網站介紹 GO 。 |
|
玖、HTML 5 國外參考資料： 網路上此類報導資料已有很多，本報報導為你細心搜集並做國外適當分類整理，讓你不用再忙碌於到處搜索尋找。 國外參考資料 - 網站介紹 GO 。 |
|
拾、結論與建議： |