第1章初識HTML5學習目標123了解HTML5的發展歷程了解HTML5的特性與優勢掌握HTML5開發基礎本章架構★★★1.1HTML5概述1.2HTML5開發基礎1.3綜合案例1.1HTML5概述1.1HTML5概述

隨著傳統互聯網技術向移動互聯網技術領域的拓展延伸，為了在移動設備上呈現諸多富有表現力的Web頁面元素，HTML5應運而生。HTML5是

HyperTextMarkupLanguage5的縮寫，它在HTML4.01的基礎上，結合了其相關標準并做出了革新。

HTML5是構建Web內容的一種語言描述方式，它作為互聯網的下一代標準，是構建和呈現互聯網內容的重要方式，是互聯網的核心技術之一。相對于HTML4.01標準，HTML5摒棄了其中部分元素，同時增加了一系列能夠帶來新特性的新元素，從而形成了適應新一代網絡技術發展的全新的頁面描述語言體系。1.1HTML5概述

HTML的出現由來已久，從1993年首次以草案的形式發布，再到2008年的HTML5正式版，中間經歷了多次版本升級。HTML5是一套新的HTML標準，是對HTML及XHTML的繼承與發展。HTML5是一個向下兼容的版本，本質上并不是什么全新技術，只是在功能特性上進行了擴充與豐富。

（1）HTML1.0：在1993年由互聯網工程工作小組(IETF)工作草案發布。該草案并非標準，眾多不同版本HTML陸續在全球使用，但始終未能形成一個廣泛的標準一致的版本。

（2）HTML2.0：HTML2.0相比初版而言，元素得到了極大的豐富。1

HTML5發展歷程

1.1HTML5概述

（3）HTML3.2：HTML3.2是在1996年提出的規范，注重兼容性的提高，并對之前的版本進行了改進。

（4）HTML4.0：1997年12月推出的HTML4.0，將HTML推向了一個新高度。該版本倡導將文檔結構和樣式分離，并實現了表格更靈活的控制。

（5）HTML4.01：由1999年提出的4.01版本是在HTML4.0基礎上的微小改進。20世紀90年代是HTML發展速度最快的時期，但是自1999年發布的HTML4.01后，業界普遍認為HTML已經步入瓶頸期，W3C組織對Web標準的焦點開始轉向XHTML。

（6）XHTML1.0：在2000年由W3C組織提出，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。1

HTML5發展歷程

1.1HTML5概述

（7）XHTML1.1：XHTML1.1是模塊化的XHTML，是貨真價實的XML。

（8）XHTML2.0：2004年，一些瀏覽器廠商聯合成立了WHATWG工作組，致力于Web表單和應用程序。此時的W3C組織專注于XHTML2.0。XHTML2.0是完全模塊化可定制的XHTML，隨著HTML5的興起，XHTML2.0工作小組被要求停止工作。

（9）HTML5：在2006年，W3C組織組建了新的HTML工作組采納了WHATWG的意見，并于2008年發布了HTML5。

由于HTML5能解決實際的問題，所以在規范還未定稿的情況下，各大瀏覽器廠家已經開始對旗下產品進行升級以支持HTML5的新功能。因此，HTML5得益于瀏覽器的實驗性反饋并且也得到持續的完善，并以這種方式迅速融入對Web平臺的實質性改進中。2014年10月，W3C組織宣布歷經8年努力，HTML5標準規范終于定稿。1

HTML5發展歷程

1.1HTML5概述HTML5的特性：

（1）語義特性

（2）本地存儲特性

（3）設備兼容特性

（4）連接特性

（5）網頁多媒體特性

（6）三維、圖形、特效特性

（7）性能、集成特性2

HTML5特性與優勢

1.1HTML5概述

HTML5的優勢：

（1）解決了跨瀏覽器問題

（2）新特性支持新體驗

（3）用戶優先的原則

（4）化繁為簡的優勢2

HTML5特性與優勢

1.2HTML5開發基礎1.2HTML5開發基礎

應用HTML5技術完成Web前端頁面開發，既需要代碼編寫環境，也需要頁面效果驗證環境。Windows操作系統內置的記事本軟件是最簡單的代碼編寫環境，Web瀏覽器是頁面效果驗證環境。1.2HTML5開發基礎

Web瀏覽器是用于呈現Web前端頁面的軟件載體，當前瀏覽器所支持的許多新功能都是從HTML5標準中發展而來的。目前常用的瀏覽器有IE、Edge、Firefox、Chrome、Safari和Opera等。通過對這些主流Web瀏覽器的發展策略調查研究，可以發現它們都在支持HTML5上采取了相應的措施，以保證與新一代Web標準的同步。因此，現代的瀏覽器幾乎都支持HTML5。1瀏覽器對HTML5的支持1.2HTML5開發基礎

（1）IE瀏覽器

2010年3月，微軟MIX10技術大會上宣布其推出的IE9瀏覽器已經支持HTML5。同時還聲稱，隨后將會更多地支持HTML5新標準和CSS3新特性。

（2）Firefox（火狐）瀏覽器

2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測試版，該版本的Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，Firefox4對HTML5是完全級別的支持。目前，包括在線視頻、在線音頻在內的多種應用都已經在Firefox中實現。1瀏覽器對HTML5的支持1.2HTML5開發基礎

（3）Chrome瀏覽器

2010年2月，谷歌Gears項目經理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發HTML5項目。目前在谷歌看來，Gears應用用于HTML5的諸多創新非常相似，并且谷歌一直積極發展HTML5項目。

（4）Safari瀏覽器

2010年6月，蘋果在開發者發布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。1瀏覽器對HTML5的支持1.2HTML5開發基礎

（5）Opera瀏覽器

2010年5月，Opera軟件公司首席技術官，號稱“CSS之父”的HakonWiumLie認為，HTML5和CSS3,將會是全球互聯網發展的未來趨勢，包括目前Opera在內的諸多瀏覽器廠商，紛紛研發HTML5的相關產品，Web未來屬于HTML5。

（6）Edge瀏覽器

2015年4月，微軟在舊金山舉行的Build2015開發者大會上宣布——Windows10內置代號為“ProjectSpartan”的新瀏覽器被正式命名為“MicrosoftEdge”，其內置于Windows10版本中。2020年，微軟推出的基于Chromium的Edge瀏覽器在HTML5無障礙測試中取得了滿分的成績，超過其它瀏覽器。1瀏覽器對HTML5的支持1.2HTML5開發基礎

1.EditPlus

EditPlus是一款小巧但功能強大的可處理文本、HTML和程序語言的Windows編輯器。EditPlus是可以取代記事本的文字編輯器，擁有無限制的撤消與重做、英文拼字檢查、自動換行、列數標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。EditPlus是一個非常好用的HTML編輯器，它除了支持顏色標記、HTML標記外，還內建完整的HTML&CSS指令功能，對于習慣用記事本編輯網頁的開發者，能起到事半功倍的效果。2HTML5開發工具1.2HTML5開發基礎

2.SublimeText

SublimeText是一款輕量級的編輯器，優雅小巧、啟動速度快，支持多種編程語言。它是一款跨平臺的編輯器，同時支持Windows、Linux、MacOSX等操作系統。SublimeText還具有良好的擴展能力和完全開放的用戶自定義配置，以及實用的編輯狀態恢復功能，它的快捷鍵十分易用，可極大地減少代碼開發的勞動強度。2HTML5開發工具1.2HTML5開發基礎

3.Atom

Atom是Github專門為程序員推出的一個跨平臺文本編輯器。它具有簡潔和直觀的圖形用戶界面，支持HTML、CSS、JavaScript等網頁編程語言。Atom支持宏，可以自動完成分屏功能，同時集成了文件管理器。2HTML5開發工具1.2HTML5開發基礎

4.Dreamweaver

Dreamweaver是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。由于它支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對于初級人員，可以無需編寫任何代碼就能快速創建Web頁面。同時，其成熟的代碼編輯工具更適用于Web開發高級人員的創作。2HTML5開發工具1.2HTML5開發基礎

5.WebStorm

WebStorm與IntelliJIDEA同源，是JetBrains公司旗下的一款開發工具，它被眾多開發者譽為“最強大的HTML5編輯器”。2HTML5開發工具1.2HTML5開發基礎

6.VisualStudioCode

VisualStudioCode（簡稱VSCode），它是一款針對于編寫現代Web和云應用的跨平臺源代碼編輯器，可運行于Windows、macOS和Linux操作系統。VSCode為開發者們提供了對多種編程語言的內置支持，同時也為這些語言提供豐富的代碼補全和導航功能。2HTML5開發工具1.2HTML5開發基礎

7.HBuilder和HBuilderX

HBuilder是一款優秀的國產Web前端開發工具。HBuilderX是HBuilder的升級版，它們都是由DCloud（數字天堂）公司推出的，專門為Web前端開發者服務的通用集成開發環境。2HTML5開發工具1.2HTML5開發基礎

HBuilderX是一款優秀的國產Web前端集成開發環境，其主體由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。開發便捷是HBuilderX的最大優勢，通過完整的語法提示，大幅提升HTML、CSS、JavaScript的開發效率。3HBuilderX的使用

1.2HTML5開發基礎

1.下載HBuilderX

可以在其官網下載最新版的HBuilderX。HBuilderX目前支持Windows系統和macOS系統，下載時應根據計算機系統的實際情況選擇適合的版本。在對兩種操作系統支持的基礎上，又分為標準版和App開發版。完成Web前端頁面開發，下載標準版即可；如果做App開發，則建議下載App開發版，否則需要在插件管理中安裝uni-app插件。3HBuilderX的使用

1.2HTML5開發基礎2.運行HBuilderX解壓下載到的HBuilderX壓縮包，雙擊HBuilderX.exe運行該軟件。3HBuilderX的使用

1.2HTML5開發基礎

3.使用HBuilderX新建項目

進入HBuilderX主界面，依次點擊“文件”→“新建”→“項目”(或按下Ctrl+N組合鍵，以觸發快速新建)，打開新建項目對話框。接下來，需要填寫新項目的基本信息。應在圖中的A處填寫新建項目的名稱；在B處填寫（或選擇）項目保存的路徑（注意：更改此路徑后，HBuilderX會記錄，下次新建項目時，將默認使用更改后的路徑）；在C處選擇將要使用的項目模板。然后，點擊“創建”按鈕，項目創建成功，則進入項目開發界面。3HBuilderX的使用

1.2HTML5開發基礎

4.創建Web頁面

可以點擊創建完成的項目中的index.html，在代碼編輯區進行代碼的編寫；也可以依次點擊“文件”→“新建”→“html文件”來創建新的Web頁面。3HBuilderX的使用

1.2H