本書系統(tǒng)地介紹了Web前端開發(fā)的基礎(chǔ)知識(shí)和實(shí)際應(yīng)用。全書共分7章，內(nèi)容包括Web開發(fā)概述及環(huán)境搭建、使用HTML標(biāo)簽組織頁面內(nèi)容、使用CSS樣式設(shè)置頁面外觀、網(wǎng)站頁面布局、JavaScript與jQuery、HTML5新增功能和常用Web前端開發(fā)框架的使用。本書以實(shí)際應(yīng)用為出發(fā)點(diǎn)，精心組織教材內(nèi)容，每章都設(shè)計(jì)了典型案例，并配有習(xí)題及實(shí)驗(yàn)。與本書配套的教學(xué)網(wǎng)站，提供教學(xué)大綱、實(shí)驗(yàn)大綱、各種軟件的下載鏈接、課件和案例源代碼下載、在線測試等，極大地方便了教與學(xué)。本書可以作為高等院校計(jì)算機(jī)及相關(guān)專業(yè)學(xué)生學(xué)習(xí)Web前端開發(fā)的教材，也可以作為Web開發(fā)愛好者的參考書。為了方便教學(xué)，本書還配有電子課件等教學(xué)資源包，任課教師和學(xué)生可以登錄我們愛讀書網(wǎng)（www.ibook4us.com）注冊并瀏覽，任課教師還可以發(fā)郵件至hustpeiit@163.com索取。
本書系統(tǒng)地介紹了Web前端開發(fā)的基礎(chǔ)知識(shí)和實(shí)際應(yīng)用。全書共分7章，內(nèi)容包括Web開發(fā)概述及環(huán)境搭建、使用HTML標(biāo)簽組織頁面內(nèi)容、使用CSS樣式設(shè)置頁面外觀、網(wǎng)站頁面布局、JavaScript與jQuery、HTML5新增功能和常用Web前端開發(fā)框架的使用。本書以實(shí)際應(yīng)用為出發(fā)點(diǎn)，精心組織教材內(nèi)容，每章都設(shè)計(jì)了典型案例，并配有習(xí)題及實(shí)驗(yàn)。與本書配套的教學(xué)網(wǎng)站，提供教學(xué)大綱、實(shí)驗(yàn)大綱、各種軟件的下載鏈接、課件和案例源代碼下載、在線測試等，極大地方便了教與學(xué)。
近幾年來，Web前端開發(fā)技術(shù)飛速發(fā)展，許多高校Web前端教學(xué)中已經(jīng)打破了只講HTML4 CSS2 JavaScript的傳統(tǒng)格局。隨著互聯(lián)網(wǎng)行業(yè)（特別是移動(dòng)互聯(lián)網(wǎng)）的持續(xù)發(fā)展，企業(yè)開發(fā)平臺(tái)開始在界面友好性和操作方便性方面投入更多的精力，Web前端從業(yè)人員數(shù)量猛增，待遇大幅度提升。移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展，帶來了Web前端開發(fā)的新問題：能否只開發(fā)一套自動(dòng)適應(yīng)PC端和移動(dòng)端的Web系統(tǒng)？使用HTML5的媒體查詢功能可實(shí)現(xiàn)響應(yīng)式布局，能圓滿地解決這個(gè)問題。此外，HTML5相對(duì)于HTML4增加了許多實(shí)用的標(biāo)簽，如對(duì)文本框增加列表輸入功能的〈details〉和〈summary〉標(biāo)簽等。通過 CSS3，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，為元素從一種樣式變換為另一種樣式時(shí)添加動(dòng)畫效果，這比采用傳統(tǒng)的引入方式（在頁面里嵌入動(dòng)畫文件）有更好的用戶體驗(yàn)。此外，boxreflect（實(shí)現(xiàn)倒影或鏡像）和borderradius（實(shí)現(xiàn)邊框圓角）等都是非常實(shí)用的CSS3新增樣式。前端框架jQuery是經(jīng)典框架，方便對(duì)JavaScript腳本的使用；Bootstrap是一個(gè)關(guān)于HTML、CSS和JS的Web前端框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 Web 項(xiàng)目；Layui是一個(gè)模塊化的前端UI框架。引人注目的是JavaScript的運(yùn)行時(shí)環(huán)境Node.js及使用MVVM模式真正實(shí)現(xiàn)頁面與數(shù)據(jù)邏輯分離的前端漸進(jìn)式框架Vue.js。本書系統(tǒng)地介紹了Web前端開發(fā)的基礎(chǔ)知識(shí)和實(shí)際應(yīng)用。全書共分7章，內(nèi)容包括Web開發(fā)概述及環(huán)境搭建、使用HTML標(biāo)簽組織頁面內(nèi)容、使用CSS樣式設(shè)置頁面外觀、網(wǎng)站頁面布局、JavaScript與jQuery、使用HTML5新增功能和常用Web前端開發(fā)框架的使用。本書寫作特色鮮明：一是教材結(jié)構(gòu)合理，對(duì)教材內(nèi)容的設(shè)置進(jìn)行了深思熟慮、多次推敲，在行文時(shí)指出了相關(guān)章節(jié)知識(shí)點(diǎn)之間的聯(lián)系；二是知識(shí)點(diǎn)介紹簡明，作者精心設(shè)計(jì)的案例緊扣理論；三是采用大量的截圖，清晰地反映了頁面的瀏覽效果；四是通過使用不同知識(shí)點(diǎn)設(shè)計(jì)的同一綜合案例，讓學(xué)生辨析不同的知識(shí)點(diǎn)；五是有配套的上機(jī)實(shí)驗(yàn)網(wǎng)站，方便教與學(xué)；六是使用Web服務(wù)器WAMP來實(shí)現(xiàn)對(duì)靜態(tài)網(wǎng)頁的訪問。本書以實(shí)用為出發(fā)點(diǎn)，精心設(shè)計(jì)了許多案例，以說明相關(guān)知識(shí)點(diǎn)及其用法。為了便于學(xué)生復(fù)習(xí)，每章配有習(xí)題及實(shí)驗(yàn)。與本書配套的教學(xué)網(wǎng)站，提供教學(xué)大綱、實(shí)驗(yàn)大綱、各種軟件的下載鏈接、課件和案例源代碼下載、在線測試等，極大地方便了教與學(xué)。總之，這是一本適合于以培養(yǎng)應(yīng)用型本科人才為目標(biāo)的教材。本書可作為高等院校計(jì)算機(jī)及相關(guān)專業(yè)學(xué)生學(xué)習(xí)Web前端開發(fā)的教材，也可以作為Web開發(fā)愛好者的參考書。為了方便教學(xué)，本書還配有電子課件等教學(xué)資源包，任課教師和學(xué)生可以登錄我們愛讀書網(wǎng)（www.ibook4us.com）注冊并瀏覽，任課教師還可以發(fā)郵件至hustpeiit@163.com索取。由于編者水平有限，書中錯(cuò)漏之處在所難免，在此真誠歡迎讀者多提寶貴意見，讀者可與出版社聯(lián)系，以便再版時(shí)更正。
第1章Web開發(fā)概述及環(huán)境搭建1
1.1網(wǎng)站與網(wǎng)頁概述1
1.1.1網(wǎng)站、網(wǎng)頁與網(wǎng)址1
1.1.2網(wǎng)頁組成2
1.1.3資源引用的相對(duì)路徑與絕對(duì)路徑2
1.1.4快速創(chuàng)建一個(gè)Web服務(wù)器2
1.1.5相關(guān)名詞解釋3
1.2基于B/S體系的網(wǎng)站系統(tǒng)4
1.2.1Web服務(wù)器與數(shù)據(jù)庫服務(wù)器4
1.2.2動(dòng)態(tài)網(wǎng)頁的執(zhí)行過程5
1.2.3應(yīng)用層協(xié)議HTTP與HTTPS6
1.2.4Web客戶端與瀏覽器內(nèi)核7
1.2.5瀏覽器調(diào)試程序8
1.2.6Cookie信息與瀏覽器緩存9
1.3網(wǎng)頁設(shè)計(jì)工具10
1.3.1高效的網(wǎng)頁編輯器VS Code10
1.3.2流行的網(wǎng)頁設(shè)計(jì)器HBuilder12
1.3.3網(wǎng)頁文檔快速修改工具EditPlus和NotePad13
1.4使用網(wǎng)頁三劍客制作網(wǎng)頁素材15
1.4.1圖形圖像處理軟件概述15
1.4.2使用Fireworks或Photoshop編輯圖像15
1.4.3使用Flash制作動(dòng)畫16
1.4.4切圖形成網(wǎng)頁素材17
習(xí)題118
實(shí)驗(yàn)119
第2章使用HTML標(biāo)簽組織頁面內(nèi)容21
2.1HTML語言概述21
2.1.1HTML標(biāo)簽名稱與屬性21
2.1.2實(shí)體標(biāo)簽元素分類24
2.1.3網(wǎng)頁文檔編碼與meta標(biāo)簽25
2.1.4特殊字符26
2.1.5HTML色彩與度量單位26
2.2簡單的HTML標(biāo)簽28
2.2.1文本樣式標(biāo)簽28
2.2.2文本格式化標(biāo)簽28
2.2.3滾動(dòng)標(biāo)簽28
2.2.4列表標(biāo)簽29
2.2.5超鏈接與錨點(diǎn)鏈接標(biāo)簽30
2.2.6圖像標(biāo)簽31
2.3表格31
2.3.1表格定義及屬性設(shè)置31
2.3.2表格行定義及屬性設(shè)置32
2.3.3表格單元格定義及屬性設(shè)置33
2.3.4表格單元格合并33
2.4表單35
2.4.1表單及其工作原理35
2.4.2表單定義與基本使用36
2.4.3常用表單域37
2.4.4文件域與文件上傳40
習(xí)題243
實(shí)驗(yàn)245
第3章使用CSS樣式設(shè)置頁面外觀47
3.1CSS樣式概述47
3.2CSS選擇器48
3.2.1基本選擇器48
3.2.2組合選擇器50
3.3CSS樣式的建立與使用51
3.3.1CSS樣式的建立方式51
3.3.2CSS樣式的使用方式51
3.3.3CSS高級(jí)特性53
3.4常用CSS樣式的屬性56
3.4.1文本外觀56
3.4.2方框樣式57
3.4.3元素顯示與可見特性58
3.4.4設(shè)置按鈕是否可用59
3.4.5濾鏡樣式59
3.5重新定義HTML元素外觀60
3.6新樣式標(biāo)準(zhǔn)CSS363
3.6.1CSS3新增選擇器64
3.6.2CSS3 陰影效果66
3.6.3CSS3動(dòng)畫效果67
習(xí)題372
實(shí)驗(yàn)373
第4章網(wǎng)站頁面布局75
4.1頁面布局概述75
4.2CSS Div布局76
4.2.1div標(biāo)簽76
4.2.2盒子模型76
4.2.3元素定位的CSS樣式屬性83
4.2.4元素定位模式84
4.3頁內(nèi)框架與框架集88
4.3.1頁內(nèi)框架88
4.3.2框架集88
4.4綜合項(xiàng)目：會(huì)員管理信息系統(tǒng)memmana189
4.5使用HTML5布局標(biāo)簽97
習(xí)題4101
實(shí)驗(yàn)4102
第5章JavaScript與jQuery104
5.1JavaScript基礎(chǔ)104
5.1.1JavaScript概述104
5.1.2JavaScript數(shù)據(jù)類型與運(yùn)算符106
5.1.3JavaScript流程控制語句110
5.1.4JavaScript對(duì)象的PEM模型111
5.1.5JavaScript腳本調(diào)試115
5.2JavaScript內(nèi)置對(duì)象116
5.2.1數(shù)組對(duì)象Array116
5.2.2日期/時(shí)間對(duì)象Date117
5.2.3字符串對(duì)象String117
5.2.4數(shù)學(xué)對(duì)象Math118
5.2.5自定義JavaScript對(duì)象119
5.3瀏覽器對(duì)象120
5.3.1BOM與DOM120
5.3.2頂級(jí)對(duì)象window常用屬性和方法121
5.3.3文檔對(duì)象document與表單的elements集合127
5.3.4位置對(duì)象location136
5.3.5歷史對(duì)象history136
5.3.6導(dǎo)航對(duì)象navigator137
5.4綜合項(xiàng)目：會(huì)員管理信息系統(tǒng)memmana2a139
5.5jQuery147
5.5.1jQuery使用基礎(chǔ)147
5.5.2綜合項(xiàng)目：會(huì)員管理信息系統(tǒng)memmana2b156
5.5.3jQuery插件開發(fā)160
5.6jQuery Ajax161
5.6.1jQuery Ajax概述161
5.6.2JSON數(shù)據(jù)格式161
5.6.3jQuery Ajax應(yīng)用實(shí)例163
習(xí)題5167
實(shí)驗(yàn)5169
第6章HTML5新增功能171
6.1HTML5概述171
6.1.1從HTML4到HTML5171
6.1.2使用標(biāo)簽〈details〉和〈summary〉隱藏詳細(xì)內(nèi)容172
6.2HTML5對(duì)表單的新增功能173
6.2.1字段輸入提示173
6.2.2為文本域添加下拉列表選擇輸入173
6.2.3字段必填驗(yàn)證174
6.2.4電子郵件格式驗(yàn)證174
6.2.5日期與時(shí)間輸入175
6.2.6range類型175
6.3HTML5音頻與視頻176
6.3.1音頻標(biāo)簽audio176
6.3.2視頻標(biāo)簽video177
6.4HTML5繪圖功能178
6.4.1畫布標(biāo)簽canvas178
6.4.2HTML5繪圖API178
6.5HTML5地理定位與百度地圖180
6.5.1HTML5地理定位實(shí)現(xiàn)180
6.5.2第三方工具百度地圖的應(yīng)用182
6.6HTML5響應(yīng)式布局與媒體查詢184
6.6.1響應(yīng)式布局184
6.6.2關(guān)于視口viewport185
6.6.3媒體查詢185
6.7HTML5 Web存儲(chǔ)190
6.7.1本地存儲(chǔ)localStorage191
6.7.2會(huì)話存儲(chǔ)sessionStorage192
6.7.3WebSQL數(shù)據(jù)庫192
習(xí)題6194
實(shí)驗(yàn)6195
第7章常用Web前端開發(fā)框架的使用197
7.1Web前端框架Bootstrap197
7.1.1概述197
7.1.2Bootstrap使用基礎(chǔ)197
7.1.3CSS組件198
7.1.4響應(yīng)式設(shè)計(jì)201
7.2模塊化前端框架Layui 203
7.2.1在Web項(xiàng)目里引入Layui框架203
7.2.2網(wǎng)頁輪播特效203
7.2.3表格模塊與分頁模塊的使用204
7.3富文本編輯器Baidu UE208
7.4JS運(yùn)行時(shí)環(huán)境Node.js211
7.4.1Node.js概述、下載及安裝211
7.4.2Node.js模塊安裝器npm與cnpm211
7.4.3使用mysql模塊訪問MySQL數(shù)據(jù)庫212
7.4.4使用http模塊創(chuàng)建HTTP服務(wù)器216
7.4.5服務(wù)端框架Express217
7.4.6靜態(tài)資源打包工具WebPack219
7.5漸進(jìn)式框架Vue.js220
7.5.1Vue.js概述220
7.5.2快速創(chuàng)建、部署、運(yùn)行和打包一個(gè)Vue.js項(xiàng)目222
7.5.3Vue組件224
7.5.4前端路由配置225
習(xí)題7227
實(shí)驗(yàn)7228
參考文獻(xiàn)230
書單推薦
