Web前端技術(shù)開發(fā)（HTML5+CSS3+JavaScript）課件 第一單元 網(wǎng)頁開發(fā)入門

Web前端開發(fā)技術(shù)第一單元網(wǎng)頁開發(fā)入門對如何制作和設(shè)計網(wǎng)頁有一個全面的了解，作為一個全局性的認(rèn)識為下面的學(xué)習(xí)打下基礎(chǔ)。HTML、CSS、JavaScript三者的角色與作用1.1網(wǎng)頁基礎(chǔ)知識1.2HTML、CSS、JavaScript三者的角色1.3常用開發(fā)工具網(wǎng)頁基礎(chǔ)知識11.1.1網(wǎng)頁與網(wǎng)站網(wǎng)頁概念：

網(wǎng)頁是互聯(lián)網(wǎng)上展示信息的一種形式。網(wǎng)頁又稱Web頁面，呈現(xiàn)文字、圖像、視音頻多媒體等網(wǎng)頁內(nèi)容。它會以文本文檔的形式存儲在Web服務(wù)器上，通過Internet傳輸?shù)綖g覽器上，并由各種瀏覽器解析和顯示。網(wǎng)頁分類：

靜態(tài)網(wǎng)頁：內(nèi)容相對固定不變，沒有后臺程序的支持，缺乏靈活性，以.html或.htm為擴展名的網(wǎng)頁文件。

動態(tài)網(wǎng)頁：內(nèi)容可根據(jù)用戶、時間、地點等因素變化而不同，瀏覽器能與服務(wù)器進行交互，動態(tài)網(wǎng)頁有ASP、JSP、PHP等1.1.2經(jīng)典網(wǎng)頁賞析網(wǎng)頁基本要素：

網(wǎng)頁標(biāo)題、網(wǎng)站標(biāo)志Logo、導(dǎo)航菜單、側(cè)邊欄、頁眉與頁腳以及頁面內(nèi)容尺寸等。網(wǎng)頁風(fēng)格：

簡明，酷炫，溫馨等，一些知名網(wǎng)站也形成了獨有的設(shè)計風(fēng)格，如Google風(fēng)格、FlatUI等。網(wǎng)頁布局：

“廠”字型、兩欄、多欄布局等常見布局結(jié)構(gòu)。網(wǎng)頁內(nèi)容：

網(wǎng)站logo、導(dǎo)航欄、頁面標(biāo)題、主要信息內(nèi)容模塊、側(cè)欄模塊和網(wǎng)站版權(quán)信息底部模塊。1.1.3瀏覽器的兼容性問題兼容性定義：

各種瀏覽器由不同公司開發(fā)，使用的瀏覽器內(nèi)核不一樣，就會對網(wǎng)頁的解析處理的方式不同，同一張網(wǎng)頁會有不同的顯示效果，就是我們網(wǎng)頁開發(fā)人員要考慮的瀏覽器兼容性問題。主流瀏覽器：

HTML、CSS、JavaScript三者的角色21.2HTMLCSSJavaScript三者的角色HTML：

HTML指的是超文本標(biāo)記語言(HyperTextMarkupLanguage)CSS：CSS（CascadingStyleSheet，即“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。JavaScript：

JavaScript是一種腳本語言，可以和HTML語言結(jié)合，在HTML中可以直接編寫JavaScript代碼1.2HTMLCSSJavaScript三者的角色三者關(guān)系：

本書主要關(guān)注在靜態(tài)網(wǎng)頁的制作上面，靜態(tài)網(wǎng)頁的制作離不開這3類代碼：HTML、CSS、JavaScript，這三者相輔相成，發(fā)揮著不同的作用。1.2.1HTML與HTML5的概念HTML：

HTML指的是超文本標(biāo)記語言(HyperTextMarkupLanguage)HTML5：HTML5是最新一代的HTML標(biāo)準(zhǔn)，對已有版本的改進和完善，增加了一些特性，性能得到進一步提升。修改了HTML和XHTML的標(biāo)記，相關(guān)的API、Canvas等，同時HTML5的圖像img標(biāo)記及svg也進行了改進。1.2.2CSS與CSS3的概念CSS：CSS(CascadingStyleSheet)，全稱“層疊樣式表”或“級聯(lián)樣式表”，簡稱樣式表。CSS是一種樣式標(biāo)準(zhǔn)，定義網(wǎng)頁元素樣式和頁面排版布局。CSS3：CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的，增加了許多新特性，使得對網(wǎng)頁元素的樣式控制更加靈活和細致。如可設(shè)置圓角、漸變和動態(tài)等效果。1.2.3JavaScript介紹JavaScript：

JavaScript簡稱JS，是一種腳本語言，類似Java語言，JS也有定義變量、方法，同時可以操縱網(wǎng)頁中的元素，實現(xiàn)網(wǎng)頁的動態(tài)效果，增加網(wǎng)頁交互性。

JavaScript的優(yōu)點：動態(tài)性：它可以直接對用戶或客戶的輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。因此，可以實現(xiàn)類似彈出提示框這樣的交互性網(wǎng)頁功能。它對用戶的響應(yīng)是以“事件”做驅(qū)動的，比如，“單擊網(wǎng)頁中的按鈕”這個事件可以引發(fā)對應(yīng)的響應(yīng)?？缙脚_性：JavaScript依賴于瀏覽器，與操作系統(tǒng)無關(guān)。因此，只要在有瀏覽器的計算機上，且瀏覽器支持JavaSc