任務(wù)1創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)

任務(wù)1創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)Web前端開(kāi)發(fā)案例教程HTML5+CSS3項(xiàng)目式微課版Web前端開(kāi)發(fā)是從創(chuàng)建網(wǎng)頁(yè)開(kāi)始的，本任務(wù)運(yùn)用HBuilderX網(wǎng)頁(yè)編輯軟件創(chuàng)建一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)。通過(guò)該任務(wù)的實(shí)現(xiàn)，熟悉HBuilderX網(wǎng)頁(yè)編輯軟件，了解網(wǎng)頁(yè)文件的基本結(jié)構(gòu)和網(wǎng)頁(yè)相關(guān)概念等。創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)任務(wù)1任務(wù)效果圖1-1第一個(gè)網(wǎng)頁(yè)啟動(dòng)HBuilderX，創(chuàng)建項(xiàng)目，在該項(xiàng)目中新建一個(gè)HTML文件，在網(wǎng)頁(yè)上顯示：“只爭(zhēng)朝夕，不負(fù)韶華?！薄g覽效果如圖1-1所示。知識(shí)點(diǎn)認(rèn)識(shí)Web前端開(kāi)發(fā)01Web相關(guān)概念02HTML5概述03

常用的瀏覽器04

網(wǎng)頁(yè)編輯軟件05創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)任務(wù)11.2.1認(rèn)識(shí)Web前端開(kāi)發(fā)Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或App界面等前端界面并將其呈現(xiàn)給用戶的過(guò)程，通過(guò)超文本標(biāo)記語(yǔ)言（Hyper-TextMarkupLanguage，HTML）、層疊樣式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。1.2.1認(rèn)識(shí)Web前端開(kāi)發(fā)前端開(kāi)發(fā)從網(wǎng)頁(yè)設(shè)計(jì)演變而來(lái)，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)設(shè)計(jì)是Web1.0時(shí)代的產(chǎn)物，早期網(wǎng)站的主要內(nèi)容都是靜態(tài)的，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)在的網(wǎng)頁(yè)更加美觀，交互效果顯著，功能更加強(qiáng)大。1.2.1認(rèn)識(shí)Web前端開(kāi)發(fā)

與前端開(kāi)發(fā)對(duì)應(yīng)的是后端開(kāi)發(fā)。后端開(kāi)發(fā)通過(guò)編寫(xiě)程序代碼與后臺(tái)服務(wù)器交互，來(lái)動(dòng)態(tài)更新網(wǎng)站的內(nèi)容。頁(yè)面超文本預(yù)處理器（PageHypertextPreprocessor，PHP）、Java服務(wù)器頁(yè)面（JavaServerPages，JSP）和活動(dòng)服務(wù)器頁(yè)面（ActiveServerPages，ASP）.NET等后臺(tái)開(kāi)發(fā)技術(shù)，結(jié)合后臺(tái)數(shù)據(jù)庫(kù)技術(shù)，可以使網(wǎng)站具有后臺(tái)存儲(chǔ)和處理數(shù)據(jù)等功能。IP地址（InternetProtocolAddress）用于確定互聯(lián)網(wǎng)上的每臺(tái)主機(jī)，它是每臺(tái)主機(jī)唯一的標(biāo)識(shí)。在互聯(lián)網(wǎng)上，每臺(tái)計(jì)算機(jī)或網(wǎng)絡(luò)設(shè)備的IP地址都是全世界唯一的。

IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整數(shù)。IP地址1.2.2Web相關(guān)概念由于IP地址是數(shù)字編碼的，不易記憶，所以我們平時(shí)上網(wǎng)使用的大多是諸如的地址，即域名。www表示萬(wàn)維網(wǎng)（WorldWideWeb，WWW）。域名1.2.2Web相關(guān)概念統(tǒng)一資源定位符（UniformResourceLocator，URL）其實(shí)就是Web地址，俗稱“網(wǎng)址”。萬(wàn)維網(wǎng)上的所有文件都有唯一的URL，只要知道資源的URL，就能夠?qū)ζ溥M(jìn)行訪問(wèn)。URL的格式為“協(xié)議名://主機(jī)域名或IP地址/路徑/文件名稱”。URL1.2.2Web相關(guān)概念網(wǎng)站、網(wǎng)頁(yè)與主頁(yè)1.2.2Web相關(guān)概念HTML表示網(wǎng)頁(yè)的一種規(guī)范（或者說(shuō)是一種標(biāo)準(zhǔn)），它通過(guò)標(biāo)記定義了網(wǎng)頁(yè)內(nèi)容的顯示。HTML提供了許多標(biāo)記，如段落標(biāo)記、標(biāo)題標(biāo)記、超鏈接標(biāo)記和圖像標(biāo)記等。網(wǎng)頁(yè)中需要顯示什么內(nèi)容，就用相應(yīng)的HTML標(biāo)記進(jìn)行描述。HTML1.2.2Web相關(guān)概念查看網(wǎng)頁(yè)源代碼的方法：在網(wǎng)頁(yè)上右擊，選擇“查看頁(yè)面源代碼”Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)1.2.2Web相關(guān)概念HTML5是超文本標(biāo)記語(yǔ)言的第5代版本。

2014年10月29日，W3C宣布HTML5標(biāo)準(zhǔn)規(guī)范制定完成，并公開(kāi)發(fā)布。1.2.3HTML5概述1.2.4常用的瀏覽器

目前，常用的瀏覽器有Edge、火狐（Firefox）、Chrome、Safari和Opera等，如下圖所示。Edge瀏覽器是微軟新一代的瀏覽器，是IE的替代產(chǎn)品，其功能全面，支持?jǐn)U展程序，界面簡(jiǎn)潔、注重實(shí)用，對(duì)HTML5有很好的支持。Edge瀏覽器1.2.4常用的瀏覽器

火狐瀏覽器是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器?；鸷鼮g覽器由Mozilla資金會(huì)和開(kāi)源開(kāi)發(fā)者一起開(kāi)發(fā)。由于是開(kāi)源的，所以它可以集成很多小插件，具有可拓展等特點(diǎn)。該瀏覽器發(fā)布于2002年，它也是世界上使用較廣泛的瀏覽器，對(duì)HTML5也有很好的支持?；鸷鼮g覽器1.2.4常用的瀏覽器Chrome瀏覽器是由谷歌公司開(kāi)發(fā)的開(kāi)放源代碼的瀏覽器。該瀏覽器的目標(biāo)是提升網(wǎng)頁(yè)的穩(wěn)定性、傳輸速度和安全性，并創(chuàng)造出簡(jiǎn)單有效的使用界面。Chrome瀏覽器完全支持HTML5的功能。Chrome瀏覽器1.2.4常用的瀏覽器本書(shū)所有頁(yè)面在瀏覽時(shí)一律采用Chrome瀏覽器。Safari瀏覽器是蘋(píng)果公司開(kāi)發(fā)的瀏覽器，Opera瀏覽器是Opera軟件公司開(kāi)發(fā)的一款瀏覽器，兩款瀏覽器都對(duì)HTML5有很好的支持。其它瀏覽器1.2.4常用的瀏覽器1.2.5網(wǎng)頁(yè)編輯軟件

網(wǎng)頁(yè)編輯軟件有很多種，比較常用的有HBuilderX、AdobeDreamweaver、VisualStudioCode、SublimeText等。任務(wù)3創(chuàng)建第一個(gè)HTML5網(wǎng)頁(yè)任務(wù)11.3.1啟動(dòng)HBuilderX雙擊HBuilderX.exe文件或桌面上的HBuilderX快捷方式，啟動(dòng)HBuilderX，如圖所示。1.3.2新建項(xiàng)目從菜單欄中選擇“文件”|“新建”｜“項(xiàng)目”選項(xiàng)，出現(xiàn)“新建項(xiàng)目”對(duì)話框，輸入項(xiàng)目名稱chapter01，項(xiàng)目存放位置為“E:/Web前端開(kāi)發(fā)/源代碼”，選擇模板類型為“空項(xiàng)目”，單擊“創(chuàng)建”按鈕，如圖所示。項(xiàng)目用來(lái)存儲(chǔ)一個(gè)網(wǎng)站的所有文件，這些文件包括網(wǎng)頁(yè)文件、圖像及音視頻文件、腳本文件、樣式表文件等1.3.3在項(xiàng)目中創(chuàng)建網(wǎng)頁(yè)文件在左側(cè)視圖中右擊項(xiàng)目名稱，在彈出的快捷菜單中選擇“新建”｜“html文件”選項(xiàng)，出現(xiàn)“新建html文件”對(duì)話框，輸入文件名example01.html，單擊“創(chuàng)建”按鈕，如圖所示。1.3.4輸入網(wǎng)頁(yè)代碼在網(wǎng)頁(yè)文件代碼的<title>與</title>之間輸入HTML文檔的標(biāo)題，這里輸入“第一個(gè)網(wǎng)頁(yè)”，然后在<body>與</body>標(biāo)記之間添加網(wǎng)頁(yè)的主體內(nèi)容，如圖所示。文檔的標(biāo)題網(wǎng)