BO4701

目錄.indd v

2015/2/5 下午 02:09:25

Blue Ocean BO4701

HTML5 完美風暴(第三版) ߡ૊ߧሬ㈀ӛᦹ‫ٴ‬ㅷ⠗ℶᲿ(CIP)⫏ᅆ HTML5ર⇾ㆺሀ / ‫آ‬㋧ᅿ̳. -- ɿᦹ.

-- ᅘռఱ : ☾ᙹᄽջ, 2015.02 ὃ 俬

␩檿㗔

䙣 堳 ạ 㤱⭶㕮

ȭㄇ ; ȭҝӠ ISBN 978-986-6432-26-2(౹⡶え҆ᷖᦸ)

两 ䷏ 弖

唈⛲⽓

1.HTML(ᄽ˴ᐻ⥆⦝⤵) 2.ℐㅪ⥑⤺ 3.Қ

岓Ợ䷏弖

㝾䑃䑮

᫤⫏⤻ℐ

⯨杉娔姯˙

ὀ㗢䥵

312.1695

䈯杉㦲ㇷ˙ ⽷ㅝ揿 ⇡ 䈯 俬

喴㵞㕮⋽Ṳ㥔傈Ụ㛰昷⅓⏟

✗ ✧

㖗⋾ⷩ㰟⑳⌧䦧㛾巖ᷧ㮜 噆

曢 婘

ₚ 䜆

104001791

ᦹᓝŘ2015౺2ሶɿᦹɺӽ

峣㛟⯯䷁˙ 弰 㲼⽲桎┶

㝾⻞晭 ⽲⸒

7HO

喴㵞㕮⋽Ṳ㥔傈Ụ㛰昷⅓⏟ 䈯㫱㈧㛰澽俢⍗⾬䩝 &RS\ULJKW E\ %OXH 2FHDQ (GXFDWLRQDO 6HUYLFH ,1& 㜓㛟勌㛰伡柨˚䠛㏴ㇽ壄姩挖媋媲⮫⛅㛛㏂

䇰㪲倚㖶

㛔㚠ℏ⭡㌰㪲⎰㱽㊩㚱侭㇨ἧ䓐炻朆䴻㛔㚠ἄ侭ㆾ啵㴟㔯⊾ḳ㤕偉ấ㚱旸℔⎠㬋⺷㌰㪲炻⎰㱽㊩㚱侭昌⁁ 䓐⬀㨼⍲冒埴ἧ䓐⢾炻℞Ṿᶨ↯㪲⇑⛯Ḱẍᾅ䔁ˤ

⓮㧁倚㖶

㛔㚠㇨㍸⍲ᷳ⓮㧁⍲䓊⑩⎵䧙⛯Ⱄ㕤℞⎰㱽姣Ⅎ℔⎠㇨㚱炻㛔㚠⺽䓐䲼Ⱄṳ䳡ᷳ䓐炻᷎䃉ảỽὝ㪲ᷳシˤ

㚱旸㑼ᾅ屔ả倚㖶

㛔㚠墥ἄ≃㯪䚉┬䚉伶炻ょᶵ㑼ᾅ㛔㚠⍲℞㇨旬⃱䡇䃉ảỽ䏽䕒炻Ṏᶵ㑼ᾅảỽṢㆾ╖ỵ⚈ἧ䓐 㛔㚠埵䓇ᷳ⇑䙲㎵⣙ˤ

目錄.indd vi

2015/2/5 下午 02:09:26

第三版 序 《HTML5 完美風暴》第一版於 2012 年五月推出以來，獲得了市場的正面 迴響與肯定，經過兩年多的時間，HTML5 終於在 2014 年十月完成標準制 定，而在這段期間，網路科技產業的面貌亦發生了翻天覆地的變化。 隨著規格底定，HTML5 從簡單的網頁定義標籤，擴展為跨裝置的通用技 術，同時適用於手機、筆記型電腦、電視等所有數位裝置，因為遵循共同 標準，網路應用發展不受特定廠商制肘，開發成本因此得以降到最低，觸 及使用者的最後一哩路，從特定廠商手裏完全釋放出來，進一步促使全球 攜手推動 HTML5 技術平台向前邁進。 網路科技經過幾個世代的發展終於成熟，瀏覽器的進化、行動科技的 崛起、雲端時代的來臨，HTML5 正在全球形成一場完美的科技風暴， 《HTML5 完美風暴》直擊 HTML5 技術核心，從 HTML 標籤的進化與擴 充、CSS3 的設計整合到各種 JavaScript API，全方位剖析這門新時代技術。 2015 年開春，我們完成了這本書的全新改版，希望協助即將進入、或是 已在 HTML5 技術領域努力的公司組織與技術人員，快速理解 HTML5 核 心，並將其運用在實際的開發工作上面。

呂高旭

目錄.indd vii

2015/2/5 下午 02:09:26

本書內容 《HTML5 完美風暴》的主要目標，是針對 W3C 公佈的 HTML5 規格進行 討論，透過 JavaScript 進行各種功能的實作示範說明，同時涵蓋 CSS3 最 新規格，要注意的是，除了純粹的 HTML 、CSS 與 JavaScript ，本書並未 涉及任何協力廠商開發的套件或是開源技術框架，例如 jQuery。 適合對象 本書僅針對 HTML5 進行討論，除了少數章節舖陳需要，並沒有特別針對 HTML 、CSS 與 JavaScript 入門設計的內容，適合具備相關基礎的技術人 員，基本的 CSS 與 JavaScript 程式撰寫能力是必要的。 瀏覽器 由於對 HTML5 各項規格的支援表現較為出色，書中的範例與技術討論以 Chrome 為預設瀏覽器，少數 Chrome 不支援的特定規格，則以其它瀏覽器 進行示範。 必須注意的是，各瀏覽器對 HTML5 規格的支援是一個持續變動的過程， 本書僅針對功能進行示範說明，不會在瀏覽器的功能支援上特別作說明， 若要瞭解瀏覽器對特定規格的最新支援狀況，可以至 Can I use（http:// caniuse.com/）網站進行查詢。 支援 本書後續服務，包含勘誤、擴充範例資源還有相關課程資訊，將持續公佈 於本公司網站，以下列舉相關網址與作者聯絡信箱。 ▪ 康廷數位：http://www.kangting.tw ▪ 作者信箱：sean@kangting.tw

目錄.indd viii

2015/2/5 下午 02:09:27

目錄簡表 第一篇 概觀

第四篇 API - 儲存

第一章 第一課

第十四章 離線瀏覽與快取

第二章 HTML5 殿堂初探

第十五章 Web 儲存

第三章 標籤元素改良與擴充

第十六章 檔案系統 第十七章 沙箱與檔案系統作業

第二篇 網頁介面設計

第十八章 Indexed Database

第四章 表單 第五章 事件處理與互動式網頁介面

第五篇 API - 通訊

第六章 結構元素與版面設計

第十九章 通訊作業

第七章 CSS3 樣式設計

第二十章 瀏覽器多執行緒

第八章 動態 CSS3

第二十一章 伺服器推播技術 第二十二章 WebSocket

第三篇 視覺影像資料處理

第二十三章 XMLHttpRequest

第九章 Canvas 與 2D 繪圖 第十章 Canvas 影像與動畫效果處理

附錄 A

第十一章 SVG 第十二章 Video 與 Audio 第十三章 地理資訊

目錄.indd ix

2015/2/5 下午 02:09:27

17.indd 43

2015/2/2 下午 01:59:12

1.1 進入 之前必須瞭解的事實 HTML5HTML5 完美風暴 PART 1

第一篇 概觀 HTML5 的範圍相當龐大，第一篇將利用三章的篇幅列舉並且說明必要的 概念，介紹 HTML5 導入的新特性，針對 W3C 界定的 HTML5 技術項目 與相關文件介紹，從簡短的發展歷史，到整個 HTML5 新增的內容，提供 快速導覽與範例實作說明，讀者將在這一篇初步探索 HTML5 的世界，瞭 解 HTML5 相較於 HTML4 的改良與本質。

第一章 第一課 第二章 HTML5 殿堂初探 第三章 標籤元素改良與擴充

HTML5 完美風暴 III

01.indd i

1-i

2015/1/30 上午 09:41:48

1

第一課

1.1

進入 HTML5 之前必須瞭 解的事實

1.7

HTML 元素 HTML 標簽屬於 HTML5 ，但 不是全部，JavaScript 才是主 角 CSS 負責 HTML5 應用程式的 展現，為獨立規格

無外掛 沒有疆界 動畫、遊戲之外，還有企業應 用 2014 年 改變並非一蹴可及

1.2

HTML5：一段簡短的歷史 1990 年 – HTML 初現 1999 年 – HTML 進 化 至 第 4 版，停止更新 2000 年 – XHTML 現身 2003 年 – HTML 5 曙光乍現 2007 年 – W3C 與 WHATWG 聯手催生 HTML5 2010 年 – HTML5 現況

1.3

HTML5 很好，但瀏覽器的 支援呢 ?

1.4

開始 HTML5 之前必須釐 清的事

HTML 、CSS 與 JavaScript

1.8

寫在下一課之前 SUMMARY

HTML5 技 術 以 及 HTML5 語 法，還有 XHTML HTML5 標準與技術文件 HTML4 與 HTML5 的差異

1-ii

01.indd ii

1.5

HTML5 －從這裡開始

1.6

HTML5 的內容

HTML5 完美風暴 III

2015/1/30 上午 09:43:02

1.1 進入 之前必須瞭解的事實 HTML5HTML5 完美風暴 PART 1

第一章 第一課

HTML5 完美風暴 III

01.indd iii

1-iii

2015/1/30 上午 09:43:03

1

第一課

正式討論 HTML5 的技術內容之前，本書第一章提供讀者 HTML5 的概念性內容。

1.1 進入 HTML5 之前必須瞭解的事實 智慧型手機的堀起，行動科技正風起雲湧，而這個世界不斷的朝向更移動更開放 的方向發展，沒有一個行動平台或是單一廠商的技術可以掌握絕對的優勢，跨平 台與開放特性成了未來發展最重要的關鍵，而 HTML5 正是唯一具相關特質且一 致獲得所有廠商支持的技術。

無外掛 僅管 Flash 依然在 PC 領域佔有絕對的優勢，但是不支援 Flash 的裝置與平台正 不斷的增加，包含未來的 Windows 8 Metro UI ，市場正在快速的離它遠去，以 HTML5 替代 Flash 發展的應用實作正舖天蓋地席捲網路，從 Amazon 的 Kindle 閱讀器，到微軟的行動版 Bing 瀏覽器，包含 Silverlight 與 Flash 等外掛技術，都 將因為 HTML5 與網頁無縫銜接的優勢而快速被取代。

沒有疆界 iPhone 引領的智慧型手機，已然成為全球科技業最火紅的產品，而其延伸出來的

軟體平台，甚至各種數位裝置，包含平板電腦以及數位電視，都將取代傳統 PC 深入人類的生活，如今一項網路服務，使用的技術能否順利滲透至各種裝置是首 要的考量，而唯有 HTML5 打造的服務，能夠突破限制，相容於所有的數位裝置， 僅管相較於原生程式，HTML5 的功能發展還有所不及，然而此一全球科技巨擘與 標準組織共同發展的標準正以驚人的速度發展，無論遊戲或是商業應用，相關的 實作正不斷的出現，以 HTML5 技術為基礎的網路服務時代已然正式來臨。 1-2

01.indd 2

HTML5 完美風暴 III

2015/1/30 上午 09:43:03

1.1 進入 HTML5 之前必須瞭解的事實

動畫、遊戲之外，還有企業應用 動畫與遊戲經常是開發人員初次接觸 HTML5 的第一印象，事實上除了 Flash 之類 的網路遊戲，HTML5 在企業市場的應用同樣具備無限的潛力，無論 Facebook 或是 Salesforce ，均全力擁抱 HTML5 可以作為借鏡，Windows 8 的 Metro UI 平台甚至直接

支援 HTML5/JavaScript ，等同於其唯一支援的原生技術 XAML/C# ，這些正在發生的 事實，宣告了熟悉 HTML5 將是任何開發人員未來生存必備的基本技能。

2014 年 2014 年 10 月 28 日 ，HTML5 發表正式規格。

改變並非一蹴可及 HTML5 不可能一夕之間就滲透整個網路世界，這個改變並不會一天就完成，但你

不能因此拒絕擁抱未來，尤其 Adobe 在 2011 年宣佈放棄了行動版 Flash 的開發之

HTML5 完美風暴 III

01.indd 3

1-3

2015/1/30 上午 09:43:03

1

第一課

後，網路世界加速向 HTML5 轉移，扮演網路發展關鍵角色的各種瀏覽器早已展開 HTML5 的支援競賽，而這更進一步催化 HTML5 開發環境的成熟，改變不會在一

夕之間，但卻無時無刻在進行，無論規格制訂的進程如何，我們正見證歷史的全 新起點。

1.2 HTML5：一段簡短的歷史 這一個小節我們將簡要描述 HTML5 發展的歷史，這有助於讀者對於 HTML5 的認識。

1990 年－ HTML 初現 英國人 Tim Berners-Lee 於 1990 年定義了最原始的 HTML ，而 IETF 透過簡化的 SGML（標準通用標示語言）語法，進一步實作出 HTML ，交由全球資訊網協會

（W3C）維護，並成為國際標準。

1999 年－ HTML 進化至第 4 版，停止更新 一開始 HTML 的語法相當鬆散，後來陸續經過幾次重要的改版而漸趨嚴格，不過 瀏覽器因為考慮向後相容的問題，還是持續支援不符標準的語法，HTML 一直到 1999 年 12 月發展到 4.01 版，因為 W3C 著手發展 XHTML ，因此再也沒有更進一 步的改版，而 HTML 4.01 也就一直沿用至今，成為建構網頁所使用的主要 HTML 版本。

2000 年－ XHTML 現身 HTML 因為被廣泛使用，先天架構以及語法的問題基於相容性的考量，一直無法透

過版本的演進而獲得改善，這促使 W3C 決定根據嚴格的 XML 語法，發展不相容舊 版 HTML 的全新版本，並打算以此取代 HTML ，終於在 2000 年 1 月發表的這一套 HTML 版本，稱之為 XHTML ，版本號 1.0 ，這兩套標準各自獨立，同時並存於網路

平台至今。

2003 年－ HTML5 曙光乍現 2003 年一個名為 XForms 的新技術被提出，它著眼於 Web 表單介面的革新，沉寂 多年的 HTML 革新議題也在此時被喚起，因此 W3C 置換 HTML 改推 XHTML 的計 畫開始遭到質疑，由於 HTML 被廣泛接受，針對 HTML 4 就地升級的主張因此被 提出，而這個主張的提案被送到 W3C 即被否決，不久 Apple 、Mozilla 與 Opera 聯

1-4

01.indd 4

HTML5 完美風暴 III

2015/1/30 上午 09:43:04

1.2 HTML5 ：一段簡短的歷史

合組成了 WHATWG 持續推展 HTML 升級的工作，HTML5 草案於 2004 年正式由 WHATWG 提出。

2007 年－ W3C 與 WHATWG 聯手催生 HTML5 W3C 不同意 WHATWG 的作法最主要的原因，是如此一來將違背其推廣 XHTML 成

為取代 HTML 的目標，一直到 2006 年，XHTML 的推展不如預期順利，直接升級 HTML 的需求遠超過以 XHTML 取代 HTML ，W3C 終於改變之前的態度，表明將

參與 HTML5 規格的製訂工作，2007 年正式成立工作小組與 WHATWG 合作發展 HTML5，而 WHATWG 亦將 HTML5 版權公開授予 W3C ，由其接下 HTML5 的發展

重任。 HTML5 最早是由 WHATWG 於 2004 年製訂的 Web 應用程式規格發展而來，一開

始的名稱是 Web Applications 1.0 ，早期僅是單純的將 XForms 的功能導入原來的 HTML 表單規格之中，避免這些功能因為 XFomrs 的發展導致與目前的 HTML 無法

相容。

2010 年－ HTML5 儘管 HTML5 的發展因為 W3C 的支持逐漸邁向坦途，然而這個新世代的 HTML 版 本一直到 2010 年 4 月，因為賈伯斯發表對 Flash 與 HTML5 看法（Thoughts on Flash）的演講，並排除了 iPhone 等行動裝置對 Flash 的支援，HTML5 至此才正式

廣為世人所注意，並為 HTML5 時代的來臨正式拉開了序幕。 TIPS Thoughts on Flash 原文網址： http://www.apple.com/hotnews/thoughts-on-flash/ Thoughts on Flash 中文翻譯網址： http://www.techbang.com.tw/posts/2405-steve-jobs-thoughts-on-flash-full-translation

現況 W3C 將規格制定流程大致分成四個階段，列舉如下：

1. Working Draft (WD) 2. Candidate Recommendation (CR) 3. Proposed Recommendation (PR) 4. W3C Recommendation (REC) HTML5 完美風暴 III

01.indd 5

1-5

2015/1/30 上午 09:43:04

1

第一課

第一項是草案階段，在這個階段的規格還未底定，針對各界對規格制定提出的意 見進行審查，而最終審查將決定草案進入建議階段的正式規格。 接下來的三項屬於建議階段，這個階段主要在於發展根據規格的實作，第一個 CR 階段接受實作之後的意見回饋，然後逐步完成各建議階段，最後公佈正式建議規 格，完成整個規格的制定工作。 HTML5 於 2011 年 5 月下旬，開始正式進入 W3C 的最終審查草案階段，核心規格

則於 2012 年 12 月 17 日 正式進入 CR 階段，表示此版本功能已經底定，根據規 格的實作與實作之後的回應修正亦正式展開。 2014 年 10 月 28 日 這一天，HTML5 核心規格終於釋出了 Recommendation 正式 版本，無論如何，近幾年因為行動裝置的崛起以及雲端技術的推波助瀾，相較於 Windows 稱霸的 PC 時代，相容多平台的單一實作技術需求大量出現，原來進度緩

慢的 HTML5 規格制定與相關實作，也得到快速的推展，到目前為止，各大瀏覽器 對於 HTML5 規格支援均已完成相當的實作，本書討論的內容，幾乎都能在各主流 瀏覽器完整無誤的執行。

1.3 HTML5 很好，但瀏覽器的支援呢 ?

HTML5 開創了全新的網路應用發展，但現實是現階段網路充斥大量不支援 HTML5

規格的瀏覽器（特別是主要瀏覽器 IE） ，當然，這些情形在未來會逐漸被解決，但 至少在目前，當你考慮開始導入 HTML5 之前，面對這些狀況必須有因應的對策， 讓你的網頁在舊版瀏覽器能正常的呈現，因此編寫以 HTML5 為基礎的網頁，必須 注意相容性檢查。 繼續往下討論之前，先介紹一個專門偵測各種版本瀏覽器對 HTML5 支援程度的網 站「THE HTML5 TEST」 ，以下是網址： http://html5test.com/

當你進入這個網站，它會針對你目前所使用的瀏覽器進行評分，檢視其中的各項 指數，你可以從中瞭解各種瀏覽器對 HTML5 的支援程度。以下為筆者於 Windows 7 透過 Chrome 與 Firefox 瀏覽器檢視此網頁的結果畫面，將其往下拉可看到各種 HTML5 技術規格的支援程度。

1-6

01.indd 6

HTML5 完美風暴 III

2015/1/30 上午 09:43:05

1.4 開始 HTML5 之前必須釐清的事

基本上你可以在實作的網頁，針對不支援 HTML5 新規格的瀏覽器進行相容性的調 整，視你的網站所要提供的服務而定。 TIPS 瀏覽器相容性是個不小的議題，網路上已經有針對 HTML5 相容性需求而發展的套件，甚至針對不同的裝置 均有對應的函式庫可以使用，不過礙於篇幅本書僅專注在 HTML5 技術的功能討論，只有在特定的標籤或是 API 解說時觸及相關的設定示範。

1.4 開始 HTML5 之前必須釐清的事 HTML5 技術以及 HTML5 語法，還有 XHTML 前述討論 HTML5 時曾經提及 XHTML ，原來是 W3C 發展用以取代 HTML 的標準， 儘管後來 W3C 接手 HTML5 標準的制訂工作，XHTML 還是持續的被發展，不過這 兩者的名詞與其意涵經常容易令人混淆。W3C 的 HTML5 規格文件上很明白的定 義了 HTML5 與 XHTML 的關係，這段說明連結網址如下： http://www.w3.org/TR/html5/introduction.html#html-vs-xhtml

HTML5 完美風暴 III

01.indd 7

1-7

2015/1/30 上午 09:43:05

1

第一課

HTML5 技術並不等同於 HTML5 語法，本書所談的是 HTML5 技術，當然，涵蓋了

運用 HTML5 的 HTML5 語法。 HTML5 技術本身定義了一組抽象語言，用以描述新 一代 Web 文件與應用程式，而這一組抽象語言同時支援與操作介面互動所需 API 的調用能力。 通常我們談到的 HTML5 與 XHTML ，是可以運用上述抽象語言的兩種具體語法， 當一份文件透過 HTML MIME 格式（例如 text/html ）傳送，是使用 HTML 語法， HTML5 則是其最新的版本，如果是 XML MIME 格式（例如 application/xhtml+xml） ，

則表示其使用 XHTML 語法。

一個開發設計人員，必須透過 HTML5 語法（或是 XHTML ）運用 HTML5 技術，並 且透過各種 API 的調用，與經由 DOM 定義的文件或是應用程式介面進行溝通，而 DOM 本身在 HTML5 技術規格裡面則進一步升級為 DOM5 HTML 。 HTML5 與 XHTML 兩種語法是完全獨立的，甚至不相容。某些語法，例如 HTML 無

法表示命名空間，而 XHTML 無法使用 noscript 的功能等等，本書所專注的將是透 過 HTML5 語法來使用 HTML5 技術，不會觸及任何與 XHTML 相關的議題。

HTML5 標準與技術文件 HTML5 因為多平台行動裝置的崛起，Flash 、Silverlight 等 Web 技術的跨平台障礙，

成為發展 Web 應用開發人員關注的重點技術，另外一方面，它的業界標準地位 亦令其快速成為所有競爭廠商力拱的明星技術，這也導致了 HTML5 技術的邊界 快速模糊，事實上，某些被稱為 HTML5 的技術，並非明確的被定義為 HTML5 規格的一部分，只是這些技術被 W3C 納入廣泛的 HTML5 標準同步發展，例如 XMLHttpRequest Level 2、整合地理資訊功能的 Geolocation API 等等 。

在討論 HTML5 的 Web 應用程式開發時，無可避免的將帶出這些主題，無論如 何，對於開發人員來說，是不是 HTML5 不是重點，關鍵在於如何能夠適切的整合 1-8

01.indd 8

HTML5 完美風暴 III

2015/1/30 上午 09:43:06

1.4 開始 HTML5 之前必須釐清的事

這些技術，應用在真正的開發與設計實作上，而且 HTML 與相關的 API 還在不斷 的發展當中，未來 HTML 技術會更進一步擴展至各種應用領域，而不同的瀏覽器 對特定技術規格的支援程度也需要開發人員持續進一步去瞭解。 HTML5 到底包含哪些內容，從功能面的邏輯上很難去作真正的釐清，不過我們可

以透過 W3C 公佈的文件為依據作討論。理論上 HTML5 有一定的範圍，確實被定 義屬於 HTML5 規格的核心內容，都在以下這份 W3C 的規格書中： http://www.w3.org/TR/html5

讀者可以連結至此網頁，快速瀏覽其中的內容，將畫面往下拉，讀者會看到 HTML5 技術內容大綱。

HTML5 完美風暴 III

01.indd 9

1-9

2015/1/30 上午 09:43:06

1

第一課

而除了這份文件列舉的主要 HTML5 技術規格，還有一系列獨立文件的相關技術， 本書都將一併作討論，附錄 A 進一步列舉相關技術的文件連結，有興趣的讀者可 以嘗試開啟特定連結進行閱讀。

HTML4 與 HTML5 的差異 HTML5 並非全新的技術，它來自於 HTML4 的改良，並且相容於舊版的 HTML ，不

過這個新的版本是相當大的革新，而其中的改變，我們可以從 HTML5 differences from HTML4 這份技術文件看到新的完整內容規格，以下為連結網址： http://www.w3.org/TR/html5-diff/

其中比較重要的內容，後續的章節將逐一作討論。

1.5 HTML5 － 從這裡開始 開始 HTML5 很簡單，打開文字編輯器，建立一個文字檔，敲下這一行程式碼： <!DOCTYPE html>

完成之後存檔，你就建立一個 HTML5 網頁了，此行程式碼宣告這是一個 HTML5 網 頁。 使用最簡單的文字編輯器－例如記事本，即可編輯 HTML5，不過目前包含了 Visual Studio 、NetBeans 等最新版的開發工具，均支援了 HTML5 的語法編輯功能。

1.6 HTML5 的內容 HTML5 規格所涵蓋的範圍相當廣泛，除了基礎的 HTML 標籤、CSS 樣式設定以及 JavaScript 程式語法之外，還有大量的 API 。

無論讀者學習 HTML5 的目的、想要達到的目標為何，你必須瞭解的是，HTML5 技術是 W3C 制訂開放式 Web 平台標準最重要的基石，而為了掌握這門技術，根 據 W3C 的建議，你必須認識並且進一步瞭解的內容被明確的歸納為八項，W3C 同時針對這八項技術設計了對應的 logo ，下頁列舉說明。

1-10 HTML5 完美風暴 III

01.indd 10

2015/1/30 上午 09:43:06

1.6 HTML5 的內容

1. HTML5 語意標籤（SEMANTICS） 全 新 的 語 意 標 籤（ 涵 蓋 RDFa 、microdata 與 microformats 技 術） ，提供機器可理解的資訊，方便機器辨識資料內容，開發 人員據以建立以資料導向為中心，更容易使用的網頁服務。 2. 離線與儲存（OFFLINE & STORAGE） 支援應用程式快取（App Cache） 、區域儲存（Local Storage） 、 區域資料庫（IndexDB） ，以及檔案系統 API ，由於這些機制在 客戶端的電腦上執行並儲存資料，使用者因此可以在離線的狀 態下使用應用程式，同時有更好的效能。 3. 裝置存取（DEVICE ACCESS） 自動偵測使用者裝置設備的應用服務開發，包含提供地理定 位資訊支援的 Geolocation API ，麥克風以及攝影裝置的存取 等等，提供使用者豐富的裝置設備感知使用體驗。 4. 連結性（CONNECTIVITY） 透過 WebSocket 與伺服器推播技術（Server-Sent Events） ，支援 客戶端與伺服器端的即時資料傳輸，開發人員得以據此建立更 即時、更快速，具高質量溝通品質的遊戲以及通訊軟體服務。 5. 多媒體（MULTIMEDIA） 直接內建支援 audio 與 video 標籤，不需第三方外掛程式即可 建立支援影音視訊檔案播放的網路服務應用程式。 6. 3D 圖形與特效（3D, GRAPHICS & EFFECTS） 包含各種 3D 以及 2D 圖形描繪與視覺效果實作技術，包含 SVG 、Canvas 、WebGL 、以及 CSS3 的 3D 功能，支援這些功

能的瀏覽器能夠不透過其它外掛輔助直接在網頁以原生方式呈 現各種驚人的視覺效果。

HTML5 完美風暴 III

01.indd 11

1-11

2015/1/30 上午 09:43:07

1

第一課

7. 效能與整合性（PERFORMANCE & INTEGRATION） 提升網頁動態內容的呈現效能，縮短甚至避免內容呈現過程的 等待狀態，包含透過 Web Workers 支援網頁多工執行特性，以 及經由改良的 XMLHttpRequest 2 提升使用者客戶端與伺服器端 往返間的良好操作體驗。 8. CSS3 從標籤的語意結構當中抽離出呈現的功能，避免破壞網頁結 構並且進一步提升內容的呈現效能，另外一方面，各大主流 的瀏覽器亦支援了 Web 開放字型格式（Web Open Font Format WOFF） ，提供更彈性的排版需求支援，同時進一步優化網頁的字型呈現。

TIPS 這列舉的八項特性，是目前 HTML5 技術標準裡面，比較有具體成果且規格也比較穩定的部分，至於瀏覽 器的支援則不一。另外一方面，本書亦無法收錄所有的內容，特別是有關視覺效果的部分，包含 SVG 與 WebGL 等等。

1.7 HTML 、CSS 與 JavaScript 對於開發人員來說，運用 HTML5 實際會接觸的具體內容，主要有 HTML 標籤元 素、CSS 以及 JavaScript ，來看看它們之間的關係。

HTML 元素 HTML5 支援功能強大的新標籤，例如配置以下的 video 標籤，設定 src 屬性為指定

的教學影片檔案 ebook.mp4： <video src="ebook.mp4" controls="controls" />

接下來開啟瀏覽器，會得到下頁的輸出結果：

1-12 HTML5 完美風暴 III

01.indd 12

2015/1/30 上午 09:43:07

1.7 HTML、CSS 與 JavaScript

你還可以藉由 canvas 元素的支援，於網頁上描繪圖形，甚至進行圖片的編輯。而 除了新元素，舊的 HTML 元素依然存在，不需要為了學習新東西而拋棄舊事物， 過去的投資一樣可以適用，更進一步的，你可以利用新特性將原來的網頁作進一 步的改良，例如 input 元素，過去只能配置簡單的文字方塊，現在你可以更進一步 的選擇各種 type 的輸入控制項，以支援數字、日期或是顏色等特定格式的輸入， 甚至提供資料驗證的支援。

HTML 標籤屬於 HTML5，但不是全部，JavaScript 才是主角 HTML5 是 HTML 的最新版本，結合 JavaScript DOM API 驅動標籤元素，將原來以

文件呈現為目的的 HTML ，提升為 Web 應用程式開發平台。除此之外，HTML5 導 入的新元素不是只有標籤這麼簡單，還有針對這些元素公開的 DOM API ，以支援 JavaScript 的程式化控制。 JavaScript 也不是單純的控制 DOM 元素而已，HTML5 導入龐大完整的應用程 API ，透過 JavaScript 調用這些 API 建構應用程式，才是開發人員面對 HTML5 最需

關注的地方。

CSS 負責 HTML5 應用程式的展現，為獨立規格 相較早期版本，HTML5 以 HTML 元素定義介面內容與組成架構，透過 CSS 呈現， 兩者的關係如下頁：

HTML5 完美風暴 III 1-13

01.indd 13

2015/1/30 上午 09:43:08

1

第一課

CSS 的規格是獨立的，HTML5 將舊版 HTML 中與視覺化呈現有關的屬性與元素移

除，完全交由 CSS 進行控制，而 HTML 元素則完全聚焦於內容的定義，包含內容 的架構與輸出。 CSS 定義 HTML 內容於瀏覽器所呈現的外觀，最新的 CSS3 版本支援大量的新功

能，搭配 HTML5 可輕易的創造出驚人的網頁視覺效果，由於 HTML5 全數移除了 HTML 標籤原有關於視覺樣式的屬性，因此我們必須完全仰賴 CSS 進行網頁外觀

的設計。

1.8 寫在下一課之前 第二章開始，我們將從 HTML5 最基礎的語法宣告與標籤定義開始討論，而後續的 課程中，則是進一步探討其它的相關細節，包含新的 HTML5 規格標籤、CSS3 運 用等等，最後便是特定的主題，例如繪圖與動畫處理、通訊、資料儲存等應用程 式開發議題，下頁圖分類列舉相關的課程議題。

1-14 HTML5 完美風暴

01.indd 14

2015/1/30 上午 09:43:08

SUMMARY

本書分成五個篇章，涵蓋上述圖示的列舉條目，讀者將在完成本書的研讀之後， 瞭解這些相關的議題，並且具備相關技術的能力，除此之外，讀者可以將此視為 HTML5 技術的學習地圖，對於入門 HTML5 的技術人員而言，相關部分的技術內

容至少都必須涉獵且略知一二，在需要用到時，才能快速建立必要的技能，進一 步運用在開發實作上面。

SUMMARY 第一章針對 HTML5 的概念進行了簡要的說明，下一章將從 HTML5 的第一行宣告 開始逐步討論各種 HTML5 的技術細節。

HTML5 完美風暴

01.indd 15

1-15

2015/1/30 上午 09:43:09