《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第1章 初識(shí)HTML5

第1章初識(shí)HTML5學(xué)習(xí)目標(biāo)123了解HTML5的發(fā)展歷程了解HTML5的特性與優(yōu)勢(shì)掌握HTML5開發(fā)基礎(chǔ)本章架構(gòu)★★★1.1HTML5概述1.2HTML5開發(fā)基礎(chǔ)1.3綜合案例1.1HTML5概述1.1HTML5概述

隨著傳統(tǒng)互聯(lián)網(wǎng)技術(shù)向移動(dòng)互聯(lián)網(wǎng)技術(shù)領(lǐng)域的拓展延伸，為了在移動(dòng)設(shè)備上呈現(xiàn)諸多富有表現(xiàn)力的Web頁面元素，HTML5應(yīng)運(yùn)而生。HTML5是

HyperTextMarkupLanguage5的縮寫，它在HTML4.01的基礎(chǔ)上，結(jié)合了其相關(guān)標(biāo)準(zhǔn)并做出了革新。

HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式，它作為互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建和呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的重要方式，是互聯(lián)網(wǎng)的核心技術(shù)之一。相對(duì)于HTML4.01標(biāo)準(zhǔn)，HTML5摒棄了其中部分元素，同時(shí)增加了一系列能夠帶來新特性的新元素，從而形成了適應(yīng)新一代網(wǎng)絡(luò)技術(shù)發(fā)展的全新的頁面描述語言體系。1.1HTML5概述

HTML的出現(xiàn)由來已久，從1993年首次以草案的形式發(fā)布，再到2008年的HTML5正式版，中間經(jīng)歷了多次版本升級(jí)。HTML5是一套新的HTML標(biāo)準(zhǔn)，是對(duì)HTML及XHTML的繼承與發(fā)展。HTML5是一個(gè)向下兼容的版本，本質(zhì)上并不是什么全新技術(shù)，只是在功能特性上進(jìn)行了擴(kuò)充與豐富。

（1）HTML1.0：在1993年由互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。該草案并非標(biāo)準(zhǔn)，眾多不同版本HTML陸續(xù)在全球使用，但始終未能形成一個(gè)廣泛的標(biāo)準(zhǔn)一致的版本。

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

HTML5發(fā)展歷程

1.1HTML5概述

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

（4）HTML4.0：1997年12月推出的HTML4.0，將HTML推向了一個(gè)新高度。該版本倡導(dǎo)將文檔結(jié)構(gòu)和樣式分離，并實(shí)現(xiàn)了表格更靈活的控制。

（5）HTML4.01：由1999年提出的4.01版本是在HTML4.0基礎(chǔ)上的微小改進(jìn)。20世紀(jì)90年代是HTML發(fā)展速度最快的時(shí)期，但是自1999年發(fā)布的HTML4.01后，業(yè)界普遍認(rèn)為HTML已經(jīng)步入瓶頸期，W3C組織對(duì)Web標(biāo)準(zhǔn)的焦點(diǎn)開始轉(zhuǎn)向XHTML。

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

HTML5發(fā)展歷程

1.1HTML5概述

（7）XHTML1.1：XHTML1.1是模塊化的XHTML，是貨真價(jià)實(shí)的XML。

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

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

由于HTML5能解決實(shí)際的問題，所以在規(guī)范還未定稿的情況下，各大瀏覽器廠家已經(jīng)開始對(duì)旗下產(chǎn)品進(jìn)行升級(jí)以支持HTML5的新功能。因此，HTML5得益于瀏覽器的實(shí)驗(yàn)性反饋并且也得到持續(xù)的完善，并以這種方式迅速融入對(duì)Web平臺(tái)的實(shí)質(zhì)性改進(jìn)中。2014年10月，W3C組織宣布?xì)v經(jīng)8年努力，HTML5標(biāo)準(zhǔn)規(guī)范終于定稿。1

HTML5發(fā)展歷程

1.1HTML5概述HTML5的特性：

（1）語義特性

（2）本地存儲(chǔ)特性

（3）設(shè)備兼容特性

（4）連接特性

（5）網(wǎng)頁多媒體特性

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

（7）性能、集成特性2

HTML5特性與優(yōu)勢(shì)

1.1HTML5概述

HTML5的優(yōu)勢(shì)：

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

（2）新特性支持新體驗(yàn)

（3）用戶優(yōu)先的原則

（4）化繁為簡的優(yōu)勢(shì)2

HTML5特性與優(yōu)勢(shì)

1.2HTML5開發(fā)基礎(chǔ)1.2HTML5開發(fā)基礎(chǔ)

應(yīng)用HTML5技術(shù)完成Web前端頁面開發(fā)，既需要代碼編寫環(huán)境，也需要頁面效果驗(yàn)證環(huán)境。Windows操作系統(tǒng)內(nèi)置的記事本軟件是最簡單的代碼編寫環(huán)境，Web瀏覽器是頁面效果驗(yàn)證環(huán)境。1.2HTML5開發(fā)基礎(chǔ)

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

（1）IE瀏覽器

2010年3月，微軟MIX10技術(shù)大會(huì)上宣布其推出的IE9瀏覽器已經(jīng)支持HTML5。同時(shí)還聲稱，隨后將會(huì)更多地支持HTML5新標(biāo)準(zhǔn)和CSS3新特性。

（2）Firefox（火狐）瀏覽器

2010年7月，Mozilla基金會(huì)發(fā)布了即將推出的Firefox4瀏覽器的第一個(gè)早期測(cè)試版，該版本的Firefox瀏覽器中進(jìn)行了大幅改進(jìn)，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，F(xiàn)irefox4對(duì)HTML5是完全級(jí)別的支持。目前，包括在線視頻、在線音頻在內(nèi)的多種應(yīng)用都已經(jīng)在Firefox中實(shí)現(xiàn)。1瀏覽器對(duì)HTML5的支持1.2HTML5開發(fā)基礎(chǔ)

（3）Chrome瀏覽器

2010年2月，谷歌Gears項(xiàng)目經(jīng)理通過微博宣布，谷歌將放棄對(duì)Gears瀏覽器插件項(xiàng)目的支持，以重點(diǎn)開發(fā)HTML5項(xiàng)目。目前在谷歌看來，Gears應(yīng)用用于HTML5的諸多創(chuàng)新非常相似，并且谷歌一直積極發(fā)展HTML5項(xiàng)目。

（4）Safari瀏覽器

2010年6月，蘋果在開發(fā)者發(fā)布會(huì)公布Safari5，這款瀏覽器支持10個(gè)以上的HTML5新技術(shù)，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動(dòng)屬性、HTML5的形式驗(yàn)證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。1瀏覽器對(duì)HTML5的支持1.2HTML5開發(fā)基礎(chǔ)

（5）Opera瀏覽器

2010年5月，Opera軟件公司首席技術(shù)官，號(hào)稱“CSS之父”的HakonWiumLie認(rèn)為，HTML5和CSS3,將會(huì)是全球互聯(lián)網(wǎng)發(fā)展的未來趨勢(shì)，包括目前Opera在內(nèi)的諸多瀏覽器廠商，紛紛研發(fā)HTML5的相關(guān)產(chǎn)品，Web未來屬于HTML5。

（6）Edge瀏覽器

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

1.EditPlus

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

2.SublimeText

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

3.Atom

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

4.Dreamweaver

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

5.WebStorm

WebStorm與IntelliJIDEA同源，是JetBrains公司旗下的一款開發(fā)工具，它被眾多開發(fā)者譽(yù)為“最強(qiáng)大的HTML5編輯器”。2HTML5開發(fā)工具1.2HTML5開發(fā)基礎(chǔ)

6.VisualStudioCode

VisualStudioCode（簡稱VSCode），它是一款針對(duì)于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器，可運(yùn)行于Windows、macOS和Linux操作系統(tǒng)。VSCode為開發(fā)者們提供了對(duì)多種編程語言的內(nèi)置支持，同時(shí)也為這些語言提供豐富的代碼補(bǔ)全和導(dǎo)航功能。2HTML5開發(fā)工具1.2HTML5開發(fā)基礎(chǔ)

7.HBuilder和HBuilderX

HBuilder是一款優(yōu)秀的國產(chǎn)Web前端開發(fā)工具。HBuilderX是HBuilder的升級(jí)版，它們都是由DCloud（數(shù)字天堂）公司推出的，專門為Web前端開發(fā)者服務(wù)的通用集成開發(fā)環(huán)境。2HTML5開發(fā)工具1.2HTML5開發(fā)基礎(chǔ)

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

1.2HTML5開發(fā)基礎(chǔ)

1.下載HBuilderX

可以在其官網(wǎng)下載最新版的HBuilderX。HBuilderX目前支持Windows系統(tǒng)和macOS系統(tǒng)，下載時(shí)應(yīng)根據(jù)計(jì)算機(jī)系統(tǒng)的實(shí)際情況選擇適合的版本。在對(duì)兩種操作系統(tǒng)支持的基礎(chǔ)上，又分為標(biāo)準(zhǔn)版和App開發(fā)版。完成Web前端頁面開發(fā)，下載標(biāo)準(zhǔn)版即可；如果做App開發(fā)，則建議下載App開發(fā)版，否則需要在插件管理中安裝uni-app插件。3HBuilderX的使用

1.2HTML5開發(fā)基礎(chǔ)2.運(yùn)行HBuilderX解壓下載到的HBuilderX壓縮包，雙擊HBuilderX.exe運(yùn)行該軟件。3HBuilderX的使用

1.2HTML5開發(fā)基礎(chǔ)

3.使用HBuilderX新建項(xiàng)目

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

1.2HTML5開發(fā)基礎(chǔ)

4.創(chuàng)建Web頁面

可以點(diǎn)擊創(chuàng)建完成的項(xiàng)目中的index.html，在代碼編輯區(qū)進(jìn)行代碼的編寫；也可以依次點(diǎn)擊“文件”→“新建”→“html文件”來創(chuàng)建新的Web頁面。3HBuilderX的使用

1.2H