網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）項目一Web前端開發(fā)基礎(chǔ)Web前端開發(fā)基礎(chǔ)在這個互聯(lián)網(wǎng)已經(jīng)普及的時代，人們通過網(wǎng)頁來獲取信息已經(jīng)成為常態(tài)。網(wǎng)頁在互聯(lián)網(wǎng)時代扮演著非常重要的角色，它不僅是一個簡單的界面，更是信息傳播和交互的重要平臺。小丁所在的學(xué)校馬上就要舉辦文化藝術(shù)節(jié)了，他和同學(xué)小易商量著通過制作一個班級網(wǎng)站來展示班級風(fēng)采。Web前端開發(fā)是創(chuàng)建網(wǎng)頁或應(yīng)用程序等前端界面以呈現(xiàn)給用戶的過程。所以，他們將從Web前端開發(fā)的基礎(chǔ)知識入手，展開學(xué)習(xí)。情景導(dǎo)入任務(wù)1.1前端開發(fā)相關(guān)概念項目實施新知學(xué)習(xí)1：Web的起源1.萬維網(wǎng)（WorldWideWeb），簡稱Web，起源于1980年。2.Internet由Web和其他服務(wù)所組成。除了Web，Internet還包含以下服務(wù)。（1）E-mail：電子郵件。（2）FTP：FileTransferProtocol，文件傳輸協(xié)議。（3）Newsgroups：新聞組。（4）其他服務(wù)：遠(yuǎn)程登錄（Telnet）、論壇等。任務(wù)1.1前端開發(fā)相關(guān)概念項目實施新知學(xué)習(xí)2：Web的相關(guān)概念1.網(wǎng)站（Website）是指在Internet上根據(jù)一定的規(guī)則，使用超文本標(biāo)記語言（HypetextMarkupLanguage，HTML）等工具制作的、用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。2.網(wǎng)頁是網(wǎng)站中的一個頁面，是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。3.Web是基于客戶機/服務(wù)器方式的信息發(fā)現(xiàn)技術(shù)和超文本技術(shù)的綜合。4.URL（UniformResourceLocator），即統(tǒng)一資源定位符，包括協(xié)議、域名、端口、路徑、攜帶的參數(shù)、哈希值等部分。5.HTTP是HypertextTransferProtocol（超文本傳輸協(xié)議）的縮寫，是一種應(yīng)用層協(xié)議，基于標(biāo)準(zhǔn)的客戶機/服務(wù)器模型。6.Web瀏覽器，簡稱瀏覽器，是用來檢索、展示以及傳遞Web信息資源的應(yīng)用程序。7.Web服務(wù)器一般指網(wǎng)站服務(wù)器。任務(wù)1.1前端開發(fā)相關(guān)概念項目實施知識拓展：Web的特點1.Web頁面具有豐富的多媒體表現(xiàn)特性2.Web頁面具有超鏈接和快速導(dǎo)航能力3.Web頁面具有平臺獨立特性4.Web頁面具有分布自治特性5.Web頁面具有動態(tài)交互特性任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)1：“Web標(biāo)準(zhǔn)三劍客”1．HTMLHTML（HyperTextMarkupLanguage），即超文本標(biāo)記語言，是一門描述性的標(biāo)記語言。其基本語法如下。<標(biāo)簽符>內(nèi)容</標(biāo)簽符>標(biāo)簽符一般成對出現(xiàn)，其包括一個表示開始的標(biāo)簽符和一個表示結(jié)束的標(biāo)簽符，在表示開始的標(biāo)簽符前面加一個“/”即為表示結(jié)束的標(biāo)簽符。HTML5是公認(rèn)的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被稱為終將改變移動互聯(lián)網(wǎng)的重要推手。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)1：“Web標(biāo)準(zhǔn)三劍客”2．CSSCSS（CascadingStyleSheets），即串聯(lián)樣式表，有時候也被稱為“CSS樣式”，是用來控制網(wǎng)頁外觀的一項技術(shù)。其基本語法如下。選擇器{聲明1；聲明2；……}在設(shè)計Web網(wǎng)頁時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精準(zhǔn)的控制。同時，CSS語言也是一種標(biāo)記語言，不需要編譯，可以直接由瀏覽器解釋執(zhí)行。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)1：“Web標(biāo)準(zhǔn)三劍客”3．JavaScriptJavaScript是一種輕量級的解釋型Web開發(fā)語言，用于編寫網(wǎng)頁腳本。它的出現(xiàn)，使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系，使得網(wǎng)頁能夠包含更多活躍的元素和更加精彩的內(nèi)容。HTML、CSS、JavaScript三大技術(shù)被稱為“Web標(biāo)準(zhǔn)三劍客”。這三者與網(wǎng)頁之間的關(guān)系為：HTML描述網(wǎng)頁的結(jié)構(gòu)，CSS描述網(wǎng)頁的外觀，JavaScript描述網(wǎng)頁的行為。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)2：前端框架技術(shù)1．jQuery框架jQuery是一個快速、簡潔的JavaScript框架。jQuery的設(shè)計宗旨是“WriteLess，DoMore”，即倡導(dǎo)寫更少的代碼、做更多的事情。它封裝了JavaScript常用的功能代碼，提供了一種簡便的設(shè)計模式，優(yōu)化了HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。2014年10月28日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8看的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)2：前端框架技術(shù)2．Vue框架Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，采用自底向上增量開發(fā)的設(shè)計，由尤雨溪創(chuàng)建，發(fā)行于2014年2月。Vue的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，且非常容易與其他庫或已有項目整合。另一方面，Vue完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁面應(yīng)用。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)2：前端框架技術(shù)3．React框架React是一個用來構(gòu)建用戶界面的JavaScript框架，它于2013年5月開源。React是一個聲明式的、高效且靈活的、用于構(gòu)建用戶界面的JavaScript庫。使用React可以將一些簡短、獨立的代碼片段組合成復(fù)雜的UI，這些代碼片段被稱作“組件”。React的設(shè)計思想極其獨特，屬于革命性創(chuàng)新，它的性能出眾，代碼邏輯簡單。任務(wù)1.2前端開發(fā)技術(shù)項目實施新知學(xué)習(xí)2：前端框架技術(shù)4．Angular框架Angular框架是一個應(yīng)用設(shè)計框架與開發(fā)平臺，用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用。它由Google提供支持，發(fā)行于2016年9月，適用于大型和高級項目。Angular、React、Vue是目前前端的大主流框架。任務(wù)1.2前端開發(fā)技術(shù)項目實施知識拓展：后端開發(fā)技術(shù)后端開發(fā)即服務(wù)器端開發(fā)，主要涉及軟件系統(tǒng)后端的相關(guān)內(nèi)容。例如，用于托管網(wǎng)站和收集App數(shù)據(jù)的服務(wù)器、放置在后端服務(wù)器與瀏覽器及App之間的中間件等，都屬于后端。1．PHPPHP（PageHypertextPreprolessor），是一種在服務(wù)器端執(zhí)行的嵌入HTML文檔的腳本語言。其語法集合了C語言、Java和Perl的特點，易于學(xué)習(xí)，使用廣泛，主要應(yīng)用于Web開發(fā)領(lǐng)域。2．ASPASP（ActiveServerPages），即活動服務(wù)器頁面。ASP選用腳本語言VBScript、Javascript作為自己的開發(fā)語言。它具有簡單、易學(xué)，安裝、使用方便，開發(fā)工具強大、多樣，效率高的特點。任務(wù)1.2前端開發(fā)技術(shù)項目實施知識拓展：后端開發(fā)技術(shù)3．JSPJSP（JavaServerPages），即Java服務(wù)器頁面。網(wǎng)頁頁面由HTML代碼和嵌入其中的Java代碼所組成。服務(wù)器在頁面被客戶端請求以后對這些Java代碼進(jìn)行處理，然后將生成的HTML頁面返回給客戶端的瀏覽器。JSP具備Java技術(shù)簡單、易用的優(yōu)勢，完全的面向?qū)ο?，具有平臺無關(guān)性且安全可靠，可以實現(xiàn)“一次編寫，處處運行”。任務(wù)1.2前端開發(fā)技術(shù)項目實施知識拓展：后端開發(fā)技術(shù)4．ASPNETASPNET又稱為ASP+，是微軟公司推出的新一代腳本語言。它基于.NETFramework的Web開發(fā)平臺，不但吸收了ASP舊版本的眾多優(yōu)點，還參照了Java、VisualBasic的開發(fā)優(yōu)勢加入了許多新的特色。ASP.NET一般分為兩種開發(fā)語言—VB.NET和C#，C#相