# 第 1 章 HTML5 概述 **學習要點：** 1.HTML5 的歷史 2.HTML5 的功能 3.HTML5 的特點 4.課程學習問題 主講教師：李炎恢 HTML5 是繼 HTML4.01 和 XHTML1.0 之后的超文本標記語言的最新版本。 它是由一群自由思想者組成的團隊設計出來，并最終實現多媒體支持、交互性、更加智能的表單，以及更好的語義化標記。 HTML5 并不僅僅是 HTML 規范的最新版本，而是一系列用來制作現代富 Web 內容的相關技術的總稱，其中最重要的三項技術分別為：HTML5 核心規范（標簽元素）、CSS（層疊樣式表第三代）、和 JavaScript。 **一．HTML5 的歷史** 1993 年 HTML 首次以因特網草案的形式發布， 然后經歷了 2.0、 3.2 和 4.0， 直到 1999年的 HTML4.01 版本穩定下來。由于發展緩慢，逐漸的被更加嚴格的 XHTML 取代。 **XHTML 的興衰史** 自從 HTML4.01 版本之后，掌握著 HTML 規范的萬維網聯盟（W3C）組織沒有再發布新的標準，而是圍繞著 XHTML1.0 以及之后的 XHTML2.0 展開工作。XHTML 是基于 XML、致力于實現更加嚴格并且統一的編碼規范的 HTML 版本，解決之前 HTML4.01 版本時，由于編碼不規范導致瀏覽器的各種古怪行為。所以，Web 開發者對 XHTML 非常的擁護。XHTML 極大的好處，就是強迫開發者養成良好的編碼習慣，放棄 HTML 的凌亂寫法，最終降低了瀏覽器解析頁面的難度，方便移植到更多平臺。 可是，越是想往好的方面發展，往往可能是帶來的卻是毀滅性的災難，世間萬物就是如此。XHTML2.0 規范了更嚴格的錯誤處理規則，強制要求瀏覽器拒絕無效的 XHTML2 頁面，強制 Web 開發者寫出絕對正確規范的代碼，同時不得向下兼容，摒棄 HTML 遺留的怪異行為和編碼習慣。按理說，取其精華、舍其糟粕應該是好事。但是，這樣的話，數億的頁面將無法兼容，Web 開發者的難度又被加大，并且制定這個標準又太過久遠，最終被拋棄。 **HTML5 的回歸** 2008 年 W3C 發布了 HTML5 的工作草案，2009 年停止了 XHTML2 計劃。又過去大概一年， HTML5 規范進一步解決了諸多非常實際的問題， 各大瀏覽器廠商開始對旗下的產品進行升級，以便支持 HTML5。這樣，得益于瀏覽器的實驗反饋，HTML5 規范得到了持續的進步和完善，從而迅速融入到 Web 平臺的實質性改進中。 和 XHTML2.0 不同， 制定 HTML5 規范的一群人并不想挑出以往 HTML 的各種毛病為其改正，而是盡可能的補全 Web 開發者急需的各種功能。這些功能包括更強大的 CSS3、表單驗證、音頻視頻、本地存儲、地理定位、繪畫（Canvas）、Web 通信等等。 **二．HTML5 的功能** HTML5 到底涵蓋了哪些功能？這些功能到底在主流的瀏覽器支持情況如何？ **1.HTML5 核心**：這部分主要由 W3C 官方的規范組成，涉及新的語義元素、新的增強的Web 表單、音頻和視頻、以及通過 JavaScript 繪圖的 Canvas。這部分大多數主流瀏覽器均得到很好的支持； **2.曾經的 HTML5 標準**：這部分主要來自于最初制定的 HTML5 規范，其中大多數功能需要 JavaScript 且支持富 Web 應用開發。比如：本地數據存儲、離線應用和消息傳遞；3.非 HTML5 標準：這部分通常指下一代功能，雖然從未進入 HTML5 標準，但人們還是會把它認做 HTML5 的一部分。這些包括最為常見的 CSS3，以及很熱門的地理定位。 對于最為常用且實用的部分， 基本上主流的瀏覽器都支持的比較好。 而那些特殊需求的部分，則需要根據不同的瀏覽器檢測才能知道是否支持自己想要的功能。 **三．HTML5 的特點** 在 HTML5 發展的同時，XHTML2.0 也在不斷發展，那么到底是哪些特點導致 HTML5 取得最終的勝利呢？ **1.向下兼容** 對于 XHTML2.0 要求遵循規則，否則不予顯示的方式，HTML5 卻實行“不破壞 Web” 的原則。也就是說，以往已存在的 Web 頁面，還可以保持正確的顯示。 當然，面對開發者，HTML5 規范要求摒棄過去那些編碼壞習慣和廢棄的標簽元素；而面對瀏覽器廠商，要求它們兼容 HTML 遺留的一切，以做到向下兼容。 **2.用戶至上** HTML5 遵循“用戶至上”的原則，在出現具體問題時，會把用戶放在第一位，其次是開發者，然后是瀏覽器廠商，最后才是規范制定者。比如，開發者在編碼時不嚴謹導致本該出現警告或錯誤時，卻正常顯示了頁面。 **3.化繁為簡** HTML5 對比之前的 XHTML，做了大量的簡化工作。具體如下： (1).以瀏覽器的原生能力代替復雜的 JavaScript； (2).DOCTYPE 被簡化到極致； (3).字符集聲明被簡化； (4).簡單強大的 API。 **4.無插件范式** 在 HTML5 出現之前，很多功能只能通過插件或 hack（如繪圖 API）來實現，但 HTML5原生提供了這些支持。使用插件有很多問題，具體如下： (1).插件安裝容易失敗； (2).插件被瀏覽器或軟件禁用屏蔽（如 Flash 插件）； (3).插件經常會被爆出漏洞被利用攻擊； (4).插件不容易與 HTML 文檔其他部分集成（比如整體透明化等）。? **5.訪問通用性** 這個原則分為三個概念： (1).可訪問性：比如更加利于殘障人士的閱讀方案； (2).媒體中立：比如 HTML5 的媒體播放在不同設備或平臺均能正常運行； (3).支持所有語種：比如新元素<ruby>。 **6.引入語義** HTML5 引入了一些用來區分不同含義和內容的標記元素。 這種方式極大的提供的編碼人員的可讀性和代碼區域查詢的便利性。 **7.引入原生媒體支持** HTML5 的一次大改進救生衣支持在瀏覽器中直接播放視頻和音頻文件， 以前都需要借助插件才能實現此類功能。 **8.引入可編程內容** HTML5 最大的變化就是引入了需要通過 JavaScript 編程才能完全的各種效果， 而這些很多都是 HTML5 原生的。那么現在 HTML5 可以理解為 HTML + CSS + JavaScript 的總稱。 **四．課程學習問題** 學習 HTML5 需要一些測試用的瀏覽器、編碼用的開發工具、以及建議推薦的學習方法。 **1.瀏覽器選擇** 　　IE9+ 　　Firefox 3.5+ 　　Chrome 3.0+ 　　Safari 3.0+ 　　Opera 10.5+ 這里重點要說明一下 IE 瀏覽器。由于歷史和系統綁定原因，還有相當一部分電腦殘留IE9 以下版本的瀏覽器。雖然微軟已經開始發表聲明逐步不再維護 IE8，但這部分群體還占有一定的份額。所以，是否要迎合這部分用戶，取決于個人對市場的判斷和成本的考量。 **2.開發工具** 本課程我們使用 Sublime Text3 作為 HTML5 課程的編碼工具。使用了 Soda Dark 3作為軟件界面的主題。 **3.學習方式** 本課程原則上是零基礎、初學者可學，但如果你已經有 XHTML 課程基礎，那么學習起來將非常輕松。當然，雖然我們已經錄制了 XHTML 基礎，在錄制 HTML5 課程時，還是將所有學員當作剛接觸的初學者來對待。 再當然， 這里所說的零基礎和初學者也是需要一定經驗，因為長期的教學工作，我們接觸到很多連 QQ 不會用、郵件不會發送、迅雷不會下載的學員。這些學員是初學者之前的、負基礎的學員，所以，如果是初學者一般問題不大。