Web前端開(kāi)發(fā)從學(xué)到用完美實(shí)踐HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版）

內(nèi)容系統(tǒng)全面，一站式解決HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS

講解深入淺出，安全精彩、貼近實(shí)戰(zhàn)，商業(yè)化開(kāi)發(fā)味道突出

全屏幕適配，支持移動(dòng)Web開(kāi)發(fā)，引入“瀏覽器支持”工程理念

理論實(shí)戰(zhàn)緊密結(jié)合，徹底擺脫紙上談兵

融匯前端開(kāi)發(fā)多年的授課及培訓(xùn)經(jīng)驗(yàn)，干貨多多

書(shū)中所配DVD包含所有涉及到的軟件及書(shū)中案例代碼，上手無(wú)障礙

1．為什么要學(xué)習(xí)Web前端開(kāi)發(fā)？

在日益互聯(lián)網(wǎng)化的今天，Web技術(shù)已經(jīng)成為一門(mén)廣泛應(yīng)用的技術(shù)。除了日常的網(wǎng)站訪問(wèn)和信息瀏覽，Web已成為各種設(shè)備的有機(jī)組成部分。例如交換機(jī)、路由器、服務(wù)器等硬件設(shè)備都可以通過(guò)Web方式進(jìn)行管理，并且這種方式得到了越來(lái)越多的應(yīng)用，各種信息技術(shù)都在不斷“Web化”。

不僅如此，學(xué)習(xí)Web前端開(kāi)發(fā)技術(shù)具有以下優(yōu)勢(shì)：

 Web前端開(kāi)發(fā)入門(mén)門(mén)檻低，但市場(chǎng)需求量大，尤其是有經(jīng)驗(yàn)的前端開(kāi)發(fā)人員。

 Web前端開(kāi)發(fā)人員可在短期內(nèi)積累足夠的經(jīng)驗(yàn)，而后端開(kāi)發(fā)人員想要積累同等的經(jīng)驗(yàn)則需要更長(zhǎng)的時(shí)間。

 Web前端開(kāi)發(fā)技術(shù)發(fā)展越來(lái)越成熟，且適用范圍更廣。比如HTML5 可以替代原生APP，JavaScript能夠用于數(shù)據(jù)庫(kù)操作（MongoDB等NoSQL技術(shù)也支持JS語(yǔ)法），Node.js能夠讓JavaScript在服務(wù)器端運(yùn)行等。

2．為什么要選擇本書(shū)？

（1）涵蓋Web前端開(kāi)發(fā)的全體系內(nèi)容。

本書(shū)的內(nèi)容安排遵循Web開(kāi)發(fā)流程及由淺入深的認(rèn)知規(guī)律，首先介紹Web的基本概念及Web開(kāi)發(fā)工具，然后講解Web前端開(kāi)發(fā)的三大核心內(nèi)容—HTML5、CSS3、JavaScript，隨后介紹jQuery和AngularJS，接著進(jìn)一步介紹HTML5新增的文件接口、繪圖元素、本地存儲(chǔ)和地理定位功能，最后講解Web測(cè)試與發(fā)布技術(shù)。通過(guò)這本書(shū)，讀者可以掌握Web前端開(kāi)發(fā)的全體系知識(shí)。

（2）引入“瀏覽器支持”的工程理念。

Web前端開(kāi)發(fā)的結(jié)果要通過(guò)瀏覽器進(jìn)行展示。本書(shū)在講解HTML5和CSS3的各種元素、屬性時(shí)，明確說(shuō)明了各種瀏覽器對(duì)這些元素的支持；本書(shū)中所有的案例都進(jìn)行了主流瀏覽器兼容性測(cè)試，并對(duì)測(cè)試結(jié)果進(jìn)行了說(shuō)明，從而使讀者尤其是初學(xué)者，在學(xué)習(xí)之初就能樹(shù)立起“瀏覽器支持”這一Web前端開(kāi)發(fā)中的重要工程理念。

（3）書(shū)中案例具有較高的工程度和成熟度。

本書(shū)包含300多個(gè)案例，既有針對(duì)一個(gè)元素的小案例，也有綜合性的大案例。所有案例都經(jīng)過(guò)了精心設(shè)計(jì)，案例代碼的成熟度和工程應(yīng)用程度較高，許多案例達(dá)到了企業(yè)級(jí)應(yīng)用水平。讀者在學(xué)習(xí)本書(shū)時(shí)可以通過(guò)案例更好地理解知識(shí)和掌握應(yīng)用技術(shù)，同時(shí)這些案例也能成為讀者積累的代碼庫(kù)中的一部分，在進(jìn)行實(shí)際項(xiàng)目開(kāi)發(fā)時(shí)直接引用，真正起到“拿來(lái)就用”的作用，有效降低讀者從學(xué)習(xí)到項(xiàng)目開(kāi)發(fā)的成本。

（4）明確體現(xiàn)商業(yè)化開(kāi)發(fā)的特點(diǎn)。

本書(shū)作者及案例設(shè)計(jì)團(tuán)隊(duì)具有多年的商業(yè)化Web前端開(kāi)發(fā)經(jīng)驗(yàn)。全書(shū)在內(nèi)容組織、案例設(shè)計(jì)、編寫(xiě)形式上明確體現(xiàn)了商業(yè)化開(kāi)發(fā)的特點(diǎn)，有助于讀者更好地實(shí)現(xiàn)從學(xué)習(xí)到應(yīng)用的轉(zhuǎn)變。

（5）全屏幕適配，支持移動(dòng)Web開(kāi)發(fā)。

本書(shū)的內(nèi)容不僅考慮了面向PC的Web開(kāi)發(fā)，也考慮了面向移動(dòng)終端的Web開(kāi)發(fā)，全書(shū)的講解重新考慮“全終端適配”的概念，讓讀者能夠更加全面地理解Web前端開(kāi)發(fā)的應(yīng)用范圍，充分適應(yīng)移動(dòng)互聯(lián)網(wǎng)的時(shí)代特征。

3．讀者對(duì)象

本書(shū)適用于以下三類讀者。

一是從事Web前端開(kāi)發(fā)工作的專業(yè)技術(shù)人員，本書(shū)可幫助他們進(jìn)行深入、系統(tǒng)的深造學(xué)習(xí)，從而更好地理解Web知識(shí)體系、提高工作效率。

二是準(zhǔn)備從事Web前端開(kāi)發(fā)工作的入門(mén)者，本書(shū)可幫助他們?nèi)�面理解并掌握Web前端開(kāi)發(fā)的技術(shù)框架，為系統(tǒng)學(xué)習(xí)Web前端開(kāi)發(fā)指引方向，為后續(xù)工作學(xué)習(xí)打下扎實(shí)基礎(chǔ)。

三是高等院校中計(jì)算機(jī)相關(guān)專業(yè)特別是計(jì)算機(jī)科學(xué)與技術(shù)、軟件技術(shù)類專業(yè)的在校學(xué)生，本書(shū)可幫助他們從零開(kāi)始學(xué)習(xí)Web技術(shù)，不斷加深對(duì)Web前端開(kāi)發(fā)技術(shù)的理解，并且通過(guò)大量案例提升實(shí)踐操作的綜合能力，做到“學(xué)以致用”。

4．主要內(nèi)容

本書(shū)共23章，從內(nèi)容組織上看，包括Web基礎(chǔ)、HTML5、CSS3、JavaScript及開(kāi)發(fā)庫(kù)、Web前端開(kāi)發(fā)高級(jí)應(yīng)用、Web測(cè)試與發(fā)布六個(gè)部分。

本書(shū)在保留第一版主要內(nèi)容的基礎(chǔ)上，更新并補(bǔ)充了行業(yè)應(yīng)用的新技術(shù)熱點(diǎn)，進(jìn)一步優(yōu)化章節(jié)結(jié)構(gòu)，調(diào)整了全書(shū)內(nèi)容組織體系。調(diào)整的具體內(nèi)容為新增第17章、第21章、第23章，并調(diào)換了第一版第10章和第11章的順序。本書(shū)反映了Web前端開(kāi)發(fā)技術(shù)的最新發(fā)展?fàn)顩r，主要內(nèi)容如下：

第1～2章屬于Web基礎(chǔ)部分。主要介紹Web的基本概念、工作原理、Web前端開(kāi)發(fā)的含義，重點(diǎn)講解Web前端開(kāi)發(fā)的每個(gè)階段中所使用的開(kāi)發(fā)工具，幫助讀者為后續(xù)學(xué)習(xí)打下基礎(chǔ)。

第3～6章屬于HTML5部分。主要介紹HTML5的發(fā)展、優(yōu)勢(shì)、功能、新特征以及各種元素、屬性的用法、重點(diǎn)講解HTML5表單和多媒體的應(yīng)用技術(shù)。

第7～13章屬于CSS3部分。主要介紹CSS3的發(fā)展、功能、新特征，重點(diǎn)講解CSS3中選擇器、文字樣式、背景與邊框、盒模型、布局、動(dòng)畫(huà)的應(yīng)用技術(shù)。

第14～17章屬于JavaScript及開(kāi)發(fā)庫(kù)部分。主要介紹JavaScript的發(fā)展、功能、基本語(yǔ)法，重點(diǎn)講解jQuery、AJAX、AngularJS的應(yīng)用技術(shù)。

第18～21章屬于Web前端開(kāi)發(fā)的高級(jí)應(yīng)用部分。主要講解HTML5新增的文件接口、繪圖元素、本地存儲(chǔ)和地理定位功能。

第22～23章屬于Web測(cè)試與發(fā)布部分。主要介紹Web測(cè)試的基本內(nèi)容、Web測(cè)試的常用方法和常見(jiàn)測(cè)試軟件，并詳細(xì)介紹網(wǎng)站發(fā)布的流程。

本書(shū)第1版發(fā)布后，作者開(kāi)始積極探索科研、教研和教學(xué)工作的融合以及團(tuán)隊(duì)建設(shè)模式，初步形成了松散模式的技術(shù)團(tuán)隊(duì)和本書(shū)創(chuàng)作小組。劉明哲、馮順磊、路景鑫、賀路路、孫高強(qiáng)、董凱倫、張浩林全程參與了改版方案及本書(shū)內(nèi)容與案例的討論、審核和校對(duì)。在此對(duì)他們表示誠(chéng)摯的謝意。

由于作者水平有限，疏漏及不足之處在所難免，敬請(qǐng)廣大讀者朋友批評(píng)指正。

阮曉龍

2018年5月于鄭州

第1章 概述 1
1.1 Web基礎(chǔ) 2
1.1.1 Web的基本概念 2
1.1.2 Internet 2
1.1.3 協(xié)議 8
1.1.4 URL和域名 9
1.1.5 服務(wù)器 9
1.1.6 Web標(biāo)準(zhǔn) 9
1.2 Web是如何工作的？ 10
1.2.1 什么是網(wǎng)頁(yè)？ 10
1.2.2 什么是網(wǎng)站？ 11
1.2.3 網(wǎng)頁(yè)與網(wǎng)站的關(guān)系 11
1.2.4 瀏覽器是如何工作的？ 11
1.2.5 訪問(wèn)網(wǎng)站的過(guò)程 13
1.2.6 網(wǎng)站是怎么開(kāi)發(fā)出來(lái)的？ 13
1.3 為什么學(xué)習(xí)Web前端開(kāi)發(fā)？ 16
1.3.1 什么是Web前端開(kāi)發(fā)？ 16
1.3.2 Web前端工程師的工作內(nèi)容 17
1.3.3 Web前端工程師的職業(yè)前景 17
1.3.4 需要學(xué)習(xí)哪些內(nèi)容 17
1.3.5 需要購(gòu)買(mǎi)哪些設(shè)備？ 18
1.3.6 除了技術(shù)，還需要學(xué)什么 18
1.4 項(xiàng)目管理系統(tǒng) 19
1.4.1 什么是項(xiàng)目管理？ 19
1.4.2 項(xiàng)目管理的目的 19
1.4.3 項(xiàng)目管理系統(tǒng)—Microsoft Project 20
1.4.4 項(xiàng)目管理系統(tǒng)—Collabtive 20
第2章 開(kāi)發(fā)工具 21
2.1 開(kāi)發(fā)工具綜述 22
2.2 原型設(shè)計(jì)工具 22
2.2.1 什么是原型設(shè)計(jì)？ 22
2.2.2 原型設(shè)計(jì)工具—Axure RP 23
2.2.3 實(shí)訓(xùn)：使用Axure RP實(shí)現(xiàn)百度登錄頁(yè)原型設(shè)計(jì) 23
2.3 開(kāi)發(fā)工具 29
2.3.1 開(kāi)發(fā)工具的作用 29
2.3.2 網(wǎng)站開(kāi)發(fā)工具—Adobe Dreamweaver 30
2.3.3 網(wǎng)站開(kāi)發(fā)工具—Oracle NetBeans 30
2.3.4 網(wǎng)站開(kāi)發(fā)工具—Microsoft Visual Studio Code 31
2.3.5 實(shí)訓(xùn)：Adobe Dreamweaver CS6的安裝與基本使用 31
2.3.6 實(shí)訓(xùn)：Microsoft Visual Studio Code的安裝與基本使用 39
2.4 調(diào)試工具 41
2.4.1 什么是Web調(diào)試？ 41
2.4.2 網(wǎng)站調(diào)試工具—Firefox 41
2.4.3 網(wǎng)站調(diào)試工具—Google Chrome 42
2.4.4 網(wǎng)站調(diào)試工具—Internet Explorer 42
2.4.5 網(wǎng)站調(diào)試工具—Microsoft Edge 42
2.4.6 實(shí)訓(xùn)：使用Firefox進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試 42
2.5 代碼托管工具 48
2.5.1 為什么要進(jìn)行代碼托管？ 48
2.5.2 代碼托管的基本功能 48
2.5.3 代碼托管工具—GitHub 48
2.5.4 代碼托管工具—SVN 49
2.5.5 案例：使用GitHub開(kāi)源平臺(tái)實(shí)現(xiàn)網(wǎng)站代碼托管 49
第3章 初識(shí)HTML5 55
3.1 HTML概述 56
3.1.1 什么是HTML？ 56
3.1.2 HTML的發(fā)展歷程 56
3.1.3 HTML5發(fā)展史 56
3.1.4 HTML5開(kāi)發(fā)團(tuán)隊(duì) 57
3.1.5 HTML5官方資源 57
3.2 HTML5的優(yōu)勢(shì) 57
3.2.1 優(yōu)勢(shì) 57
3.2.2 新功能 59
3.3 HTML5的新特征 61
3.3.1 語(yǔ)法的改變 61
3.3.2 元素 62
3.3.3 屬性 67
3.3.4 全局屬性 69
3.4 HTML5文檔結(jié)構(gòu) 70
3.4.1 認(rèn)識(shí)文檔結(jié)構(gòu) 70
3.4.2 案例：創(chuàng)建HTML5網(wǎng)頁(yè) 72
第4章 HTML5結(jié)構(gòu)與屬性 73
4.1 從HTML4到HTML5 74
4.1.1 使用表格布局 74
4.1.2 使用區(qū)塊布局 74
4.1.3 使用HTML5結(jié)構(gòu)元素布局 75
4.1.4 語(yǔ)義Web 75
4.2 HTML5基礎(chǔ) 76
4.2.1 HTML5語(yǔ)法 76
4.2.2 HTML5元素 77
4.2.3 HTML5屬性 82
4.2.4 HTML5全局屬性 84
4.2.5 案例：個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)的實(shí)現(xiàn) 84
4.3 HTML5結(jié)構(gòu)元素 87
4.3.1 HTML5主體結(jié)構(gòu)元素 88
4.3.2 HTML5非主體結(jié)構(gòu)元素 92
4.3.3 案例：使用結(jié)構(gòu)元素進(jìn)行網(wǎng)頁(yè)布局（新聞列表+新聞列表內(nèi)容呈現(xiàn)） 95
4.4 超鏈接 99
4.4.1 絕對(duì)路徑與相對(duì)路徑 99
4.4.2 超鏈接元素 99
4.4.3 超鏈接屬性 100
4.4.4 案例：網(wǎng)址導(dǎo)航頁(yè)面的實(shí)現(xiàn) 100
第5章 表單 102
5.1 表單基礎(chǔ) 103
5.1.1 表單 103
5.1.2 input元素 104
5.1.3 label元素 105
5.1.4 button元素 105
5.1.5 select元素 106
5.1.6 textarea元素 108
5.2 使用form元素 108
5.2.1 新增form元素 109
5.2.2 form屬性總覽 110
5.2.3 新增form屬性 110
5.3 使用input元素 111
5.3.1 input類型總覽 111
5.3.2 新增input類型 112
5.3.3 input屬性總覽 119
5.3.4 新增的input屬性 120
5.4 案例：高考改革方案調(diào)查問(wèn)卷網(wǎng)頁(yè)的實(shí)現(xiàn) 126
5.5 案例：智能表單（用戶注冊(cè)） 130
第6章 多媒體 135
6.1 多媒體基礎(chǔ) 136
6.1.1 什么是多媒體？ 136
6.1.2 音頻編碼與音頻格式 136
6.1.3 視頻編碼與視頻格式 136
6.1.4 在Web上能夠使用的音頻和視頻格式 137
6.1.5 如何在Web上播放視頻？ 138
6.2 HTML5音頻與視頻 139
6.2.1 audio元素 139
6.2.2 video元素 140
6.2.3 audio和video的屬性 141
6.2.4 audio和video的方法 144
6.2.5 audio和video的事件 145
6.2.6 案例：在網(wǎng)頁(yè)上使用背景音樂(lè) 146
6.2.7 案例：在網(wǎng)頁(yè)上播放視頻 147
6.3 播放控制 147
6.3.1 預(yù)加載媒體文件 148
6.3.2 視頻封面圖 148
6.3.3 自動(dòng)播放 148
6.3.4 循環(huán)播放 148
6.3.5 添加變量 148
6.3.6 播放 149
6.3.7 暫停 150
6.3.8 快放、慢放、慢動(dòng)作 150
6.3.9 快進(jìn)、快退 151
6.3.10 進(jìn)度拖動(dòng) 152
6.3.11 音量控制 154
6.3.12 全屏播放 155
6.3.13 播放器容錯(cuò)處理 157
6.4 解決兼容問(wèn)題 158
6.4.1 瀏覽器對(duì)多媒體的兼容性支持 158
6.4.2 使用多種媒體格式提升兼容性 160
6.4.3 使用Flash提升兼容性 160
6.5 字幕 161
6.5.1 標(biāo)記時(shí)間的文本軌道 162
6.5.2 視頻字幕 164
6.6 案例：使用播放器插件實(shí)現(xiàn)視頻播放 166
第7章 初識(shí)CSS3 167
7.1 CSS3概述 168
7.1.1 什么是CSS？ 168
7.1.2 CSS發(fā)展史 168
7.1.3 CSS3新特征 168
7.1.4 主流瀏覽器對(duì)CSS3的支持 170
7.1.5 誰(shuí)在使用CSS3 172
7.1.6 CSS3的未來(lái) 172
7.2 CSS3功能 172
7.2.1 CSS3模塊 172
7.2.2 使用CSS3的優(yōu)勢(shì) 173
7.3 在HTML中使用CSS 174
7.3.1 內(nèi)聯(lián)樣式 174
7.3.2 嵌入樣式 174
7.3.3 外部樣式 175
7.3.4 網(wǎng)站CSS文件的規(guī)劃 176
7.4 案例：基于終端設(shè)備選擇不同樣式 177
7.5 案例：基于瀏覽器選擇不同樣式 178
第8章 選擇器 179
8.1 認(rèn)識(shí)CSS選擇器 180
8.2 基礎(chǔ)選擇器 180
8.2.1 語(yǔ)法 180
8.2.2 通配符選擇器 181
8.2.3 元素選擇器 182
8.2.4 類選擇器 183
8.2.5 ID選擇器 185
8.2.6 選擇器兼容性 186
8.3 層次選擇器 186
8.3.1 語(yǔ)法 186
8.3.2 后代選擇器 187
8.3.3 子選擇器 187
8.3.4 相鄰兄弟選擇器 189
8.3.5 通用兄弟選擇器 189
8.3.6 選擇器組合 190
8.3.7 選擇器兼容性 191
8.4 偽類選擇器 191
8.4.1 語(yǔ)法 191
8.4.2 動(dòng)態(tài)偽類選擇器 192
8.4.3 目標(biāo)偽類選擇器 193
8.4.4 語(yǔ)言偽類選擇器 194
8.4.5 UI元素狀態(tài)偽類選擇器 194
8.4.6 結(jié)構(gòu)偽類選擇器 196
8.4.7 否定偽類選擇器 204
8.4.8 偽元素 205
8.5 屬性選擇器 208
8.5.1 語(yǔ)法 208
8.5.2 使用方法 209
8.5.3 瀏覽器兼容性 212
第9章 文字樣式 213
9.1 文本樣式 214
9.1.1 屬性 214
9.1.2 文本顏色：color 214
9.1.3 縮進(jìn)：text-indent 215
9.1.4 行高：line-height 216
9.1.5 字母間隔：letter-spacing 216
9.1.6 水平對(duì)齊：text-align 217
9.1.7 文本裝飾：text-decoration 218
9.1.8 字符轉(zhuǎn)換：text-transform 219
9.1.9 空白處理：white-space 220
9.1.10 文字間隔：word-spacing 220
9.1.11 首字下沉：:first-letter 221
9.2 字體樣式 222
9.2.1 什么是字體？ 222
9.2.2 屬性 222
9.2.3 字體系列：font-family 223
9.2.4 字體大小：font-size 223
9.2.5 字體加粗：font-weight 224
9.2.6 字體風(fēng)格：font-style 225
9.3 字體圖標(biāo) 226
9.3.1 什么是字體圖標(biāo)？ 226
9.3.2 制作字體圖標(biāo) 226
9.3.3 如何使用字體圖標(biāo)？ 227
9.4 文本效果 228
9.4.1 CSS3新增文本屬性 228
9.4.2 文本溢出：text-overflow 228
9.4.3 文字陰影：text-shadow 229
9.4.4 文本換行 230
9.5 使用服務(wù)器端字體 231
9.6 案例：詩(shī)歌排版 232
9.7 案例：使用服務(wù)器端字體實(shí)現(xiàn)網(wǎng)站圖標(biāo) 234
第10章 背景與邊框 236
10.1 背景屬性 237
10.1.1 基本屬性 237
10.1.2 CSS3新增背景屬性 238
10.1.3 多背景 241
10.1.4 漸變背景 243
10.2 邊框?qū)傩?245
10.2.1 基本屬性 245
10.2.2 CSS3新增邊框?qū)傩?247
10.2.3 圓角邊框 248
10.2.4 圖片邊框 251
10.2.5 漸變邊框 256
10.2.6 盒子陰影 257
10.3 案例：圖片輪轉(zhuǎn)的實(shí)現(xiàn) 264
10.4 案例：網(wǎng)頁(yè)課程表的實(shí)現(xiàn) 266
第11章 盒模型 271
11.1 盒子 272
11.1.1 元素盒子 272
11.1.2 尺寸 280
11.2 盒子類型 281
11.2.1 盒子的基本類型 281
11.2.2 CSS3新增的類型 287
11.2.3 瀏覽器對(duì)盒子的支持情況 293
11.3 盒子的屬性 294
11.3.1 內(nèi)容溢出 294
11.3.2 自由縮放 299
11.3.3 外輪廓 299
11.3.4 陰影 301
11.4 瀏覽器的盒子調(diào)試 304
11.4.1 在Internet Explorer瀏覽器中進(jìn)行盒子調(diào)試 305
11.4.2 在Firefox瀏覽器中進(jìn)行盒子調(diào)試 307
11.4.3 在Google Chrome瀏覽器中進(jìn)行盒子調(diào)試 307
11.4.4 在Microsoft Edge瀏覽器中進(jìn)行盒子調(diào)試 308
第12章 布局 311
12.1 定位與布局的基本屬性 312
12.1.1 基本屬性 312
12.1.2 外邊距與內(nèi)邊距 312
12.1.3 浮動(dòng)布局 313
12.1.4 定位布局 318
12.2 多列布局 325
12.2.1 多列布局的基本知識(shí) 325
12.2.2 多列布局的基本屬性 326
12.2.3 多列布局屬性 326
12.2.4 列寬與列數(shù) 326
12.2.5 列邊距與列邊框 326
12.2.6 跨列布局 327
12.2.7 列高 327
12.3 盒布局 329
12.3.1 盒布局的基本知識(shí) 329
12.3.2 盒布局的基本屬性 329
12.3.3 使用自適應(yīng)寬度的彈性盒布局 329
12.3.4 改變?cè)�素的顯示順序 332
12.3.5 改變?cè)�素排列方�?334
12.3.6 使用彈性布局消除空白 335
12.3.7 對(duì)多個(gè)元素使用box-flex屬性 336
12.3.8 對(duì)齊方式 337
12.3.9 布局方式對(duì)比 339
12.4 自適應(yīng)布局 343
12.4.1 自適應(yīng)布局的基本知識(shí) 344
12.4.2 自適應(yīng)布局的基本屬性 344
12.4.3 允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整 344
12.4.4 不使用絕對(duì)寬度 344
12.4.5 相對(duì)大小的字體 345
12.4.6 流動(dòng)布局 345
12.4.7 選擇加載CSS 345
12.4.8 CSS的@media規(guī)則 345
12.4.9 圖片的自適應(yīng) 346
12.5 案例：網(wǎng)頁(yè)布局 348
第13章 CSS動(dòng)畫(huà) 359
13.1 Web動(dòng)畫(huà) 360
13.1.1 GIF動(dòng)畫(huà) 360
13.1.2 Flash動(dòng)畫(huà) 360
13.1.3 JavaScript動(dòng)畫(huà) 360
13.1.4 CSS3動(dòng)畫(huà) 361
13.2 使用變形屬性 361
13.2.1 進(jìn)行簡(jiǎn)單變形 361
13.2.2 變形子屬性 362
13.2.3 2D變形函數(shù) 369
13.2.4 3D變形函數(shù) 372
13.2.5 案例：制作時(shí)鐘 375
13.3 使用過(guò)渡屬性 378
13.3.1 設(shè)置元素過(guò)渡 378
13.3.2 設(shè)置過(guò)渡元素 379
13.3.3 設(shè)置過(guò)渡持續(xù)時(shí)間 380
13.3.4 指定過(guò)渡函數(shù) 381
13.3.5 規(guī)定過(guò)渡延遲時(shí)間 385
13.3.6 過(guò)渡觸發(fā) 386
13.3.7 案例：制作動(dòng)態(tài)網(wǎng)站導(dǎo)航 387
13.4 使用動(dòng)畫(huà)屬性 390
13.4.1 建立基本動(dòng)畫(huà) 390
13.4.2 動(dòng)畫(huà)關(guān)鍵幀 392
13.4.3 動(dòng)畫(huà)子屬性 393
13.4.4 給元素應(yīng)用動(dòng)畫(huà) 395
13.4.5 案例：實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà) 396
13.5 案例：引人入勝的動(dòng)態(tài)照片墻 402
第14章 初識(shí)JavaScript 405
14.1 JavaScript概述 406
14.1.1 什么是JavaScript？ 406
14.1.2 JavaScript能夠?qū)崿F(xiàn)什么？ 407
14.2 語(yǔ)法 407
14.2.1 調(diào)用方法 407
14.2.2 基本語(yǔ)法 408
14.2.3 函數(shù) 417
14.2.4 對(duì)象 418
14.3 DOM 419
14.3.1 什么是DOM？ 419
14.3.2 獲取HTML元素 419
14.3.3 對(duì)HTML元素進(jìn)行操作 421
14.4 案例：使用JavaScript進(jìn)行表單驗(yàn)證 423
14.4.1 功能 423
14.4.2 實(shí)現(xiàn)效果 423
14.4.3 代碼 424
14.5 案例：使用JavaScript實(shí)現(xiàn)規(guī)定時(shí)間內(nèi)答題效果 427
14.5.1 功能 427
14.5.2 實(shí)現(xiàn)效果 427
14.5.3 代碼 428
第15章 jQuery編程 430
15.1 jQuery概述 431
15.1.1 jQuery簡(jiǎn)介 431
15.1.2 為什么要使用jQuery？ 432
15.1.3 其他的JavaScript類庫(kù) 433
15.2 jQuery基礎(chǔ)應(yīng)用 434
15.2.1 調(diào)用方法 434
15.2.2 基本語(yǔ)法 434
15.2.3 選擇器 435
15.2.4 事件 445
15.2.5 常用效果 449
15.2.6 案例：使用jQuery實(shí)現(xiàn)圖片輪轉(zhuǎn) 456
15.3 jQuery中的DOM操作 459
15.3.1 DOM操作基礎(chǔ) 459
15.3.2 節(jié)點(diǎn)操作 460
15.3.3 屬性操作 467
15.3.4 樣式操作 468
15.3.5 內(nèi)容操作 470
15.3.6 案例：使用jQuery實(shí)現(xiàn)表格排序 472
15.4 jQuery插件 474
15.4.1 什么是jQuery插件？ 474
15.4.2 jQuery UI 475
15.4.3 jQuery Mobile 479
15.5 案例：使用jQuery插件實(shí)現(xiàn)表單驗(yàn)證 483
15.5.1 功能 483
15.5.2 實(shí)現(xiàn)效果 484
15.5.3 代碼 484
15.6 案例：使用JQuery Mobile快速開(kāi)發(fā)手機(jī)網(wǎng)站 485
15.6.1 功能 485
15.6.2 實(shí)現(xiàn)效果 485
15.6.3 代碼 486
第16章 AJAX 488
16.1 概述 489
16.1.1 什么是AJAX？ 489
16.1.2 為什么使用AJAX？ 489
16.1.3 AJAX的優(yōu)勢(shì) 489
16.1.4 AJAX的應(yīng)用場(chǎng)景 489
16.2 基礎(chǔ)知識(shí) 490
16.2.1 XML 490
16.2.2 xmlHttpRequest 491
16.2.3 工作原理 491
16.3 AJAX實(shí)現(xiàn) 492
16.3.1 案例：使用AJAX基于本地XML實(shí)現(xiàn)學(xué)生成績(jī)冊(cè) 492
16.3.2 案例：使用AJAX讀取網(wǎng)易新聞列表 495
16.4 使用jQuery實(shí)現(xiàn)AJAX 497
16.4.1 基本方法 497
16.4.2 jQuery中的全局事件 509
16.5 案例：實(shí)時(shí)表單驗(yàn)證 510
第17章 AngularJS 518
17.1 AngularJS概述 519
17.1.1 AngularJS簡(jiǎn)介 519
17.1.2 AngularJS特性 519
17.1.3 AngularJS框架 520
17.2 AngularJS基本概念 520
17.3 AngularJS應(yīng)用 521
17.3.1 AngularJS初始化 521
17.3.2 指令 523
17.3.3 模板 523
17.3.4 表達(dá)式 524
17.3.5 作用域 524
17.3.6 控制器 526
17.3.7 過(guò)濾器 526
17.3.8 表單 528
17.3.9 模塊 530
17.3.10 路由 530
17.3.11 服務(wù) 534
17.4 案例：使用AngularJS實(shí)現(xiàn)即時(shí)搜索 537
第18章 文件 540
18.1 文件存儲(chǔ) 541
18.2 處理用戶文件 541
18.2.1 讀取文件 541
18.2.2 讀取文件屬性 543
18.2.3 文件分割 545
18.2.4 處理事件 547
18.3 文件操作 549
18.3.1 本地磁盤(pán)操作 549
18.3.2 創(chuàng)建文件 552
18.3.3 創(chuàng)建目錄 553
18.3.4 列出文件 553
18.3.5 處理文件 557
18.3.6 移動(dòng) 557
18.3.7 復(fù)制 560
18.3.8 刪除 560
18.4 文件內(nèi)容操作 561
18.4.1 寫(xiě)入內(nèi)容 561
18.4.2 追加內(nèi)容 564
18.4.3 讀取內(nèi)容 564
18.5 案例：用戶本地資源管理 567
第19章 繪圖 575
19.1 Canvas基礎(chǔ)知識(shí) 576
19.1.1 Canvas 576
19.1.2 繪圖方法 577
19.1.3 繪圖屬性 578
19.2 圖形繪制 579
19.2.1 矩形 579
19.2.2 線條 581
19.2.3 多邊形 581
19.2.4 圓角矩形 583
19.2.5 圓形 584
19.2.6 曲線 586
19.2.7 文字 588
19.2.8 圖像 592
19.3 圖形變換與控制 600
19.3.1 坐標(biāo)變換 600
19.3.2 矩陣變換 604
19.3.3 設(shè)置陰影 605
19.3.4 疊加風(fēng)格 607
19.3.5 填充風(fēng)格 608
19.4 案例：用Canvas繪制統(tǒng)計(jì)報(bào)表 612
第20章 本地存儲(chǔ) 616
20.1 基礎(chǔ)知識(shí) 617
20.1.1 本地存儲(chǔ)簡(jiǎn)介 617
20.1.2 本地存儲(chǔ)類型 617
20.2 Cookie 619
20.2.1 Cookie概述 619
20.2.2 數(shù)據(jù)操作 619
20.2.3 案例：在網(wǎng)站中自動(dòng)記錄用戶狀態(tài) 621
20.3 Web Storage 623
20.3.1 sessionStorage 623
20.3.2 localStorage 626
20.3.3 對(duì)比分析 628
20.4 本地?cái)?shù)據(jù)庫(kù) 628
20.4.1 存儲(chǔ)原理 628
20.4.2 數(shù)據(jù)操作 629
20.5 案例：使用本地存儲(chǔ)減少服務(wù)器數(shù)據(jù)庫(kù)請(qǐng)求 635
第21章 地理定位 641
21.1 常見(jiàn)地理定位方式 642
21.1.1 IP定位 642
21.1.2 GPS定位 642
21.1.3 Wi-Fi定位 642
21.1.4 手機(jī)基站定位 642
21.2 使用HTML5實(shí)現(xiàn)地理定位 642
21.2.1 瀏覽器支持性檢查 643
21.2.2 位置請(qǐng)求 643
21.2.3 隱私保護(hù) 646
21.3 案例：使用百度地圖展示當(dāng)前位置 646
21.4 案例：使用百度地圖展示運(yùn)動(dòng)軌跡 648
第22章 Web測(cè)試 652
22.1 概述 653
22.1.1 什么是Web測(cè)試？ 653
22.1.2 測(cè)試內(nèi)容 653
22.1.3 測(cè)試目的 654
22.2 用戶界面測(cè)試 654
22.2.1 導(dǎo)航測(cè)試 654
22.2.2 圖形測(cè)試 655
22.2.3 內(nèi)容測(cè)試 655
22.2.4 整體界面測(cè)試 655
22.3 兼容性測(cè)試 655
22.3.1 平臺(tái)兼容性測(cè)試 655
22.3.2 瀏覽器兼容性測(cè)試 657
22.3.3 分辨率兼容性測(cè)試 658
22.4 功能測(cè)試 659
22.5 性能測(cè)試 662
22.5.1 連接速度測(cè)試 663
22.5.2 壓力測(cè)試 667
第23章 網(wǎng)站發(fā)布 676
23.1 概述 677
23.2 域名注冊(cè) 677
23.2.1 什么是域名注冊(cè)？ 677
23.2.2 如何注冊(cè)域名？ 677
23.2.3 實(shí)訓(xùn)：通過(guò)阿里云進(jìn)行域名注冊(cè) 677
23.3 Web服務(wù)器構(gòu)建 680
23.3.1 什么是Web服務(wù)器？ 680
23.3.2 如何構(gòu)建Web服務(wù)器？ 680
23.3.3 實(shí)訓(xùn)：使用阿里云構(gòu)建Web服務(wù)器 680
23.4 網(wǎng)站上傳 686
23.5 網(wǎng)站備案 686
23.5.1 什么是網(wǎng)站備案？ 686
23.5.2 實(shí)訓(xùn)：通過(guò)阿里云進(jìn)行網(wǎng)站備案 686
23.6 域名解析 688
23.6.1 什么是域名解析？ 688
23.6.2 實(shí)訓(xùn)：在阿里云上配置域名解析 689
參考文獻(xiàn) 691

1. 零基礎(chǔ)玩轉(zhuǎn)國(guó)產(chǎn)大模型DeepSeek [徐永冰 張帥 編著]
2. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統(tǒng)項(xiàng)目管理師考試32小時(shí)通關(guān)（適用第4版考綱） [薛大龍]
4. 信息系統(tǒng)管理工程師考試32小時(shí)通關(guān)（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測(cè)實(shí)訓(xùn) [洪曉江 達(dá)則曉麗 錢(qián)波]
6. 科技信息檢索與論文寫(xiě)作實(shí)用教程 [李振華]
7. 傳統(tǒng)山水畫(huà)論解讀與實(shí)踐 [陳鈉 著]
8. Python數(shù)據(jù)庫(kù)編程 [主編 殷樹(shù)友 邢 翀]
9. 計(jì)算機(jī)基礎(chǔ)實(shí)訓(xùn)指導(dǎo) [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國(guó)勇 晏廷榮]
11. Vienna整流器技術(shù) [桂存兵 著]
12. 變頻器與伺服應(yīng)用 [陳剛 葉云飛]
13. 物聯(lián)網(wǎng)工程設(shè)計(jì)與實(shí)踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運(yùn)營(yíng)與管理 [鐘肖英 陳瀟]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
17. 信息技術(shù)基礎(chǔ)（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應(yīng)用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學(xué)生職業(yè)發(fā)展與就業(yè)指導(dǎo) [主編　劉志堅(jiān)]
20. 高級(jí)辦公應(yīng)用項(xiàng)目教程 [主編 屈晶 趙成麗]
21. 微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問(wèn)百答 [華俊 盧秀英 邵甜甜 著]
23. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yīng)用 [主編 唐繼勇 葉坤 孫夢(mèng)娜]
24. 大學(xué)生創(chuàng)業(yè)基礎(chǔ) [主編 王麗莉 王 楊]
25. 船舶輔機(jī) [主編 王連海 于洋 姜淑翠]
26. 大學(xué)生就業(yè)指導(dǎo) [主編 王麗莉 董宴廷]
27. 系統(tǒng)架構(gòu)設(shè)計(jì)師章節(jié)習(xí)題與考點(diǎn)特訓(xùn) [主編 薛大龍 鄒月平]
28. 高校學(xué)生工作探索與實(shí)踐 [郭亮 著]
29. 大學(xué)生情商管理 [方雄 著]
30. 2023年長(zhǎng)沙市會(huì)展業(yè)發(fā)展報(bào)告 [主編 周棟良]