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

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

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

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

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

網(wǎng)頁標題、網(wǎng)站標志Logo、導航菜單、側邊欄、頁眉與頁腳以及頁面內容尺寸等。網(wǎng)頁風格：

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

“廠”字型、兩欄、多欄布局等常見布局結構。網(wǎng)頁內容：

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

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

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

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

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

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

HTML指的是超文本標記語言(HyperTextMarkupLanguage)HTML5：HTML5是最新一代的HTML標準，對已有版本的改進和完善，增加了一些特性，性能得到進一步提升。修改了HTML和XHTML的標記，相關的API、Canvas等，同時HTML5的圖像img標記及svg也進行了改進。1.2.2CSS與CSS3的概念CSS：CSS(CascadingStyleSheet)，全稱“層疊樣式表”或“級聯(lián)樣式表”，簡稱樣式表。CSS是一種樣式標準，定義網(wǎng)頁元素樣式和頁面排版布局。CSS3：CSS3是CSS技術的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的，增加了許多新特性，使得對網(wǎng)頁元素的樣式控制更加靈活和細致。如可設置圓角、漸變和動態(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)性：它可以直接對用戶或客戶的輸入做出響應，無須經(jīng)過Web服務程序。因此，可以實現(xiàn)類似彈出提示框這樣的交互性網(wǎng)頁功能。它對用戶的響應是以“事件”做驅動的，比如，“單擊網(wǎng)頁中的按鈕”這個事件可以引發(fā)對應的響應。跨平臺性：JavaScript依賴于瀏覽器，與操作系統(tǒng)無關。因此，只要在有瀏覽器的計算機上，且瀏覽器支持JavaSc