網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件 01.前端開(kāi)發(fā)概念及技術(shù)

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